/* =========================================================================
   Phú Châu Door — CSS chính
   1 biến · 2 nền · 3 bố cục · 4 nút · 5 đầu trang · 6 trang chủ
   7 sản phẩm · 8 danh mục · 9 bài viết · 10 trang tĩnh · 11 chân trang · 12 mobile
   ========================================================================= */

/* ---------- 1. Biến ---------- */
:root {
	--muc:       #14110d;
	--muc-2:     #4a443c;   /* chữ phụ */
	--muc-3:     #847c71;   /* chú thích */
	--giay:      #ffffff;
	--nen:       #faf8f4;   /* nền ấm */
	--nen-2:     #f2eee7;
	--vach:      #e7e1d7;
	--vach-dam:  #d4ccbf;

	--lua:       #a8301a;   /* đỏ gạch — nhấn, không dùng làm nền lớn */
	--lua-dam:   #8a2614;
	--lua-nhat:  #fdf1ee;
	--go:        #7d5428;
	--go-dam:    #5a3a18;   /* nền dải số liệu — màu gỗ đậm, thay cho đen */
	--go-sau:    #43290f;   /* đầu kia của dải chuyển sắc */
	--zalo:      #0068ff;
	--zalo-dam:  #0052cc;

	--r:         12px;
	--r-nho:     8px;
	--r-chip:    999px;

	--bong-1:    0 1px 2px rgba(20,17,13,.04);
	--bong-2:    0 1px 3px rgba(20,17,13,.06), 0 10px 28px -14px rgba(20,17,13,.22);
	--bong-3:    0 2px 6px rgba(20,17,13,.08), 0 20px 48px -20px rgba(20,17,13,.3);

	--vung:      1200px;
	--vung-hep:  760px;
	--le:        clamp(1rem, 4vw, 2.25rem);

	--chu: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	       Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Nền ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* 🔴 Chốt chặn: thuộc tính [hidden] của HTML chỉ đặt display:none ở mức thấp nhất,
   nên BẤT KỲ khai báo display nào trên phần tử cũng ghi đè được nó. Hộp báo giá
   có display:flex từng vì thế luôn hiện. Dòng này giữ cho [hidden] luôn có hiệu lực. */
[hidden] { display: none !important; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 126px;
	/* clip chứ không phải hidden: hidden làm hỏng position:sticky của đầu trang */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--chu);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--muc);
	background: var(--giay);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* cv11: kiểu chữ 'a','g' một tầng — dễ đọc hơn ở cỡ nhỏ
	   ss01: dấu tiếng Việt gọn hơn · tnum: số thẳng cột trong bảng thông số */
	font-feature-settings: "cv11", "ss01";
	font-variant-numeric: tabular-nums;
	text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--muc); text-decoration-color: var(--vach-dam); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; letter-spacing: -.016em; font-weight: 700; }
/* 🔴 THANG TIÊU ĐỀ — KHAI ĐỦ h1 ĐẾN h6, KHÔNG BỎ SÓT CẤP NÀO.
 *
 *    Bỏ sót là lỗi đã có thật trên site này: nội dung nhập về dùng h4
 *    123 lần mà CSS không khai, nên trình duyệt lấy mặc định `1em bold` —
 *    h4 to bằng chữ thường, nhìn không ra là tiêu đề. Mặc định của h5
 *    (0.83em) và h6 (0.67em) còn tệ hơn: NHỎ HƠN chữ thường.
 *
 *    Cỡ ở đây dùng cho TIÊU ĐỀ KHỐI ngoài thân bài. Trong thân bài
 *    (.pc-noi-dung) có thang riêng tính bằng `em` — xem mục 9. */
h1 { font-size: clamp(1.95rem, 1.3rem + 2.5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
h4 { font-size: clamp(1rem, .96rem + .2vw, 1.12rem); }
h5 { font-size: 1rem; }
/* h6 nhỏ hơn chữ thường thì phải bù bằng chữ hoa và giãn chữ, không thì
   nó chìm nghỉm giữa đoạn văn. */
h6 { font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muc-3); }
p  { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--lua); outline-offset: 3px; border-radius: 4px; }

/* Icon: luôn ăn theo màu chữ, không bao giờ co méo trong flex */
.pc-icon { display: block; flex: none; }
.pc-icon--zalo { color: inherit; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.pc-bo-qua { position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--muc); color: var(--giay); padding: .75rem 1rem; }
.pc-bo-qua:focus { left: 0; }

/* ---------- 3. Bố cục ---------- */
.pc-vung { width: 100%; max-width: var(--vung); margin-inline: auto; padding-inline: var(--le); }

/* 🔴 Khoang cach khoi la thu quyet dinh trang trong "re" hay khong.
   Gia tri cu la 44-80px, khoi nao cung dinh khoi nay. Trang cua doi thu
   lam tot deu o muc 100-120px. Doi so nay thi phai doi ca .pc-khoi__dan
   ben duoi cho can nhip, dung sua mot minh cho nay. */
.pc-khoi { padding-block: clamp(3.25rem, 7.5vw, 6.5rem); }
/* 🔴 KHONG dung duong ke de ngan khoi. Doi nen la du — them duong ke thi
   trang day vach ngang, do chinh la thu lam no trong nhu bang dieu khien. */
.pc-khoi--nen { background: var(--nen); }
.pc-khoi--toi { background: var(--muc); color: rgba(255,255,255,.76); }
.pc-khoi--toi h2, .pc-khoi--toi h3, .pc-khoi--toi strong { color: #fff; }
.pc-khoi--toi .pc-khoi__dan { color: rgba(255,255,255,.62); }
.pc-khoi--toi .pc-khoi__chu-thich { color: rgba(255,255,255,.4); }
/* ══════════════════════════════════════════════════════════════════
   🔴 DAU KHOI CAN GIUA LA MAC DINH.
   Nhan khoi (gach + chu hoa) → tieu de lon → doan dan hep, tat ca can giua.
   Khoi nao bo cuc hai cot thi them .pc-khoi--trai de tro ve can trai
   (vi du khoi "Xuong o xa Tay Phuong" — chu mot ben, anh mot ben).

   🚫 KHONG viet hoa tieu de khoi. Tieu de ben nay la CAU hoan chinh
   tieng Viet, co dau va co dau hoi — "CONG TRINH CUA ANH CHI CAN CAP NAO?"
   doc nhu dang quat. Phan chu hoa de cho nhan khoi gach ngang o tren.
   ══════════════════════════════════════════════════════════════════ */
.pc-khoi__tieu-de { margin-bottom: .75rem; text-wrap: balance; }

/* Nhãn khối — gạch ngắn màu thương hiệu đứng trước, tạo nhịp cho cả trang */
.pc-nhan-khoi {
	display: flex; align-items: center; gap: .65rem;
	margin: 0 0 1rem; font-size: .78rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--go);
}
.pc-nhan-khoi::before, .pc-nhan-khoi::after {
	content: ""; width: 28px; height: 2px; flex: none;
	background: linear-gradient(90deg, var(--lua), var(--go));
}
/* Gach ben phai CHI hien khi nhan nam giua — xem khoi .pc-khoi ben duoi. */
.pc-nhan-khoi::after { display: none; background: linear-gradient(270deg, var(--lua), var(--go)); }

/* 🔴 Can giua CHI ap trong .pc-khoi, khong ap toan site: dau trang Gioi thieu
   va Cong trinh cung dung .pc-nhan-khoi nhung can trai — can giua moi mot
   cai nhan o do la hong dau trang. */
.pc-khoi .pc-nhan-khoi { justify-content: center; }
.pc-khoi .pc-nhan-khoi::after { display: block; }
.pc-khoi > .pc-khoi__tieu-de,
.pc-khoi > .pc-vung > .pc-khoi__tieu-de,
.pc-khoi__dau-ngang .pc-khoi__tieu-de {
	text-align: center; max-width: 28ch; margin-inline: auto;
}

/* Bo cuc hai cot thi tro ve can trai */
.pc-khoi--trai .pc-nhan-khoi { justify-content: flex-start; }
.pc-khoi--trai .pc-nhan-khoi::after { display: none; }
.pc-khoi--trai .pc-khoi__tieu-de { text-align: left; margin-inline: 0; max-width: 20ch; }
.pc-khoi--trai .pc-khoi__dan { margin-inline: 0; text-align: left; }
.pc-khoi--toi .pc-nhan-khoi { color: #e8bb94; }
.pc-khoi--toi .pc-nhan-khoi::before { background: linear-gradient(90deg, #e8bb94, rgba(232,187,148,.25)); }
.pc-khoi__dan {
	max-width: 62ch; margin: 0 0 2.75rem;
	color: var(--muc-2); font-size: 1.08rem; line-height: 1.75;
}
.pc-khoi > .pc-khoi__dan,
.pc-khoi > .pc-vung > .pc-khoi__dan { margin-inline: auto; text-align: center; }
.pc-khoi__chu-thich { margin-top: 1.75rem; font-size: .875rem; color: var(--muc-3); text-align: center; }
.pc-khoi--trai .pc-khoi__chu-thich { text-align: left; }
/* Dau khoi co lien ket "Xem tat ca": tieu de o giua, lien ket xuong duoi. */
.pc-khoi__dau-ngang {
	display: flex; flex-direction: column; align-items: center; gap: .9rem;
	margin-bottom: 2.75rem;
}
.pc-khoi__dau-ngang .pc-khoi__tieu-de { margin: 0; }
.pc-khoi__dau-ngang .pc-nhan-khoi { margin-bottom: .9rem; }
.pc-lien-ket-them { font-weight: 600; font-size: .9375rem; color: var(--lua); text-decoration: none; white-space: nowrap; }
.pc-lien-ket-them::after { content: " →"; }
.pc-lien-ket-them:hover { text-decoration: underline; }

.pc-luoi { display: grid; gap: 1.75rem; }
.pc-luoi--3   { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.pc-luoi--4   { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.pc-luoi--bai { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pc-luoi--ei  { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.pc-nhan {
	margin-bottom: .85rem; font-size: .8125rem; font-weight: 600;
	letter-spacing: .05em; text-transform: uppercase; color: var(--go);
}

.pc-chip {
	display: inline-block; padding: .25rem .65rem; margin: 0 .3rem .3rem 0;
	border: 0; border-radius: var(--r-chip);
	background: var(--nen-2); font-size: .8125rem; font-weight: 600; color: var(--muc-2);
}
.pc-chip--nho { padding: .12rem .5rem; font-size: .75rem; }
/* Chip có biểu tượng đứng trước — dùng cho nhãn hồ sơ, nhãn chứng nhận. */
.pc-chip--mau, .pc-chip--nhat {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .75rem;
}
.pc-chip--mau { background: var(--lua-nhat); color: var(--lua); }
.pc-chip--nhat { background: var(--giay); color: var(--muc-3); }

/* Đường dẫn phân cấp */
.pc-duong-dan { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--muc-3); }
.pc-duong-dan ol { display: flex; flex-wrap: wrap; gap: .25rem .4rem; margin: 0; padding: 0; list-style: none; }
.pc-duong-dan li { display: flex; align-items: center; gap: .4rem; }
.pc-duong-dan li + li::before { content: "/"; color: var(--vach-dam); }
.pc-duong-dan a { color: var(--muc-2); text-decoration: none; }
.pc-duong-dan a:hover { color: var(--muc); text-decoration: underline; }
.pc-duong-dan [aria-current] { color: var(--muc-3); }

/* ---------- 4. Nút ---------- */
.pc-nut {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .72rem 1.3rem;
	border: 1px solid transparent; border-radius: var(--r-nho);
	font: inherit; font-weight: 600; line-height: 1.2; white-space: nowrap;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.pc-nut:active { transform: translateY(1px); }
.pc-nut--zalo { background: var(--zalo); color: #fff; box-shadow: var(--bong-1); }
.pc-nut--zalo:hover { background: var(--zalo-dam); box-shadow: var(--bong-2); }
.pc-nut .pc-icon { flex: none; }
.pc-nut--goi { background: var(--giay); color: var(--muc); border-color: var(--vach-dam); }
.pc-nut--goi:hover { border-color: var(--muc-2); box-shadow: var(--bong-1); }
.pc-nut--phu { background: var(--muc); color: var(--giay); }
.pc-nut--chinh { background: var(--muc); color: var(--giay); box-shadow: var(--bong-1); }
.pc-nut--chinh:hover { background: #2a241c; box-shadow: var(--bong-2); }
.pc-nut--nho { min-height: 40px; padding: .42rem .9rem; font-size: .9rem; }

.pc-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.pc-cta__dan { flex-basis: 100%; margin: 0 0 .25rem; font-weight: 600; }
.pc-cta__ghi-chu { flex-basis: 100%; margin: .55rem 0 0; font-size: .875rem; color: var(--muc-2); }
.pc-cta--cuoi-bai {
	margin-top: 2.5rem; padding: 1.6rem;
	background: var(--nen); border: 1px solid var(--vach); border-radius: var(--r);
}

.pc-khoi--chot {
	margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--nen); border: 1px solid var(--vach); border-radius: var(--r);
}
.pc-khoi--chot h2 { margin-bottom: .4rem; }
.pc-khoi--chot p { max-width: 62ch; color: var(--muc-2); }

/* ---------- 5. Đầu trang ---------- */
.pc-dau-trang { position: sticky; top: 0; z-index: 50; }

/* 5.1 Thanh tiện ích */
.pc-tien-ich {
	background: var(--muc); color: rgba(255,255,255,.72);
	font-size: .8125rem; line-height: 1.4;
}
.pc-tien-ich__trong {
	display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
	align-items: center; justify-content: space-between;
	min-height: 36px; padding-block: .4rem;
}
.pc-tien-ich p { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pc-tien-ich .pc-icon { opacity: .6; }
.pc-tien-ich__usp .pc-icon { opacity: .85; }
.pc-tien-ich__usp { color: #e8bb94; font-weight: 500; }

/* 5.2 Thanh chính */
.pc-thanh {
	position: relative; /* mốc định vị cho bảng thả xuống */
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--vach);
	transition: box-shadow .2s;
}
.pc-dau-trang.da-cuon .pc-thanh { box-shadow: var(--bong-2); }
.pc-thanh__trong { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; transition: min-height .2s; }
.pc-dau-trang.da-cuon .pc-thanh__trong { min-height: 64px; }

.pc-logo { flex: none; }
.pc-logo img { max-height: 46px; width: auto; transition: max-height .2s; }
.pc-dau-trang.da-cuon .pc-logo img { max-height: 40px; }
.pc-logo__chu { font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.pc-logo__chu strong { color: var(--lua); font-weight: 800; }

/* 5.3 Điều hướng */
.pc-dh { margin-left: auto; }
.pc-dh__ds { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
/* Mục menu là MỘT khối: chữ và mũi tên nằm chung một nền bo góc.
   Bên trong vẫn là hai vùng bấm riêng — <a> đi tới trang, <button> mở bảng —
   để trên thiết bị cảm ứng chạm chữ là đi, chạm mũi tên là mở.
   🔴 Nền đặt ở .pc-dh__muc, KHÔNG đặt ở từng phần tử con: làm thế thì chữ và
   mũi tên sáng lên thành hai nút rời. */
.pc-dh__muc {
	display: flex; align-items: center; border-radius: var(--r-nho);
	transition: background-color .15s;
}
.pc-dh__muc:hover,
.pc-dh__muc.la-mo { background: var(--nen-2); }

.pc-dh__lk {
	display: block; padding: .55rem .6rem; background: none;
	font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: color .15s;
}
.pc-dh__muc--co-con > .pc-dh__lk { padding-right: .2rem; }
.pc-dh__muc.dang-xem > .pc-dh__lk { color: var(--lua); font-weight: 600; }

.pc-dh__mo {
	display: grid; place-items: center; align-self: stretch;
	width: 26px; padding: 0 .5rem 0 0;
	background: none; border: 0; color: var(--muc-3); cursor: pointer;
}
.pc-dh__muc:hover .pc-dh__mo,
.pc-dh__muc.la-mo .pc-dh__mo { color: var(--muc); }
.pc-dh__mui-ten { transition: transform .2s; }
.pc-dh__muc.la-mo .pc-dh__mui-ten { transform: rotate(180deg); }

/* Viền tiêu điểm bàn phím ôm cả khối cho khỏi lệch */
.pc-dh__lk:focus-visible,
.pc-dh__mo:focus-visible { outline-offset: -2px; }

/* 5.4 Menu thả xuống — tràn hết chiều ngang */
/* Bám hai mép thanh header — KHÔNG dùng 100vw + translateX(-50%):
   cách đó neo theo mục menu nên bảng lệch sang trái. */
.pc-tx {
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--giay); border-top: 1px solid var(--vach);
	box-shadow: var(--bong-3);
	animation: pc-ha-xuong .16s ease-out;
}
@keyframes pc-ha-xuong { from { opacity: 0; transform: translateY(-6px); } }
.pc-tx__trong {
	display: grid; gap: 1.75rem; padding-block: 1.6rem 1.9rem;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1fr);
	align-items: start;
}
.pc-tx__cot--rong { grid-column: span 2; }
.pc-tx__nhan {
	margin: 0 0 .85rem; font-size: .75rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--muc-3);
}
.pc-tx__ds { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.pc-tx__ds a {
	display: flex; gap: .7rem; align-items: center;
	padding: .45rem .55rem; border-radius: var(--r-nho); text-decoration: none;
	transition: background-color .15s;
}
.pc-tx__ds a:hover { background: var(--nen); }
.pc-tx__chu { flex: 1; }

/* Số mẫu — chuông nhỏ bên phải, luôn thẳng cột */
.pc-tx__so {
	flex: none; min-width: 26px; padding: .1rem .42rem;
	background: var(--nen-2); border-radius: var(--r-chip);
	font-size: .72rem; font-style: normal; font-weight: 700;
	text-align: center; color: var(--muc-3);
}
.pc-tx__ds a:hover .pc-tx__so { background: var(--giay); color: var(--muc); }
/* Ảnh nhỏ trong menu thả xuống — cũng vuông, cùng lý do với thẻ kiểu cánh */
.pc-tx__anh { flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--nen-2); }
.pc-tx__anh img { width: 100%; height: 100%; object-fit: cover; }
.pc-tx__ds--bai .pc-tx__anh { width: 80px; height: auto; aspect-ratio: 16/9; }
.pc-tx__chu { display: grid; gap: .1rem; min-width: 0; }
.pc-tx__chu strong { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.pc-tx__chu span, .pc-tx__ds > li > a > span:not(.pc-tx__anh):not(.pc-tx__chu) {
	font-size: .8125rem; color: var(--muc-2); line-height: 1.4;
}
.pc-tx__ds--bai .pc-tx__chu strong {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pc-tx__ds--ei strong { font-size: .98rem; color: var(--lua); letter-spacing: -.01em; }
.pc-tx__ds--gon a { padding-block: .52rem; }
.pc-tx__ds--gon strong { font-weight: 500; font-size: .9rem; }

.pc-tx__cot--chot { padding: 1.15rem; background: var(--nen); border: 0; border-radius: var(--r); }
.pc-tx__dan { margin-bottom: .9rem; font-size: .875rem; line-height: 1.6; color: var(--muc-2); }

/* Dải liên kết dưới chân bảng thả xuống */
.pc-tx__chan { background: var(--nen); border-top: 1px solid var(--vach); }
.pc-tx__chan-trong { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding-block: .85rem; }
.pc-tx__chan a {
	font-size: .875rem; font-weight: 600; color: var(--muc-2); text-decoration: none;
}
.pc-tx__chan a::after { content: " →"; color: var(--lua); }
.pc-tx__chan a:hover { color: var(--lua); }

/* 5.5 Cụm bên phải */
.pc-thanh__phai { display: flex; align-items: center; gap: .6rem; flex: none; }

.pc-nut-tim {
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
	background: none; border: 1px solid var(--vach); border-radius: var(--r-nho);
	color: var(--muc-2); cursor: pointer; transition: border-color .15s, color .15s;
}
.pc-nut-tim:hover { border-color: var(--vach-dam); color: var(--muc); }
.pc-nut-tim[aria-expanded="true"] { background: var(--nen-2); border-color: var(--vach-dam); color: var(--muc); }

.pc-dien-thoai { display: flex; align-items: center; gap: .5rem; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.pc-dien-thoai .pc-icon { color: var(--muc-3); }
.pc-dien-thoai:hover .pc-icon { color: var(--lua); }
.pc-dien-thoai__chu { display: grid; }
.pc-dien-thoai__nhan { font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muc-3); }
.pc-dien-thoai strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.pc-dien-thoai:hover strong { color: var(--lua); }

.pc-o-tim { border-top: 1px solid var(--vach); background: var(--nen); animation: pc-ha-xuong .16s ease-out; }
.pc-o-tim .pc-tim { max-width: 560px; margin-block: .9rem; }

.pc-mo-menu {
	display: none; width: 44px; height: 44px; padding: 0;
	background: none; border: 1px solid var(--vach-dam); border-radius: var(--r-nho); cursor: pointer;
}
.pc-mo-menu__vach, .pc-mo-menu__vach::before, .pc-mo-menu__vach::after {
	display: block; width: 19px; height: 2px; margin-inline: auto;
	background: var(--muc); transition: transform .18s, opacity .18s;
}
.pc-mo-menu__vach::before { content: ""; transform: translateY(-6px); }
.pc-mo-menu__vach::after  { content: ""; transform: translateY(4px); }
.pc-mo-menu[aria-expanded="true"] .pc-mo-menu__vach { background: transparent; }
.pc-mo-menu[aria-expanded="true"] .pc-mo-menu__vach::before { transform: rotate(45deg); }
.pc-mo-menu[aria-expanded="true"] .pc-mo-menu__vach::after  { transform: rotate(-45deg); }

/* 5.6 Ngăn kéo trên điện thoại
   Ba tầng: đầu (logo + nút đóng) · thân cuộn · chân dính đáy (Zalo + Gọi).
   Xem ghi chú ở header.php mục 3. */
.pc-man-che {
	position: fixed; inset: 0; z-index: 55;
	background: rgba(14,11,8,.5); backdrop-filter: blur(2px);
	animation: pc-hien .18s ease-out;
}
@keyframes pc-hien { from { opacity: 0; } }

.pc-ngan-keo {
	position: fixed; inset: 0 0 0 auto; z-index: 56;
	display: flex; flex-direction: column;
	width: min(420px, 100%); height: 100%; height: 100dvh; background: var(--giay);
	box-shadow: var(--bong-3);
	animation: pc-truot .22s cubic-bezier(.2,.8,.3,1);
}
.pc-ngan-keo[hidden] { display: none; }
@keyframes pc-truot { from { transform: translateX(100%); } }

/* Đầu: logo + nút đóng — luôn thấy, không cuộn theo */
.pc-ngan-keo__dau {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 62px; padding: .5rem .75rem .5rem var(--le);
	border-bottom: 1px solid var(--vach); flex: none;
}
.pc-ngan-keo__dau .pc-logo img { max-height: 36px; width: auto; }
.pc-ngan-keo__dong {
	display: grid; place-items: center; width: 44px; height: 44px; flex: none;
	background: var(--nen-2); border: 0; border-radius: 50%; cursor: pointer;
}
.pc-ngan-keo__dong:hover { background: var(--vach); }
.pc-ngan-keo__x { position: relative; width: 18px; height: 18px; }
.pc-ngan-keo__x::before, .pc-ngan-keo__x::after {
	content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 2px;
	background: var(--muc); border-radius: 2px;
}
.pc-ngan-keo__x::before { transform: translateY(-50%) rotate(45deg); }
.pc-ngan-keo__x::after  { transform: translateY(-50%) rotate(-45deg); }

/* Thân: phần duy nhất cuộn được */
.pc-ngan-keo__than {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	padding: 1rem var(--le) 1.5rem;
}
.pc-ngan-keo .pc-tim { margin-block: 0 .75rem; max-width: none; }

.pc-ngan-keo__ds { margin: 0; padding: 0; list-style: none; }
.pc-ngan-keo__hang { display: flex; align-items: center; border-bottom: 1px solid var(--vach); }
.pc-ngan-keo__hang > a {
	position: relative; flex: 1; display: flex; align-items: center; min-height: 54px;
	font-size: 1.05rem; font-weight: 600; text-decoration: none; color: var(--muc);
}
/* Mục đang xem: chữ đỏ gạch + vạch dọc bên trái */
.pc-ngan-keo__ds > li.la-hien-tai > .pc-ngan-keo__hang > a { color: var(--lua); }
.pc-ngan-keo__ds > li.la-hien-tai > .pc-ngan-keo__hang > a::before {
	content: ""; position: absolute; left: calc(-1 * var(--le)); top: 14px; bottom: 14px;
	width: 3px; border-radius: 0 3px 3px 0; background: var(--lua);
}
.pc-ngan-keo__gap {
	display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-right: -.6rem;
	background: none; border: 0; border-radius: 50%; color: var(--muc-2); cursor: pointer;
}
.pc-ngan-keo__gap:hover { background: var(--nen-2); }
.pc-ngan-keo__gap svg { transition: transform .2s; }
.pc-ngan-keo__gap[aria-expanded="true"] svg { transform: rotate(180deg); }
.pc-ngan-keo__gap[aria-expanded="true"] { color: var(--muc); background: var(--nen-2); }

/* Mục con */
.pc-ngan-keo__con {
	padding: .25rem 0 1rem; border-bottom: 1px solid var(--vach);
	animation: pc-ha-xuong .16s ease-out;
}
.pc-ngan-keo__nhom {
	margin: .85rem 0 .45rem; font-size: .7rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--muc-3);
}
.pc-chip-ds { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pc-chip-ds--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pc-chip-ds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-chip-ds--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-chip-ds a {
	display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .35rem .4rem;
	background: var(--nen); border: 1px solid var(--vach); border-radius: var(--r-nho);
	font-size: .875rem; font-weight: 600; line-height: 1.25; text-align: center;
	color: var(--muc); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s;
}
.pc-chip-ds a:hover, .pc-chip-ds a:active { border-color: var(--lua); color: var(--lua); background: var(--lua-nhat); }
.pc-ngan-keo__tat-ca {
	display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem;
	font-size: .9375rem; font-weight: 600; color: var(--lua); text-decoration: none;
}
.pc-ngan-keo__lk { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.pc-ngan-keo__lk a {
	display: grid; gap: .1rem; padding: .7rem .85rem;
	background: var(--nen); border: 1px solid var(--vach); border-radius: var(--r-nho);
	font-weight: 600; color: var(--muc); text-decoration: none;
}
.pc-ngan-keo__lk a span { font-size: .8125rem; font-weight: 400; color: var(--muc-3); }
.pc-ngan-keo__lk a:hover { border-color: var(--lua); }

.pc-ngan-keo__nap {
	display: flex; gap: .4rem; align-items: flex-start;
	margin: 1.25rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muc-3);
}
.pc-ngan-keo__nap .pc-icon { flex: none; margin-top: .15rem; }

/* Chân: dính đáy, Zalo (chính) rộng gấp đôi Gọi. Chừa vùng vuốt của iPhone. */
.pc-ngan-keo__chan {
	flex: none; display: grid; grid-template-columns: 2fr 1fr; gap: .5rem;
	padding: .75rem var(--le) calc(.75rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--vach); background: var(--giay);
	box-shadow: 0 -6px 18px -12px rgba(20,17,13,.25);
}
.pc-ngan-keo__chan .pc-nut { min-height: 48px; padding-inline: .6rem; justify-content: center; }

/* Khoá cuộn trang khi ngăn kéo mở */
body.pc-khoa-cuon { overflow: hidden; }
/* Thanh CTA cố định nằm TRÊN ngăn kéo (z 60 > 56) và lặp đúng hai nút ở chân → giấu đi. */
body.pc-menu-mo .pc-thanh-cta { display: none !important; }

/* ---------- 6. Trang chủ ---------- */

/* 6.1 Mở đầu — ảnh nền tràn viền */
.pc-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(400px, 56vw, 580px); }
.pc-hero__nen { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--muc); }
/* Khung hero rộng hơn ảnh nên ảnh bị cắt theo CHIỀU DỌC.
   Lấy mép trên để bảng hiệu trên mái nhà máy tụt xuống thấp nhất có thể,
   nằm dưới hẳn khối chữ — không đè lên tiêu đề và đoạn dẫn. */
.pc-hero__anh { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Lớp phủ: tối bên trái cho chữ đọc được, nhạt dần sang phải để vẫn thấy ảnh */
.pc-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(14,11,8,.93) 0%, rgba(14,11,8,.85) 38%, rgba(14,11,8,.46) 68%, rgba(14,11,8,.2) 100%);
}
.pc-hero__trong { padding-block: clamp(2.5rem, 6vw, 4.5rem); color: #fff; }
.pc-hero__tieu-de { max-width: 16ch; color: #fff; text-wrap: balance; text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.pc-hero__dan { max-width: 52ch; color: rgba(255,255,255,.88); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }
.pc-nhan--sang { color: #f0c9a8; }
.pc-cta--hero { margin-top: 1.5rem; }
.pc-cta--hero .pc-nut--goi { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.pc-cta--hero .pc-nut--goi:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* 6.2 Dải số liệu */
/* Dải số liệu dùng màu gỗ của thương hiệu, không dùng đen trung tính. */
.pc-so-lieu { background: linear-gradient(105deg, var(--go-dam), var(--go-sau)); color: #fff; }
/* 🔴 Bo vach ngan giua cac o. Vach doc tren nen go dam khong giup doc
   nhanh hon, chi lam dai so trong nhu mot cai bang. Can giua + cho tho
   la du de mat tach duoc bon con so. */
.pc-so-lieu__trong {
	display: grid; gap: 1.5rem 1rem;
	padding-block: clamp(2rem, 4vw, 2.75rem);
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.pc-so-lieu__o { text-align: center; }
.pc-so-lieu__o .pc-icon { margin: 0 auto .7rem; color: #e8bb94; opacity: .9; }
.pc-so-lieu__o strong {
	display: block; font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.9rem);
	font-weight: 800; letter-spacing: -.035em; color: #fff; line-height: 1.05;
}
.pc-so-lieu__o span {
	display: block; margin: .5rem auto 0; max-width: 20ch;
	font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.7);
}

/* Ô thay ảnh khi mẫu chưa có ảnh thật.
   🔴 Trông phải LẶNG, không viền đứt nét kiểu "đang làm dở" — khách không
   cần biết kho ảnh của mình đến đâu. Chỉ một ô nền ấm với dấu nhà máy mờ. */
.pc-anh-cho {
	display: grid; place-items: center; aspect-ratio: 4/3; padding: 1rem;
	background: var(--nen-2); border: 0; border-radius: var(--r);
	color: var(--vach-dam);
}
.pc-anh-cho .pc-icon { opacity: .75; }
.pc-anh-cho--vuong { aspect-ratio: 1/1; }

/* 6.3 Thẻ ba dòng sản phẩm — có ảnh */
/* 🔴 KHONG dung vien 1px cho the. Vien mong tren nen gan trang tao ra
   hang chuc duong ke manh khap trang — do la thu lam giao dien trong re.
   Thay bang bong do rong: tach duoc khoi nen ma khong ve them net nao.
   Luat chung cho ca site: the = nen trang + bong, khong vien. */
.pc-the-dong {
	display: flex; flex-direction: column; overflow: hidden; position: relative;
	background: var(--giay); border: 0; border-radius: var(--r);
	text-decoration: none; box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
	transition: box-shadow .2s, transform .2s;
}
/* Vạch màu thương hiệu chạy ngang mép trên khi rê chuột */
.pc-the-dong::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--lua), var(--go));
	transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.pc-the-dong:hover::before { transform: scaleX(1); }
.pc-the-dong:hover { box-shadow: 0 2px 6px rgba(20,17,13,.07), 0 26px 54px -24px rgba(20,17,13,.38); transform: translateY(-5px); }
/* 🔴 Ảnh mẫu cửa là ảnh VUÔNG 1024×1024. Ép khung 16/10 là cắt mất đầu và
   chân cánh. Giữ khung vuông thì không mất gì. */
.pc-the-dong__anh { display: block; aspect-ratio: 1; background: var(--nen); overflow: hidden; }
.pc-the-dong__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pc-the-dong:hover .pc-the-dong__anh img { transform: scale(1.04); }
.pc-the-dong__chu { display: flex; flex-direction: column; gap: .45rem; padding: 1.35rem; flex: 1; }
.pc-the-dong__ten { font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; }
.pc-the-dong__mo { font-size: .9375rem; color: var(--muc-2); line-height: 1.6; }
.pc-the-dong__dan { margin-top: auto; padding-top: .35rem; font-size: .9375rem; font-weight: 600; color: var(--lua); }
.pc-the-dong__dan::after { content: " →"; }

/* 6.4 Ô cấp EI */
.pc-o-ei {
	display: flex; flex-direction: column; padding: 1.6rem 1.35rem 1.35rem; position: relative;
	background: var(--giay); border: 0; border-radius: var(--r);
	text-decoration: none; overflow: hidden; box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
	transition: box-shadow .2s, transform .2s;
}
/* Thanh đo ở mép trên dài dần theo cấp — nhìn là thấy thang 30 → 120 phút */
.pc-o-ei::before {
	content: ""; position: absolute; inset: 0 auto auto 0; height: 4px;
	background: linear-gradient(90deg, var(--lua), var(--go));
	width: var(--muc-do, 40%); transition: width .3s ease;
}
.pc-o-ei:hover { box-shadow: 0 2px 6px rgba(20,17,13,.07), 0 26px 54px -24px rgba(20,17,13,.38); transform: translateY(-4px); }
.pc-o-ei:hover::before { width: 100%; }
.pc-o-ei strong { display: block; margin-bottom: .5rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; color: var(--muc); }
.pc-o-ei > span { flex: 1; font-size: .875rem; color: var(--muc-2); }
.pc-o-ei__sap { color: var(--muc-3) !important; font-weight: 500 !important; background: transparent !important; padding-left: 0 !important; }
.pc-o-ei__dem {
	align-self: flex-start; margin-top: .75rem; padding: .12rem .55rem;
	background: var(--nen-2); border-radius: var(--r-chip);
	font-size: .75rem; font-style: normal; font-weight: 600; color: var(--muc-2);
}

/* Bốn kiểu mặt cánh — dải ngang dưới lưới kiểu cánh */
/* Bon o roi tren nen am — khong con khung luoi ke o. */
.pc-mat-canh {
	display: grid; gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pc-mat-canh__o { padding: 1rem 1.15rem; background: var(--nen); border-radius: var(--r-nho); }
.pc-mat-canh__o strong { display: block; font-size: .9375rem; }
.pc-mat-canh__o span { display: block; margin-top: .15rem; font-size: .8125rem; color: var(--muc-3); }

.pc-y h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.pc-y p  { margin: 0; font-size: .9375rem; color: var(--muc-2); }

/* 6.4b Quy trình đặt hàng */
.pc-quy-trinh {
	display: grid; gap: 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	counter-reset: buoc;
}
.pc-buoc {
	position: relative; display: grid; gap: .4rem; align-content: start;
	padding: 1.5rem 1.25rem 1.35rem;
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r);
}
/* Vạch nối giữa các bước, chỉ vẽ trên màn rộng */
.pc-buoc::after {
	content: ""; position: absolute; top: 2.5rem; right: -1.25rem; width: 1.25rem; height: 1px;
	background: rgba(255,255,255,.16);
}
.pc-buoc:last-child::after { display: none; }
.pc-buoc__so {
	font-size: 1.9rem; font-weight: 800; line-height: 1;
	letter-spacing: -.04em; color: transparent;
	-webkit-text-stroke: 1.4px rgba(232,187,148,.65);
}
.pc-buoc strong { font-size: 1rem; line-height: 1.35; }
.pc-buoc__mo { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.6); }

.pc-cta--toi .pc-nut--goi {
	background: transparent; color: #fff; border-color: rgba(255,255,255,.3);
}
.pc-cta--toi .pc-nut--goi:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
/* Nút chính nền đen chìm trên khối tối → đảo màu: nền trắng, chữ đen. */
.pc-cta--toi .pc-nut--chinh { background: var(--giay); color: var(--muc); }
.pc-cta--toi .pc-nut--chinh:hover { background: var(--nen-2); }
.pc-cta--giua { justify-content: center; }

/* Trang chủ — dải logo "Phú Châu Door trên báo chí" dưới khối Kiến thức.
   Khối trượt dùng chung (.pc-truot), 6 logo/slide; chỉ ảnh, không chữ. */
.pc-bao-chi { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 2.75rem); border-top: 1px solid var(--vach); }
.pc-bao-chi .pc-truot { margin-top: 0; }
.pc-truot--bao .pc-truot__tieu-de { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.pc-truot--bao .pc-truot__ray { gap: 1rem; grid-auto-columns: calc((100% - (var(--moi-trang) - 1) * 1rem) / var(--moi-trang)); }
.pc-bao {
	display: block; aspect-ratio: 16 / 9; border-radius: var(--r-nho); overflow: hidden;
	background: var(--nen-2); box-shadow: var(--bong-2); transition: box-shadow .15s, transform .15s;
}
.pc-bao:hover { box-shadow: var(--bong-3); transform: translateY(-3px); }
.pc-bao:focus-visible { outline: 2px solid var(--lua); outline-offset: 2px; }
.pc-bao img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Kiểu chung của .pc-truot hạ còn 2 thẻ (≤1024px) và 1,15 thẻ (≤680px) — quá thưa
   cho logo. Hai lớp nên thắng được !important của kiểu chung. */
@media (max-width: 1024px) { .pc-truot.pc-truot--bao { --moi-trang: 4 !important; } }
@media (max-width: 680px)  { .pc-truot.pc-truot--bao { --moi-trang: 2.3 !important; } }

/* 6.5 Xưởng sản xuất */
.pc-xuong { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.pc-xuong__chu p { max-width: 50ch; color: var(--muc-2); }
.pc-xuong__dia-chi { font-size: .875rem; color: var(--muc-3); }
.pc-xuong__anh { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pc-xuong__anh img {
	width: 100%; aspect-ratio: 3/2; object-fit: cover;
	border-radius: var(--r-nho); box-shadow: var(--bong-2);
	transition: transform .25s, box-shadow .25s;
}
/* Lệch nhẹ hai ảnh bên phải để lưới có chiều sâu, không phẳng như bảng */
.pc-xuong__anh img:nth-child(2),
.pc-xuong__anh img:nth-child(4) { transform: translateY(20px); }
.pc-xuong__anh img:nth-child(1) { border-top-left-radius: var(--r); }
.pc-xuong__anh img:nth-child(2) { border-top-right-radius: var(--r); }
.pc-xuong__anh img:nth-child(3) { border-bottom-left-radius: var(--r); }
.pc-xuong__anh img:nth-child(4) { border-bottom-right-radius: var(--r); }

/* 6.6 Công trình */
.pc-ct {
	position: relative; margin: 0; overflow: hidden; border-radius: var(--r);
	box-shadow: var(--bong-1); transition: box-shadow .2s, transform .2s;
}
.pc-ct:hover { box-shadow: var(--bong-3); transform: translateY(-3px); }
.pc-ct__anh { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--nen-2); }
.pc-ct__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pc-ct:hover .pc-ct__anh img { transform: scale(1.05); }
/* Chữ đè lên ảnh, nền tối dần — gọn hơn là để chú thích rời bên dưới */
.pc-ct__chu {
	position: absolute; inset: auto 0 0 0; padding: 2.75rem 1rem 1rem;
	background: linear-gradient(180deg, transparent, rgba(14,11,8,.45) 38%, rgba(14,11,8,.9));
	color: #fff;
}
.pc-ct__chu strong { display: block; font-size: .9375rem; line-height: 1.35; }
.pc-ct__chu span { display: block; margin-top: .2rem; font-size: .78rem; color: rgba(255,255,255,.68); }

/* 6.7 Hồ sơ kiểm định */
/* Ba ô ngang hàng: hai hồ sơ mẫu + một ô thông tin dùng chung.
   🔴 Lưới bọc ngoài tên .pc-ho-so-luoi. Đừng đặt là .pc-ho-so — xem mục 10l. */
.pc-ho-so-luoi { align-items: stretch; }
.pc-ho-so__o {
	display: flex; flex-direction: column;
	padding: 1.6rem; background: var(--giay); border: 0; border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
}
.pc-ho-so__o .pc-chip { align-self: flex-start; margin-bottom: 1.1rem; }
.pc-ho-so__o dl { margin: 0; font-size: .9rem; }
.pc-ho-so__o dt { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muc-3); }
.pc-ho-so__o dd { margin: .1rem 0 .85rem; font-weight: 600; color: var(--muc); word-break: break-word; }
.pc-ho-so__o dd:last-child { margin-bottom: 0; }
.pc-ho-so__o dd { font-variant-numeric: tabular-nums; }
.pc-ho-so__ghi { display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 400; color: var(--muc-3); }
.pc-ho-so__o--chu { background: var(--nen-2); box-shadow: none; }

/* 6.8 Khối chốt có ảnh nền */
.pc-chot { position: relative; isolation: isolate; margin-top: clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.pc-chot__nen { position: absolute; inset: 0; z-index: -2; background: var(--muc); }
.pc-chot__anh { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.pc-chot::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(95deg, rgba(14,11,8,.92) 0%, rgba(14,11,8,.8) 50%, rgba(14,11,8,.48) 100%);
}
.pc-chot__trong { padding-block: clamp(2.5rem, 6vw, 4.5rem); color: #fff; }
.pc-chot__trong h2 { color: #fff; margin-bottom: .5rem; }
.pc-chot__trong p { max-width: 58ch; color: rgba(255,255,255,.85); }
.pc-chot__trong .pc-nut--goi { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.pc-chot__trong .pc-nut--goi:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- 7. Sản phẩm ---------- */
.pc-sp { padding-block: 1.75rem 0; }
.pc-sp__dau {
	display: grid; gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
}
.pc-sp__anh-chinh { width: 100%; border: 0; border-radius: var(--r); background: var(--nen); box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3); }
.pc-sp__anh-phu { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .6rem; }
.pc-sp__anh-phu img { border: 0; border-radius: var(--r-nho); aspect-ratio: 1; object-fit: cover; background: var(--nen); }
.pc-sp__nut-anh {
	display: block; padding: 0; border: 2px solid transparent; border-radius: calc(var(--r-nho) + 2px);
	background: none; cursor: pointer; opacity: .72; transition: opacity .15s, border-color .15s;
}
.pc-sp__nut-anh img { display: block; width: 100%; }
.pc-sp__nut-anh:hover { opacity: 1; }
.pc-sp__nut-anh[aria-pressed="true"] { opacity: 1; border-color: var(--muc); }
.pc-sp__nut-anh:focus-visible { outline: 2px solid var(--lua); outline-offset: 2px; }

/* Ảnh phụ: MỘT hàng trượt, 5 ảnh mỗi khung (sửa 17/10/2026 — trước là lưới 4 cột,
   7 ảnh thành hai hàng lệch). Khung trượt dùng chung .pc-truot (inc/truot.php),
   mũi tên đè lên hai mép hàng ảnh thay vì nằm trên đầu khối. */
.pc-sp__anh .pc-truot--anh { margin-top: .6rem; position: relative; } /* thắng .pc-truot { margin-top: 2.5–4rem } viết sau */
.pc-truot--anh .pc-sp__anh-phu {
	display: grid; margin-top: 0; gap: .5rem;
	grid-template-columns: none; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--moi-trang) - 1) * .5rem) / var(--moi-trang));
	padding: 2px; scroll-padding-inline: 2px;
}
.pc-truot--anh .pc-truot__nut {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	display: flex; justify-content: space-between; align-items: center; padding-inline: .3rem;
}
.pc-truot--anh .pc-truot__nut[hidden] { display: none; }
.pc-truot--anh .pc-truot__nut button {
	pointer-events: auto; width: 34px; height: 34px;
	background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(20,17,13,.2);
}
.pc-truot--anh .pc-truot__nut button:disabled { opacity: 0; pointer-events: none; }

.pc-sp__nhan { margin-bottom: .6rem; }
.pc-sp__ten { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem); }
.pc-sp__dan { color: var(--muc-2); }
.pc-sp__dan p:last-child { margin-bottom: 0; }

.pc-sp__gia { margin: 1.25rem 0; }
.pc-bao-gia {
	display: inline-block; padding: .38rem .8rem;
	background: var(--lua-nhat); border: 1px solid #f2d9d2; border-radius: var(--r-nho);
	font-size: .9375rem; font-weight: 700; color: var(--lua);
}
.pc-sp__gia-dan { margin: .5rem 0 0; font-size: .875rem; color: var(--muc-3); }

.pc-cta--sp { margin-block: 1.25rem; padding: 1.4rem; background: var(--nen); border: 0; border-radius: var(--r); }

.pc-sp__yen-tam { margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--muc-2); }
.pc-sp__yen-tam li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .45rem; }
.pc-sp__yen-tam .pc-icon { margin-top: .22em; color: var(--lua); }

/* Phần mô tả dài: đóng thành một khối riêng có nền, có đầu khối — để nó
   không trôi lẫn vào phần thông số phía trên. */
.pc-sp__than {
	margin: clamp(2.5rem, 6vw, 4rem) 0 0;
	padding: clamp(1.75rem, 4vw, 3rem) 0;
	border-top: 1px solid var(--vach);
}
.pc-sp__than-dau { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pc-sp__than-dau .pc-nhan-khoi { justify-content: center; }
.pc-sp__than-dau .pc-nhan-khoi::after { display: block; }
.pc-sp__than-tieu-de { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
/* Cột chữ hẹp lại cho dễ đọc, nhưng đầu khối và khối chia sẻ vẫn tràn rộng. */
.pc-sp__than .pc-noi-dung,
.pc-sp__than .pc-chia-se { max-width: var(--vung-hep); margin-inline: auto; }

/* Thẻ mẫu cửa trong khối trượt — ray lưới đã lo bề ngang, thẻ chỉ cần cao đều. */
.pc-truot--sp .pc-the-sp { height: 100%; }
.pc-sp__chot { margin-bottom: 1rem; }

/* Lưới mẫu cửa */
/* Mặc định 3 cột (~370px/thẻ) cho trang chủ, tìm kiếm. Trang danh mục dùng
   .pc-luoi-sp--4 (chốt 15/10/2026: 4 mẫu/hàng, 24 mẫu/trang) — thẻ ~270px,
   chữ và nút đã thu nhỏ theo ở khối bên dưới. */
.pc-luoi-sp {
	display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* Trang danh mục (24 mẫu/trang) và khối mẫu cửa trang chủ (8 mẫu): 4 cột. Trang tìm kiếm vẫn 3 cột.
   Thẻ còn ~270px nên thu chữ và nút cho tên mẫu không ăn ba dòng, hai nút không chen. */
.pc-luoi-sp--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pc-luoi-sp--4 .pc-the-sp__chu { padding: 1rem 1rem 1.1rem; gap: .4rem; }
.pc-luoi-sp--4 .pc-the-sp__ten { font-size: 1rem; }
.pc-luoi-sp--4 .pc-the-sp__cta { gap: .35rem; padding-top: .65rem; }
.pc-luoi-sp--4 .pc-the-sp__cta .pc-nut { padding-inline: .55rem; font-size: .875rem; }
@media (max-width: 1100px) {
	.pc-luoi-sp--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Trang chủ 8 mẫu: ở bề rộng 3 cột thì 8 = 3+3+2, hẫng một ô → chỉ hiện 6. */
@media (min-width: 681px) and (max-width: 1100px) {
	.pc-luoi-sp--trang-chu > li:nth-child(n+7) { display: none !important; }
}
/* WooCommerce chèn ::before/::after để xoá float. Trong lưới grid, hai thứ đó
   trở thành Ô THẬT và đẩy mẫu đầu tiên sang cột 2, chừa một ô trống đầu lưới. */
.pc-luoi-sp::before, .pc-luoi-sp::after { display: none !important; content: none !important; }
.pc-the-sp {
	display: flex !important; flex-direction: column; position: relative;
	margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important;
	background: var(--giay); border: 0; border-radius: var(--r);
	overflow: hidden; box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
	transition: box-shadow .2s, transform .2s;
}
.pc-the-sp:hover { box-shadow: 0 2px 6px rgba(20,17,13,.07), 0 26px 54px -24px rgba(20,17,13,.38); transform: translateY(-5px); }
/* Ảnh sản phẩm gốc là ảnh vuông 1024×1024 — để khung vuông thì không cắt mất cánh cửa. */
.pc-the-sp__anh { display: block; aspect-ratio: 1; background: var(--nen); overflow: hidden; }
.pc-the-sp__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pc-the-sp:hover .pc-the-sp__anh img { transform: scale(1.03); }
.pc-the-sp__trong { display: block; width: 100%; height: 100%; background: var(--nen-2); }
.pc-the-sp__chu { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.35rem; flex: 1; }
/* Thuộc tính của mẫu cửa: GIỮ MỘT HÀNG, tràn thì vuốt ngang.
   Xuống dòng làm chiều cao thẻ so le nhau, lưới gãy hàng. */
.pc-the-sp__nhan {
	display: flex; gap: .3rem; margin: 0;
	overflow-x: auto; overflow-y: hidden;
	scrollbar-width: none; -ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	/* Mép phải mờ dần để thấy là còn chữ phía sau */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.pc-the-sp__nhan::-webkit-scrollbar { display: none; }
.pc-the-sp__nhan .pc-chip { flex: none; margin: 0; white-space: nowrap; }
.pc-the-sp__ten { margin: 0; font-size: 1.08rem; line-height: 1.4; }
.pc-the-sp__ten a { text-decoration: none; }
.pc-the-sp__ten a:hover { color: var(--lua); }
.pc-the-sp__gia { margin: 0; font-size: .875rem; font-weight: 600; color: var(--lua); }
/* Mot hanh dong thoi. Ca the da la lien ket sang trang mau cua roi,
   nen nut "Xem thong so" chi la ban sao cua chinh no. */
.pc-the-sp__cta { display: flex; gap: .45rem; margin-top: auto; padding-top: .8rem; }
.pc-the-sp__cta .pc-nut { flex: 1; justify-content: center; }

/* ---------- 8. Danh mục ---------- */
.pc-dm__dau { padding-block: 1.5rem 2rem; }
.pc-dm__tieu-de { margin-bottom: .5rem; }
.pc-dm__dan { max-width: 64ch; color: var(--muc-2); }

.pc-loc-khung {
	display: grid; gap: .5rem; margin-bottom: 2.25rem;
	padding: 1rem; background: var(--nen); border-radius: var(--r);
}
.pc-loc {
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	padding: .2rem 0;
}
.pc-loc__nhan { margin-right: .35rem; font-size: .875rem; font-weight: 600; color: var(--muc-2); }
/* 🔴 Nút lọc là THẺ LIÊN KẾT <a>, không phải <button> — mỗi bộ lọc là một URL
   thật. Vì vậy phải tự bỏ gạch chân và tự canh giữa chữ. */
.pc-loc__nut {
	display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .85rem;
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: var(--r-chip);
	font: inherit; font-size: .875rem; font-weight: 600; color: var(--muc-2);
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
.pc-loc__nut:hover { border-color: var(--lua); color: var(--lua); }
/* Tổ hợp không còn mẫu nào: vẫn bấm được, nhưng nói trước là trống */
.pc-loc__nut.la-tat { opacity: .45; }
.pc-loc__nut.la-tat:hover { opacity: 1; }
.pc-loc__nut.la-chon { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.pc-loc__nut em {
	display: inline-block; margin-left: .4rem; padding: 0 .35rem;
	background: var(--nen-2); border-radius: var(--r-chip);
	font-size: .7rem; font-style: normal; font-weight: 700; color: var(--muc-3);
}
.pc-loc__nut.la-chon em { background: rgba(255,255,255,.18); color: #fff; }
.pc-loc__dem { margin-left: auto; font-size: .8125rem; color: var(--muc-3); }
.pc-loc__trong {
	max-width: 56ch; margin: 0 auto; padding: clamp(2rem, 6vw, 3.5rem) 0;
	color: var(--muc-2); text-align: center;
}
.pc-loc__trong p { margin: 0 0 1rem; }

/* Đoạn dẫn trên lưới — ngắn, rộng vừa phải, không đẩy lưới xuống quá sâu */
.pc-dm__dan-dau { max-width: 72ch; margin-bottom: 1.75rem; font-size: 1.0625rem; }
.pc-dm__dan-dau p:last-child { margin-bottom: 0; }

.pc-dm__rong {
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--nen); border: 0; border-radius: var(--r);
}
.pc-dm__rong p { max-width: 62ch; color: var(--muc-2); }

.pc-dm__mo-ta { max-width: var(--vung-hep); margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.pc-dm__mo-ta > h2:first-child { margin-top: 0; }

/* ---------- 8b. Khối chữ thu gọn ---------- */
/* 🔴 Trạng thái MỞ là mặc định; lớp .la-thu do JavaScript thêm vào.
   Xem ghi chú đầu inc/thu-gon.php để biết vì sao không làm ngược. */
.pc-thu-gon { position: relative; }
.pc-thu-gon__than { position: relative; }
.pc-thu-gon.la-thu .pc-thu-gon__than {
	max-height: var(--cao-thu, 18rem); overflow: hidden;
}
/* Dải mờ dần ở đáy — báo cho mắt biết là còn chữ phía dưới, không phải hết. */
.pc-thu-gon.la-thu .pc-thu-gon__than::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 7rem; pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--giay) 88%);
}
.pc-khoi--nen .pc-thu-gon.la-thu .pc-thu-gon__than::after,
.pc-nen .pc-thu-gon.la-thu .pc-thu-gon__than::after {
	background: linear-gradient(180deg, transparent, var(--nen) 88%);
}

.pc-thu-gon__nut {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 44px; margin-top: 1rem; padding: .5rem 1.15rem;
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: var(--r-chip);
	font: inherit; font-size: .9375rem; font-weight: 600; color: var(--muc);
	cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pc-thu-gon__nut:hover { border-color: var(--muc-2); background: var(--nen); }
.pc-thu-gon__mui { transition: transform .2s ease; }
.pc-thu-gon.la-thu .pc-thu-gon__mui { transform: rotate(0deg); }
.pc-thu-gon:not(.la-thu) .pc-thu-gon__mui { transform: rotate(180deg); }
/* Nút nằm giữa cho cân với đầu khối căn giữa ở mục 3. */
.pc-dm__mo-ta .pc-thu-gon,
.pc-khoi > .pc-thu-gon { text-align: center; }
.pc-dm__mo-ta .pc-thu-gon__than,
.pc-khoi > .pc-thu-gon .pc-thu-gon__than { text-align: left; }

/* ---------- 9. Bài viết ---------- */
/* Một cột, canh giữa — bỏ mục lục nên không cần lưới hai cột nữa. */
/* 🔴 Trang bài là lưới HAI CỘT: thân bài + cột bên dính theo màn hình.
   Trước đây một cột hẹp căn giữa, nên hai phần ba bề ngang màn hình bỏ trống
   và không có chỗ nào đặt được bài liên quan hay khối mời liên hệ.
   Cột chữ vẫn phải hẹp để đọc được — giới hạn ở .pc-noi-dung bên dưới chứ
   KHÔNG giới hạn ở .pc-bai, nếu không ảnh và mục lục cũng bị bóp theo. */
.pc-bai-khung {
	display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start; padding-block: 1.75rem;
}
.pc-bai { min-width: 0; }
.pc-bai .pc-noi-dung, .pc-bai__dau, .pc-bai > .pc-cta, .pc-bai > .pc-chia-se, .pc-bai > .pc-tac-gia {
	max-width: 74ch;
}
.pc-bai__cm { margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pc-bai__cm a { color: var(--lua); text-decoration: none; }
.pc-bai__tieu-de { margin-bottom: .5rem; }
.pc-bai__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .875rem; color: var(--muc-3); }
.pc-bai__meta > * { position: relative; }
.pc-bai__anh { margin: 1.75rem 0; }
.pc-bai__anh img { width: 100%; height: auto; border-radius: var(--r); }

/* Dòng ký tên dưới tiêu đề — ai viết, viết từ đâu (E-E-A-T) */
.pc-bai__nguoi-viet {
	display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .65rem;
	margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vach);
	font-size: .9375rem; color: var(--muc-2);
}
.pc-bai__dau-ten {
	flex: none; display: grid; place-items: center; width: 34px; height: 34px;
	border-radius: 50%; background: var(--go); color: #fff;
	font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}
.pc-bai__nguoi-viet strong { color: var(--muc); font-weight: 700; }

/* Thanh tiến độ đọc — 3px sát mép trên, chỉ hiện trên trang bài */
.pc-tien-do {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	z-index: 60; background: transparent; pointer-events: none;
}
.pc-tien-do__thanh {
	display: block; width: 0; height: 100%;
	background: var(--lua); transition: width .08s linear;
}

/* 🔴 TRONG THÂN BÀI, CỠ TIÊU ĐỀ TÍNH BẰNG `em`, KHÔNG PHẢI `rem`.
 *
 *    ① Nút đổi cỡ chữ chỉ cần đổi MỘT giá trị ở .pc-noi-dung là cả thân bài
 *       — kể cả tiêu đề — giãn theo đúng tỉ lệ. Dùng `rem` thì tiêu đề đứng
 *       im còn chữ thường to ra, thứ bậc vỡ hết.
 *    ② Cột chữ thân bài rộng khoảng 74 ký tự, hẹp hơn cả trang. Tiêu đề khối
 *       cỡ 36px hợp cho dải ngang toàn trang nhưng quá to ở đây. */
.pc-noi-dung { font-size: calc(1.0625rem * var(--co-chu, 1)); }
.pc-noi-dung h2 { font-size: 1.6em; }
.pc-noi-dung h3 { font-size: 1.28em; }
.pc-noi-dung h4 { font-size: 1.08em; }
.pc-noi-dung h5 { font-size: 1em; }
.pc-noi-dung h6 { font-size: .85em; }
.pc-noi-dung > h2 { margin-top: 2.4rem; padding-top: .5rem; }
.pc-noi-dung > h3 { margin-top: 1.9rem; }
.pc-noi-dung h4 { margin-top: 1.5rem; }

/* ---------- 9a. Nút đổi cỡ chữ ---------- */
/* 🔴 Đổi bằng biến --co-chu đặt trên thẻ <html>, không đặt trên từng khối.
   Ở gốc thì lựa chọn của khách theo sang mọi trang mà không phải dựng lại
   bộ điều khiển ở từng khuôn. Giá trị lưu ở localStorage. */
.pc-co-chu {
	display: flex; align-items: center; gap: .4rem;
	font-size: .8125rem; color: var(--muc-3);
}
.pc-co-chu__nut {
	display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .5rem;
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: var(--r-nho);
	font: inherit; font-weight: 700; color: var(--muc-2); cursor: pointer; line-height: 1;
	transition: background-color .15s, border-color .15s, color .15s;
}
.pc-co-chu__nut:hover { border-color: var(--muc-2); color: var(--muc); }
.pc-co-chu__nut[aria-pressed="true"] { background: var(--muc); border-color: var(--muc); color: var(--giay); }
.pc-co-chu__nut--lon { font-size: 1.05rem; }
/* Trên dòng thông tin bài: đẩy sang mép phải, tách khỏi ngày tháng */
.pc-bai__meta .pc-co-chu { margin-left: auto; }
/* Dưới đầu khối mô tả mẫu cửa: nằm giữa cho khớp đầu khối căn giữa */
.pc-sp__than-dau .pc-co-chu { justify-content: center; margin-top: 1rem; }
@media (max-width: 560px) {
	.pc-bai__meta .pc-co-chu { margin-left: 0; flex-basis: 100%; }
}
.pc-noi-dung ul, .pc-noi-dung ol { padding-left: 1.3rem; }
.pc-noi-dung li { margin-bottom: .45rem; }
.pc-noi-dung img { border-radius: var(--r); margin-inline: auto; }
.pc-noi-dung figure { margin: 1.75rem 0; }
.pc-noi-dung figcaption { margin-top: .55rem; font-size: .875rem; color: var(--muc-3); text-align: center; }
.pc-noi-dung blockquote {
	margin: 1.75rem 0; padding: .35rem 0 .35rem 1.15rem;
	border-left: 3px solid var(--go); color: var(--muc-2); font-style: normal;
}
.pc-noi-dung a { color: var(--lua); text-decoration-color: #e8c4bb; }
/* 🔴 Trả lại màu chữ cho NÚT nằm trong thân bài. Luật `.pc-noi-dung a` ở trên
   có độ ưu tiên cao hơn `.pc-nut--chinh`, nên mọi nút chèn vào thân bài đều
   bị tô màu nhấn — nút nền đen thành chữ đỏ trên nền đen, đọc không ra.
   Dính đúng lỗi này ở khối điều hướng bài lệch cấp. Thêm CTA vào thân bài
   về sau thì nhớ chỗ này. */
.pc-noi-dung a.pc-nut { text-decoration: none; background-image: none; }
.pc-noi-dung a.pc-nut--chinh { color: var(--giay); }
.pc-noi-dung a.pc-nut--zalo { color: #fff; }
.pc-noi-dung a.pc-nut--goi { color: var(--muc); }
.pc-noi-dung a:hover { text-decoration-color: currentColor; }

.pc-bang-cuon { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--vach); border-radius: var(--r); }
.pc-bang-cuon table { margin: 0; border: 0; }
.pc-noi-dung table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pc-noi-dung th, .pc-noi-dung td { padding: .7rem .85rem; border-bottom: 1px solid var(--vach); text-align: left; vertical-align: top; }
.pc-noi-dung thead th { background: var(--nen); font-weight: 700; white-space: nowrap; }
.pc-noi-dung tbody tr:last-child td { border-bottom: 0; }
.pc-noi-dung tbody tr:nth-child(even) { background: #fcfbf9; }

.pc-lien-quan { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pc-lien-quan h2 { margin-bottom: 1.25rem; }

.pc-the { background: var(--giay); border: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3); transition: box-shadow .15s, transform .15s; }
.pc-the:hover { box-shadow: 0 2px 6px rgba(20,17,13,.07), 0 26px 54px -24px rgba(20,17,13,.38); transform: translateY(-4px); }
.pc-the__lien-ket { display: block; height: 100%; text-decoration: none; }
/* 🔴 Giữ tỉ lệ gốc của ảnh đại diện — không ép khung, không cắt.
   Ảnh bài hầu hết 1200×675 nên lưới vẫn đều. */
.pc-the__anh { margin: 0; background: var(--nen); overflow: hidden; }
.pc-the__anh img { width: 100%; height: auto; display: block; }
.pc-the__anh--trong { aspect-ratio: 16/9; background: var(--nen-2); }
.pc-the__chu { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; flex: 1; }
.pc-the__cm {
	margin: 0; font-size: .72rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--go);
}
.pc-the__tieu-de { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.pc-the__tom-tat { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muc-2); }
.pc-the__meta {
	display: flex; flex-wrap: wrap; gap: .3rem .9rem;
	margin: auto 0 0; padding-top: .35rem; font-size: .8125rem; color: var(--muc-3);
}

/* Bài dẫn — chiếm trọn hàng, ảnh bên trái */
.pc-the--dan { grid-column: 1 / -1; }
.pc-the--dan .pc-the__lien-ket {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch;
}
.pc-the--dan .pc-the__anh { height: 100%; }
.pc-the--dan .pc-the__anh img { height: 100%; object-fit: cover; }
.pc-the--dan .pc-the__chu { justify-content: center; padding: clamp(1.25rem, 3vw, 2rem); gap: .55rem; }
.pc-the--dan .pc-the__tieu-de { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
.pc-the--dan .pc-the__tom-tat { font-size: .97rem; }

.pc-luu-tru__dau { padding-block: 1.5rem 2rem; }
.pc-luu-tru__tieu-de { margin-bottom: .5rem; }
.pc-luu-tru__mo-ta { max-width: 68ch; color: var(--muc-2); }
.pc-luu-tru__dem { font-size: .875rem; color: var(--muc-3); }

.navigation.pagination { margin-block: 2.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 .75rem;
	border: 1px solid var(--vach-dam); border-radius: var(--r-nho);
	text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.page-numbers:hover { border-color: var(--muc-2); }
.page-numbers.current { background: var(--muc); border-color: var(--muc); color: var(--giay); }

/* Chia trang của WooCommerce — <nav> > <ul class="page-numbers"> > <li> > <a>.
 *
 * 🔴 Hai cái bẫy ở đây, phải gỡ cả hai:
 *    1. Cái <ul> bọc ngoài TRÙNG TÊN LỚP với từng nút (`page-numbers`), nên
 *       nó cũng ăn dáng nút — cả dải số nằm gọn trong một khung bo 44px.
 *    2. WooCommerce vẫn nạp bảng kiểu riêng của nó (woocommerce-layout ·
 *       smallscreen · general) và vẽ cho khối này một khung xám có đường kẻ
 *       ngăn giữa các ô, kiểu giao diện cũ. Bộ chọn của nó là
 *       `.woocommerce nav.woocommerce-pagination ul` — muốn đè thì bộ chọn
 *       bên này phải DÀI HƠN, viết `.page-numbers` vào cuối là đủ.
 */
.woocommerce-pagination { margin-block: 2.5rem; }
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
	min-width: 0; min-height: 0; padding: 0; margin: 0;
	border: 0; border-radius: 0; list-style: none; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers > li,
.woocommerce-pagination ul.page-numbers > li {
	display: flex; float: none; border: 0; margin: 0; padding: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
.woocommerce-pagination ul.page-numbers li .page-numbers {
	/* WooCommerce đặt `display: block` cho ô số → chữ dạt lên mép trên. Phải nhắc lại flex ở đây. */
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: .9375rem; text-decoration: none;
	min-width: 44px; min-height: 44px; padding: 0 .75rem;
	border: 1px solid var(--vach-dam); border-radius: var(--r-nho);
	background: var(--giay); color: var(--muc); line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: var(--muc); border-color: var(--muc); color: var(--giay);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots,
.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	min-width: 1.5rem; padding: 0; background: none;
	border-color: transparent; color: var(--muc-3);
}

.pc-tim { display: flex; gap: .5rem; max-width: 480px; margin-block: 1.25rem; }
.pc-tim__o {
	flex: 1; min-height: 48px; padding: .6rem .9rem; font: inherit;
	border: 1px solid var(--vach-dam); border-radius: var(--r-nho);
	background: var(--giay); color: var(--muc);
}
.pc-tim__o:focus { border-color: var(--muc-2); }

/* ---------- 9a2. Khối điều hướng bài lệch cấp ---------- */
/* Ba bài nhắm từ khoá "15 / 70 / 150 phút" — ba mức không có trong danh mục.
   Khối này nói thẳng điều đó rồi dẫn sang cấp gần nhất có thật.
   Xem inc/bai-lech-cap.php, nhất là ba câu KHÔNG được viết lại vào bài. */
.pc-lech-cap {
	margin: 0 0 2rem; padding: clamp(1.15rem, 3vw, 1.6rem);
	background: var(--lua-nhat); border-left: 3px solid var(--lua);
	border-radius: var(--r);
}
.pc-lech-cap__nhan {
	display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem;
	font-size: .8rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--lua);
}
.pc-lech-cap__nhan .pc-icon { flex: none; }
.pc-lech-cap p { font-size: .9375rem; line-height: 1.75; color: var(--muc-2); }
.pc-lech-cap__vi-sao { margin: 0 0 .7rem; }
.pc-lech-cap__ket { margin: 0 0 1.15rem; color: var(--muc) !important; }
.pc-lech-cap__cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- 9b. Cột bên của trang bài ---------- */
/* 🔴 sticky chỉ chạy khi KHÔNG có overflow ẩn ở tổ tiên. Lưới .pc-bai-khung
   phải để overflow mặc định — đặt overflow:hidden ở đó là cột bên hết dính
   mà không báo lỗi gì. */
/* 🔴 CỘT BÊN PHẢI VỪA MỘT MÀN HÌNH, KHÔNG ĐƯỢC CAO HƠN.
   Cột dính mà cao hơn khung nhìn thì phần đáy — đúng chỗ đặt hộp CTA —
   không bao giờ lọt vào mắt: cuộn tới đâu nó cũng bị cắt ở mép dưới.
   Dính mà không thấy được thì bằng không dính.

   Cách giải: cả cột là một cột dọc có TRẦN CHIỀU CAO bằng khung nhìn, rồi
   chia phần thừa cho đúng khối được phép co:
     · danh sách bài  → co lại, tự cuộn bên trong  (min-height: 0 + overflow)
     · hộp CTA        → KHÔNG co  (flex: none)
   Nhờ vậy màn hình thấp cỡ nào thì hộp CTA vẫn nguyên vẹn, chỉ danh sách
   bài ngắn đi. Ưu tiên ngược lại là mất chỗ chuyển đổi.

   🔴 min-height: 0 là bắt buộc. Mặc định của flex item là min-height: auto,
      nó từ chối co nhỏ hơn nội dung, nên overflow không bao giờ ăn. */
.pc-cot-ben {
	position: sticky; top: 92px;
	display: flex; flex-direction: column; gap: 1.25rem; min-width: 0;
	max-height: calc(100dvh - 7rem);
}
.pc-cot-ben__khoi {
	padding: 1.2rem 1.15rem; background: var(--nen); border-radius: var(--r);
}
/* Khối danh sách: được phép co và tự cuộn */
.pc-cot-ben > .pc-cot-ben__khoi:not(.pc-cot-ben__cta) {
	display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto;
}
.pc-cot-ben .pc-quan-tam {
	min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin;
}
/* Hộp CTA: không bao giờ co */
.pc-cot-ben__cta { flex: none; }
.pc-cot-ben__tieu-de {
	display: flex; align-items: center; gap: .5rem;
	margin: 0 0 1rem; font-size: .8rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--go);
}

.pc-quan-tam { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; counter-reset: qt; }
/* Tên bài gọn trong 2 dòng — tên dài 3–4 dòng làm cả cột cao vọt lên. */
.pc-quan-tam__ten {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.pc-quan-tam__lien-ket {
	display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
	padding: .5rem .45rem; border-radius: var(--r-nho);
	text-decoration: none; color: inherit;
	transition: background-color .15s;
}
.pc-quan-tam__lien-ket:hover { background: var(--giay); }
.pc-quan-tam__so {
	font-size: 1rem; font-weight: 800; line-height: 1.2; color: transparent;
	-webkit-text-stroke: 1.2px var(--vach-dam); font-variant-numeric: tabular-nums;
}
.pc-quan-tam__lien-ket:hover .pc-quan-tam__so { -webkit-text-stroke-color: var(--go); }
.pc-quan-tam__chu { display: grid; gap: .2rem; min-width: 0; }
.pc-quan-tam__ten { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.pc-quan-tam__lien-ket:hover .pc-quan-tam__ten { color: var(--lua); }
.pc-quan-tam__phut { font-size: .75rem; color: var(--muc-3); }

.pc-cot-ben__cta { background: var(--muc); color: rgba(255,255,255,.76); }
.pc-cot-ben__nhan {
	margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase; color: #e8bb94;
}
.pc-cot-ben__dan { margin: 0 0 .9rem; font-size: .875rem; line-height: 1.6; }
.pc-cot-ben__y { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.pc-cot-ben__y li { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; line-height: 1.5; }
.pc-cot-ben__y .pc-icon { margin-top: .1em; color: #e8bb94; }
.pc-cot-ben__cta .pc-cta { gap: .5rem; }
.pc-cot-ben__cta .pc-nut--goi {
	background: transparent; color: #fff; border-color: rgba(255,255,255,.28);
}
.pc-cot-ben__cta .pc-nut--goi:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }
.pc-cot-ben__cta .pc-nut { width: 100%; justify-content: center; }

/* ---------- 9c. Khối trượt ngang ---------- */
/* Dựng bằng scroll-snap — xem ghi chú đầu inc/truot.php để biết vì sao
   không dùng thư viện carousel. */
.pc-truot { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pc-truot__dau {
	display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
	align-items: center; justify-content: space-between; margin-bottom: 1.5rem;
}
.pc-truot__tieu-de { margin: 0; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); }
.pc-truot__nut { display: flex; gap: .5rem; }
.pc-truot__nut button {
	display: grid; place-items: center; width: 42px; height: 42px;
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: 50%;
	color: var(--muc); cursor: pointer;
	transition: border-color .15s, background-color .15s, opacity .15s;
}
.pc-truot__nut button:hover:not(:disabled) { background: var(--muc); border-color: var(--muc); color: #fff; }
.pc-truot__nut button:disabled { opacity: .3; cursor: default; }
.pc-truot__lui .pc-icon { transform: rotate(180deg); }

.pc-truot__ray {
	display: grid; gap: 1.25rem;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--moi-trang) - 1) * 1.25rem) / var(--moi-trang));
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	/* Chừa chỗ cho bóng đổ của thẻ, không thì bóng bị cắt cụt ở mép khung cuộn. */
	padding: 4px 4px 1.25rem;
	/* 🔴 Phải khai cả scroll-padding bằng đúng phần chừa ngang: thiếu nó, điểm bám
	   tính từ mép trong nên trình duyệt tự đẩy ray vào 4px lúc tải → scrollLeft = 4,
	   mũi tên "lùi" sáng sẵn dù đang ở đầu dải. */
	scroll-padding-inline: 4px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.pc-truot__ray::-webkit-scrollbar { display: none; }
.pc-truot__ray > * { scroll-snap-align: start; min-width: 0; }
.pc-truot__ray:focus-visible { outline: 2px solid var(--lua); outline-offset: 4px; border-radius: var(--r); }

/* ---------- 10. Trang tĩnh & 404 ---------- */
.pc-trang { padding-block: 1.75rem 0; }
.pc-trang--hep, .pc-trang--hep .pc-noi-dung { max-width: var(--vung-hep); margin-inline: auto; }
.pc-trang__tieu-de { margin-bottom: 1rem; }
.pc-trang__anh { margin: 1.5rem 0; }
.pc-trang__anh img { width: 100%; border-radius: var(--r); }
.pc-trang__loi-ra { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-block: .75rem 1.1rem; font-weight: 600; }
.pc-trang__loi-ra a { color: var(--lua); text-decoration: none; }
.pc-trang__loi-ra a:hover { text-decoration: underline; }

.pc-404 { padding-block: 3rem 4rem; max-width: 660px; }
.pc-404__ds { margin: 1.5rem 0; padding-left: 1.15rem; }
.pc-404__ds li { margin-bottom: .45rem; }
.pc-trong { color: var(--muc-2); }

/* ---------- 10a2. Sơ đồ website ---------- */
.pc-so-do { padding-block: 0 clamp(2rem, 5vw, 3rem); }
.pc-so-do__dau { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.pc-so-do__dau .pc-nhan-khoi { justify-content: center; }
.pc-so-do__dau .pc-nhan-khoi::after { display: block; }
.pc-so-do__tieu-de { margin: 0 auto .75rem; max-width: 24ch; }
.pc-so-do__dan { max-width: 62ch; margin: 0 auto; color: var(--muc-2); }
.pc-so-do__dan code {
	padding: .1rem .4rem; background: var(--nen-2); border-radius: 4px;
	font-size: .9em; color: var(--muc);
}

/* Hàng bốn con số tóm tắt */
.pc-so-do__tom-tat {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.25rem;
	margin: 1.75rem 0 0; padding: 0; list-style: none;
	font-size: .9rem; color: var(--muc-3);
}
.pc-so-do__tom-tat strong {
	font-size: 1.35rem; font-weight: 800; color: var(--go); margin-right: .3rem;
	font-variant-numeric: tabular-nums;
}

/* Năm khối nhóm — lưới tự xếp, không ép số cột */
.pc-so-do__luoi {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.pc-so-do__khoi {
	padding: clamp(1.15rem, 2.5vw, 1.5rem);
	background: var(--nen); border-radius: var(--r);
}
.pc-so-do__nhom {
	display: flex; align-items: center; gap: .55rem;
	margin: 0 0 1rem; font-size: .8rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--go);
}
.pc-so-do__nhom--lon {
	margin-bottom: 1.5rem; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
	letter-spacing: -.01em; text-transform: none; color: var(--muc);
}

.pc-so-do__ds { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.pc-so-do__ds li { display: flex; gap: .5rem; align-items: baseline; }
.pc-so-do__ds a {
	flex: 1; min-width: 0; padding: .4rem .5rem; border-radius: var(--r-nho);
	font-size: .9375rem; line-height: 1.5; text-decoration: none; color: var(--muc-2);
	transition: background-color .15s, color .15s;
}
.pc-so-do__ds a:hover { background: var(--giay); color: var(--lua); }
.pc-so-do__dem {
	flex: none; padding: .05rem .45rem; border-radius: var(--r-chip);
	background: var(--nen-2); font-size: .72rem; font-weight: 700; color: var(--muc-3);
	font-variant-numeric: tabular-nums;
}

/* Hai khối dài: toàn bộ mẫu cửa và toàn bộ bài viết */
.pc-so-do__day { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pc-so-do__cap { margin-bottom: 1.75rem; }
.pc-so-do__cap:last-child { margin-bottom: 0; }
.pc-so-do__cap-ten {
	display: flex; align-items: baseline; gap: .6rem;
	margin: 0 0 .6rem; padding-bottom: .5rem;
	border-bottom: 1px solid var(--vach);
	font-size: 1rem;
}
.pc-so-do__cap-ten a { text-decoration: none; }
.pc-so-do__cap-ten a:hover { color: var(--lua); }
/* Danh sách dài thì chia cột — 60 mẫu một cột dọc là không đọc nổi. */
.pc-so-do__ds--cot { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

@media (max-width: 680px) {
	.pc-so-do__tom-tat { gap: .5rem 1.25rem; }
	.pc-so-do__tom-tat strong { font-size: 1.15rem; }
}

/* ---------- 10a3. Trang kết quả tìm kiếm ---------- */
.pc-tim-kq { padding-bottom: clamp(2rem, 5vw, 3rem); }
.pc-tim-kq__dau { padding-block: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.pc-tim-kq__dau .pc-nhan-khoi { justify-content: center; }
.pc-tim-kq__dau .pc-nhan-khoi::after { display: block; }
.pc-tim-kq__tieu-de { margin: 0 auto .6rem; max-width: 26ch; }
.pc-tim-kq__dem {
	display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center;
	margin: 0; color: var(--muc-3); font-size: .9375rem;
}
.pc-tim-kq__bo-loc { color: var(--lua); font-weight: 600; }
.pc-tim-kq__o { max-width: 520px; margin: 1.5rem auto 0; }
.pc-tim-kq__o .pc-tim { margin: 0; }

.pc-tim-kq__nhom { margin-top: clamp(2rem, 4.5vw, 3rem); }
/* Đầu nhóm căn TRÁI — ở đây tiêu đề là nhãn phân loại, không phải tiêu đề
   khối, nên không áp luật căn giữa ở mục 3. */
.pc-tim-kq__dau-nhom {
	flex-direction: row; justify-content: space-between; align-items: center;
	gap: .75rem 1.5rem; margin-bottom: 1.5rem;
	padding-bottom: .75rem; border-bottom: 1px solid var(--vach);
}
.pc-tim-kq__dau-nhom .pc-khoi__tieu-de {
	display: flex; align-items: center; gap: .55rem;
	margin: 0; max-width: none; text-align: left;
	font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
}
.pc-tim-kq__so {
	padding: .1rem .5rem; border-radius: var(--r-chip);
	background: var(--nen-2); font-size: .75rem; font-weight: 700; color: var(--muc-3);
}

.pc-tim-kq__trong { max-width: 980px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; }
.pc-tim-kq__trong-dan { text-align: center; color: var(--muc-2); margin-bottom: 1.75rem; }
.pc-tim-kq__goi-y {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pc-tim-kq__goi-y > div { padding: 1.2rem 1.15rem; background: var(--nen); border-radius: var(--r); }
.pc-tim-kq__goi-y-nhan {
	margin: 0 0 .8rem; font-size: .75rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--go);
}

/* ---------- 10a4. Trang chọn cấp ngăn cháy ---------- */
.pc-chon-cap { padding-bottom: clamp(2rem, 5vw, 3rem); }
.pc-chon-cap__dau { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); text-align: center; }
.pc-chon-cap__dau .pc-nhan-khoi { justify-content: center; }
.pc-chon-cap__dau .pc-nhan-khoi::after { display: block; }
.pc-chon-cap__tieu-de { margin: 0 auto .75rem; max-width: 24ch; }
.pc-chon-cap__dan {
	max-width: 64ch; margin: 0 auto; color: var(--muc-2);
	font-size: 1.05rem; line-height: 1.75;
}
.pc-chon-cap__dan--trai { margin-inline: 0; text-align: left; margin-bottom: 1.5rem; }

/* Khối rào — nền nhấn nhẹ, không đỏ chói: đây là lời nói rõ trách nhiệm,
   không phải cảnh báo nguy hiểm. */
.pc-chon-cap__rao {
	display: flex; gap: 1rem; align-items: flex-start;
	max-width: var(--vung-hep); margin: 0 auto;
	padding: clamp(1.15rem, 3vw, 1.6rem);
	background: var(--lua-nhat); border-left: 3px solid var(--lua); border-radius: var(--r);
}
.pc-chon-cap__rao .pc-icon { flex: none; margin-top: .15rem; color: var(--lua); }
.pc-chon-cap__rao p { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.7; color: var(--muc-2); }
.pc-chon-cap__rao p:last-child { margin-bottom: 0; }
.pc-chon-cap__rao-tieu-de { font-weight: 700; color: var(--muc) !important; }

.pc-chon-cap__khoi { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.pc-chon-cap__h2 { margin-bottom: 1.25rem; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); }
.pc-chon-cap__chu-thich {
	margin-top: 1.1rem; font-size: .875rem; line-height: 1.75; color: var(--muc-3);
}

.pc-bang-cap { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pc-bang-cap th, .pc-bang-cap td {
	padding: .85rem 1rem; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--vach);
}
.pc-bang-cap thead th {
	background: var(--nen); font-size: .75rem; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase; color: var(--muc-3); white-space: nowrap;
}
.pc-bang-cap tbody th { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.pc-bang-cap tbody th a { color: var(--muc); text-decoration: none; }
.pc-bang-cap tbody th a:hover { color: var(--lua); }
.pc-bang-cap tbody tr:last-child th, .pc-bang-cap tbody tr:last-child td { border-bottom: 0; }
.pc-bang-cap__chua { color: var(--muc-3); font-size: .875rem; }

.pc-danh-doi {
	display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pc-danh-doi li {
	display: flex; gap: .8rem; align-items: flex-start;
	padding: 1.1rem 1.15rem; background: var(--nen); border-radius: var(--r);
}
.pc-danh-doi .pc-icon { flex: none; margin-top: .2rem; color: var(--go); }
.pc-danh-doi strong { display: block; font-size: .9375rem; margin-bottom: .2rem; }
.pc-danh-doi span { font-size: .875rem; line-height: 1.6; color: var(--muc-2); }

/* ---------- 10b. Trang công trình ---------- */
.pc-ct-trang { padding-block: 0 1rem; }
/* Trang này xếp nhiều khối liền nhau — giãn mặc định của .pc-khoi quá rộng,
   đọc thành các mảng rời. Thu lại cho liền mạch. */
.pc-ct-trang .pc-khoi { padding-block: clamp(2rem, 4vw, 3rem); }
.pc-ct-trang__dau { padding-block: 1.5rem 0; max-width: 72ch; }
.pc-ct-trang__dan { color: var(--muc-2); font-size: 1.0625rem; }

/* Dải số liệu — nền tối, cùng ngôn ngữ với trang chủ */
/* Cùng màu gỗ và cùng dáng với dải số liệu trang chủ — xem mục 6.2.
   Sửa một chỗ thì sửa cả hai, đừng để hai dải lệch nhau. */
.pc-ct-so {
	display: grid; gap: 1.5rem 1rem; margin: 1.75rem 0 0; padding: clamp(1.75rem, 3.5vw, 2.5rem) 1.25rem;
	list-style: none; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	background: linear-gradient(105deg, var(--go-dam), var(--go-sau));
	border-radius: var(--r);
}
.pc-ct-so li { text-align: center; }
.pc-ct-so strong {
	display: block; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
	font-weight: 800; letter-spacing: -.035em; color: #fff; line-height: 1.05;
}
.pc-ct-so span {
	display: block; margin: .5rem auto 0; max-width: 22ch;
	font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.7);
}

/* Thẻ công trình có ảnh */
.pc-ct-the { margin: 0; display: flex; flex-direction: column; }
.pc-ct-the__anh {
	display: block; aspect-ratio: 4/3; overflow: hidden;
	border-radius: var(--r); background: var(--nen-2); box-shadow: var(--bong-1);
}
.pc-ct-the__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pc-ct-the:hover .pc-ct-the__anh img { transform: scale(1.04); }
.pc-ct-the figcaption { display: grid; gap: .25rem; padding-top: .85rem; }
.pc-ct-the figcaption strong { font-size: 1rem; line-height: 1.35; }
.pc-ct-the__phu { font-size: .8125rem; color: var(--muc-3); }
.pc-ct-the__hm { font-size: .875rem; color: var(--muc-2); }
.pc-chip--lua { background: var(--lua-nhat); border-color: #f2d9d2; color: var(--lua); justify-self: start; }

/* Nhóm khách hàng */
.pc-ct-khach__nhom { margin-bottom: 1.5rem; }
.pc-ct-khach__nhan {
	margin: 0 0 .65rem; font-size: .75rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--muc-3);
}
.pc-ct-khach__nhom ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pc-ct-khach__nhom li {
	padding: .42rem .85rem; background: var(--giay);
	border: 1px solid var(--vach); border-radius: var(--r-chip);
	font-size: .9rem; font-weight: 500; color: var(--muc-2);
}

/* Bảng công trình */
.pc-bang-ct { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pc-bang-ct th, .pc-bang-ct td {
	padding: .8rem .9rem; border-bottom: 1px solid var(--vach);
	text-align: left; vertical-align: top;
}
.pc-bang-ct thead th {
	background: var(--nen); font-size: .75rem; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase; color: var(--muc-3);
	white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.pc-bang-ct tbody th { font-weight: 600; min-width: 250px; }
.pc-bang-ct tbody tr:hover { background: #fcfbf9; }
.pc-bang-ct tbody tr[data-cc] { background: var(--lua-nhat); }
.pc-bang-ct tbody tr[data-cc]:hover { background: #fbe9e4; }
.pc-bang-ct__nam { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muc-2); }
.pc-bang-ct td:last-child { color: var(--muc-2); }

.pc-loc--ct { padding: .5rem .7rem; border: 1px solid var(--vach); border-radius: var(--r); background: var(--nen); }

.pc-ct-trang__them { max-width: var(--vung-hep); margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- 10c. Trang Giới thiệu ---------- */
.pc-gt__dau { padding-block: 1.5rem 0; max-width: 70ch; }
.pc-gt__dan { font-size: 1.0625rem; line-height: 1.75; color: var(--muc-2); }
.pc-gt__dan strong { color: var(--muc); }
.pc-gt__slogan {
	margin: 1rem 0 0; padding-left: .9rem; border-left: 3px solid var(--go);
	font-size: 1rem; font-style: italic; color: var(--go);
}

/* Câu chuyện: chữ bên trái, bốn ảnh xưởng bên phải */
.pc-gt__chuyen {
	display: grid; gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start;
}
.pc-gt__chu > p { color: var(--muc-2); line-height: 1.8; }
.pc-gt__ds { margin: .9rem 0 0; padding-left: 0; list-style: none; display: grid; gap: .5rem; }
.pc-gt__ds li { position: relative; padding-left: 1.5rem; color: var(--muc-2); line-height: 1.65; }
.pc-gt__ds li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--go);
}
.pc-gt__anh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pc-gt__anh figure {
	margin: 0; border-radius: var(--r); overflow: hidden;
	background: var(--nen-2); box-shadow: var(--bong-1);
}
.pc-gt__anh img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* Thẻ năng lực */
/* Sáu thẻ năng lực: ba cột cho dễ đọc, không để auto-fit xé thành năm cột */
.pc-gt__nl { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.pc-the-nl {
	padding: clamp(1.25rem, 2.5vw, 1.65rem); background: var(--giay);
	border: 0; border-radius: var(--r);
	box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
}
.pc-the-nl h3 { margin: 0 0 .5rem; font-size: 1.0625rem; line-height: 1.35; }
.pc-the-nl p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--muc-2); }

/* Chặng đường — mốc năm nằm ngang, mỗi mốc một chấm trên vạch */
.pc-moc {
	display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pc-moc li { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--vach); }
.pc-moc li::before {
	content: ""; position: absolute; top: -7px; left: 0;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--go); box-shadow: 0 0 0 4px var(--nen);
}
.pc-moc__nam {
	margin: 0 0 .4rem; font-size: 1.5rem; font-weight: 800;
	letter-spacing: -.02em; color: var(--muc); font-variant-numeric: tabular-nums;
}
.pc-moc__chu { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--muc-2); }

/* Tầm nhìn · Giá trị cốt lõi */
.pc-gt__dinh-huong {
	display: grid; gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start;
}
.pc-gt__cot > p { color: var(--muc-2); line-height: 1.8; }
.pc-gt__cot h3 { margin: 1.5rem 0 .5rem; font-size: 1.0625rem; }
.pc-gia-tri { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pc-gia-tri li {
	display: flex; gap: .9rem; align-items: flex-start;
	padding: 1rem 1.15rem; background: var(--nen);
	border: 0; border-radius: var(--r);
}
.pc-gia-tri span {
	flex: none; padding-top: .15rem; font-size: .8125rem; font-weight: 800;
	color: var(--go); font-variant-numeric: tabular-nums;
}
.pc-gia-tri p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--muc-2); }
/* Giá trị cốt lõi: tiêu đề ngắn đậm + một câu giải thích (viết lại 16/10/2026) */
.pc-gia-tri li { padding: 1.1rem 1.25rem; transition: box-shadow .15s, transform .15s; }
.pc-gia-tri li:hover { box-shadow: var(--bong-2); transform: translateY(-2px); }
.pc-gia-tri span { padding-top: .2rem; font-size: .875rem; color: var(--lua); }
.pc-gia-tri strong { display: block; margin-bottom: .2rem; font-size: 1rem; line-height: 1.4; color: var(--muc); }
/* Mục tiêu: chữ đầu đậm, phần sau nhạt */
.pc-gt__ds li strong { color: var(--muc); font-weight: 700; }

.pc-gt__chot { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- 10d. Trang Liên hệ ---------- */
.pc-lh__dau { padding-block: 1.5rem 0; max-width: 68ch; }
.pc-lh__dan { font-size: 1.0625rem; line-height: 1.75; color: var(--muc-2); }

/* Ba thẻ cách liên hệ */
.pc-lh__cach { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.pc-cach {
	display: grid; gap: .2rem; padding: 1.35rem;
	background: var(--giay); border: 0; border-radius: var(--r);
	text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pc-cach:hover { border-color: var(--vach-dam); box-shadow: var(--bong-2); transform: translateY(-2px); }
.pc-cach .pc-icon { color: var(--go); margin-bottom: .45rem; }
.pc-cach__nhan {
	font-size: .72rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muc-3);
}
.pc-cach strong { font-size: 1.125rem; line-height: 1.3; }
.pc-cach__phu { font-size: .875rem; color: var(--muc-2); }
.pc-cach--zalo { border-color: #bcd9ff; background: linear-gradient(180deg, #f3f8ff, var(--giay) 60%); }
.pc-cach--zalo .pc-icon { color: #0068ff; }

/* Biểu mẫu + cột thông tin */
.pc-lh__than {
	display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: start; margin-top: clamp(2rem, 5vw, 3rem);
}
.pc-lh__form, .pc-lh__tin {
	padding: clamp(1.25rem, 3vw, 1.9rem);
	background: var(--giay); border: 0; border-radius: var(--r); box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
}
.pc-lh__tin { background: var(--nen); }
.pc-lh__form h2, .pc-lh__tin h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.pc-lh__phu { margin: 0 0 1.1rem; font-size: .875rem; line-height: 1.65; color: var(--muc-3); }
/* Đoạn phụ ngay dưới tiêu đề khối thì căn giữa theo đầu khối (xem mục 3). */
.pc-khoi > .pc-lh__phu { max-width: 62ch; margin-inline: auto; text-align: center; font-size: 1rem; }

.pc-lh__ds { display: grid; gap: 1rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.pc-lh__ds li { display: flex; gap: .8rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; }
.pc-lh__ds .pc-icon { flex: none; margin-top: .15rem; color: var(--go); }
.pc-lh__nhan {
	display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muc-3);
}
.pc-lh__ds .pc-lh__phu { margin: 0; font-size: .8125rem; }
.pc-lh__ds a { color: var(--muc); text-decoration-color: var(--vach-dam); }

.pc-lh__mxh {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--vach);
}
.pc-lh__mxh a {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .45rem .85rem; background: var(--giay);
	border: 1px solid var(--vach); border-radius: var(--r-chip);
	font-size: .875rem; color: var(--muc-2); text-decoration: none;
}
.pc-lh__mxh a:hover { border-color: var(--vach-dam); color: var(--muc); }

/* Bản đồ */
.pc-lh__khung {
	margin-top: 1.5rem; border: 0;
	border-radius: var(--r); overflow: hidden; line-height: 0;
	box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
}
/* 🔴 PHẢI đặt chiều cao ở đây. Luật chung `img, svg, video, iframe { height: auto }`
   ở mục 2 đè mất thuộc tính height="460" trên thẻ iframe, nên bản đồ co lại
   còn một dải mỏng. Bẫy này dính với MỌI iframe nhúng về sau — video, biểu mẫu
   ngoài, bản đồ — nhớ đặt chiều cao bằng CSS, đừng tin thuộc tính HTML. */
.pc-lh__khung iframe {
	display: block; width: 100%;
	height: clamp(320px, 46vw, 560px);
}

/* ---------- 10e. Biểu mẫu Contact Form 7 ---------- */
/* CF7 không nạp CSS riêng của nó — toàn bộ dáng biểu mẫu do khối này lo. */
.pc-form__hang { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pc-truong { display: block; margin-bottom: 1rem; }
.pc-truong__nhan { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: var(--muc); }
.pc-truong__nhan abbr { color: var(--lua); text-decoration: none; }
.pc-truong__nhan em { font-weight: 400; font-style: normal; color: var(--muc-3); }
.pc-truong__goi-y { display: block; margin-bottom: .45rem; font-size: .8125rem; line-height: 1.55; color: var(--muc-3); }
.pc-nhap {
	width: 100%; padding: .7rem .85rem; font: inherit; font-size: .9375rem; color: var(--muc);
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
}
.pc-nhap::placeholder { color: #a8a096; }
.pc-nhap:focus { outline: 0; border-color: var(--go); box-shadow: 0 0 0 3px rgba(125, 84, 40, .13); }
textarea.pc-nhap { min-height: 120px; resize: vertical; }
.pc-form__gui { margin-top: 1.25rem; }
.pc-form__chan { margin: .9rem 0 0; font-size: .875rem; color: var(--muc-3); }

/* Hai khối rỗng CF7 luôn in ra: ô chứa trường ẩn và ô báo kết quả.
   Không tắt thì chúng hiện thành hai khung viền trống trên trang. */
.wpcf7 fieldset.hidden-fields-container { margin: 0; padding: 0; border: 0; }
.wpcf7 form .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { display: block; }
.wpcf7 input[type="submit"] { cursor: pointer; }
.wpcf7-spinner { margin-left: .6rem; vertical-align: middle; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	margin: 1rem 0 0; padding: .75rem .9rem; border-radius: var(--r);
	border: 1px solid var(--vach-dam); font-size: .9375rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #9fc9a4; background: #f1f8f2; color: #255c2c; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #e2b2a8; background: var(--lua-nhat); color: var(--lua); }
.wpcf7-not-valid-tip { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--lua); }
.wpcf7-not-valid { border-color: #d89d90; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 10f. Hộp báo giá bật lên ---------- */
/* Dùng chung cho mọi thẻ mẫu cửa: một hộp ở chân trang, JS điền tên mẫu vào. */
.pc-man-che--hop { z-index: 70; }

.pc-hop {
	position: fixed; z-index: 71; inset: auto 0 0 0;
	display: flex; justify-content: center;
	max-height: 92dvh; pointer-events: none;
}
@media (min-width: 681px) {
	.pc-hop { inset: 0; align-items: center; padding: 2rem 1rem; max-height: none; }
}
.pc-hop__trong {
	position: relative; pointer-events: auto;
	width: 100%; max-width: 580px; max-height: 92dvh; overflow-y: auto;
	padding: clamp(1.35rem, 4vw, 2.1rem);
	background: var(--giay); border: 1px solid var(--vach);
	border-radius: var(--r) var(--r) 0 0;
	box-shadow: var(--bong-3);
	animation: pc-hop-len .22s cubic-bezier(.2, .8, .3, 1);
}
@media (min-width: 681px) {
	.pc-hop__trong { border-radius: var(--r); animation-name: pc-hop-hien; }
}
@keyframes pc-hop-len { from { transform: translateY(18px); opacity: 0; } }
@keyframes pc-hop-hien { from { transform: scale(.97); opacity: 0; } }

.pc-hop__dong {
	position: absolute; top: .8rem; right: .8rem;
	display: grid; place-items: center; width: 38px; height: 38px;
	background: var(--nen); border: 1px solid var(--vach);
	border-radius: 50%; color: var(--muc-2); cursor: pointer;
	transition: background-color .15s, color .15s;
}
.pc-hop__dong:hover { background: var(--nen-2); color: var(--muc); }

.pc-hop__tieu-de { margin: 0 0 .45rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); padding-right: 2.5rem; }
.pc-hop__dan { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.65; color: var(--muc-2); }

.pc-hop__mau {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
	margin: 0 0 1.1rem; padding: .7rem .9rem;
	background: var(--nen); border: 0;
	border-left: 3px solid var(--go); border-radius: var(--r-nho);
	font-size: .9375rem;
}
.pc-hop__mau-nhan {
	font-size: .72rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muc-3);
}
.pc-hop__mau a { color: var(--muc); font-weight: 600; text-decoration-color: var(--vach-dam); }

/* Hàng nút trong hộp: [Gửi yêu cầu báo giá] hoặc [Nhắn Zalo] — cùng cao, ngang hàng.
   Nút Zalo do inc/bieu-mau.php chèn vào .pc-form__gui. */
.pc-hop .pc-form__gui {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem;
	margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--vach);
}
.pc-hop .pc-form__gui .pc-nut { min-height: 48px; padding-inline: 1.3rem; }
.pc-form__hoac { font-size: .8125rem; color: var(--muc-3); }
.pc-hop .wpcf7-spinner { order: 9; margin: 0; }
/* Gọn hơn: khoảng cách trường, ô ghi chú thấp lại */
.pc-hop .pc-truong { margin-bottom: .85rem; }
.pc-hop .pc-form__hang { gap: .85rem; }
.pc-hop textarea.pc-nhap { min-height: 88px; }
.pc-hop .pc-truong__goi-y { margin-bottom: .35rem; }
@media (max-width: 680px) {
	/* Điện thoại: hộp trượt từ đáy lên, 2 trường cùng hàng, hai nút chia đôi bề ngang. */
	.pc-hop__trong { padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
	.pc-hop .pc-nhan-khoi { display: none; }
	.pc-hop__tieu-de { font-size: 1.2rem; }
	.pc-hop__dan { font-size: .8125rem; line-height: 1.55; margin-bottom: .85rem; }
	.pc-hop .pc-form__hang { grid-template-columns: 1fr 1fr; gap: .6rem; }
	.pc-hop .pc-truong { margin-bottom: .7rem; }
	.pc-hop .pc-truong__nhan { font-size: .8125rem; }
	.pc-hop .pc-truong__nhan em { display: block; font-size: .75rem; }
	.pc-hop .pc-truong__goi-y { display: none; }
	.pc-hop .pc-nhap { padding: .6rem .7rem; font-size: 16px; }   /* 16px: iPhone không tự phóng to khi gõ */
	.pc-hop textarea.pc-nhap { min-height: 70px; }
	.pc-hop .pc-form__gui { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; padding-top: .9rem; margin-top: .9rem; }
	.pc-hop .pc-form__gui .pc-nut { width: 100%; padding-inline: .5rem; font-size: .9375rem; justify-content: center; }
	.pc-hop .wpcf7-spinner { grid-column: 1 / -1; justify-self: center; }
}

/* Ô tên mẫu chỉ để gửi kèm trong thư — tên mẫu đã hiện ở dải .pc-hop__mau
   ngay phía trên, in hai lần là thừa. Ẩn đi nhưng CF7 vẫn gửi giá trị. */
.pc-truong--khoa { display: none; }

/* ---------- 10g. Mục lục nội dung ---------- */
/* Dựng bằng <details> của HTML: không cần JavaScript, không nhảy bố cục. */
.pc-muc-luc {
	margin: 1.75rem 0; padding: 0;
	background: var(--nen); border: 0;
	border-left: 3px solid var(--go); border-radius: var(--r);
}
.pc-muc-luc > summary {
	display: flex; align-items: center; gap: .6rem;
	padding: .85rem 1.1rem; cursor: pointer; list-style: none;
	font-size: .875rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--muc-2);
}
.pc-muc-luc > summary::-webkit-details-marker { display: none; }
.pc-muc-luc > summary::after {
	content: ""; flex: none; width: 9px; height: 9px; margin-left: auto;
	border-right: 2px solid var(--muc-3); border-bottom: 2px solid var(--muc-3);
	transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.pc-muc-luc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.pc-muc-luc > summary:hover { color: var(--muc); }
.pc-muc-luc__so {
	padding: .1rem .5rem; background: var(--nen-2); border-radius: var(--r-chip);
	font-size: .7rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muc-3);
}
.pc-muc-luc__ds {
	margin: 0; padding: 0 1.1rem 1rem; list-style: none;
	counter-reset: pc-ml;
}
.pc-muc-luc__muc { margin: 0; }
.pc-muc-luc__muc a {
	display: block; padding: .32rem 0; font-size: .9375rem; line-height: 1.5;
	color: var(--muc-2); text-decoration: none;
	border-bottom: 1px solid transparent;
}
.pc-muc-luc__muc a:hover { color: var(--lua); }
.pc-muc-luc__muc--h2 > a { font-weight: 600; color: var(--muc); }
.pc-muc-luc__muc--h3 > a { padding-left: 1.1rem; font-size: .9rem; }
.pc-muc-luc__muc--h3 > a::before { content: "– "; color: var(--muc-3); }

/* ---------- 10h. Nút chia sẻ ---------- */
.pc-chia-se {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding-top: 1.25rem; border-top: 1px solid var(--vach);
}
.pc-chia-se__nhan { font-size: .875rem; font-weight: 600; color: var(--muc-2); }
.pc-chia-se__ds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pc-chia-se__nut {
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 38px; padding: .4rem .8rem;
	background: var(--giay); border: 1px solid var(--vach-dam); border-radius: var(--r-chip);
	font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muc-2);
	text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.pc-chia-se__nut:hover { border-color: var(--muc-2); color: var(--muc); }
/* Màu thương hiệu chỉ hiện lúc rê chuột — hàng nút để yên thì đỡ rối mắt */
.pc-chia-se__nut--facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
.pc-chia-se__nut--pinterest:hover { background: #bd081c; border-color: #bd081c; color: #fff; }
.pc-chia-se__nut--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.pc-chia-se__nut--x:hover         { background: #000;    border-color: #000;    color: #fff; }
.pc-chia-se__nut--chep.la-xong    { background: #f1f8f2; border-color: #9fc9a4; color: #255c2c; }

/* ---------- 10i. Khối tác giả ---------- */
.pc-tac-gia {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: clamp(1.4rem, 3vw, 1.9rem);
	background: var(--nen); border: 0; border-radius: var(--r);
}
.pc-tac-gia__nhan {
	margin: 0 0 .9rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--muc-3);
}
.pc-tac-gia__than { display: flex; gap: clamp(.9rem, 3vw, 1.4rem); align-items: flex-start; }
.pc-tac-gia__anh {
	flex: none; width: 84px; height: 84px; margin: 0;
	border-radius: 50%; overflow: hidden; background: var(--nen-2);
	box-shadow: 0 0 0 3px var(--giay), 0 0 0 4px var(--vach);
}
.pc-tac-gia__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-tac-gia__ten { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.pc-tac-gia__ten a { color: var(--muc); text-decoration: none; }
.pc-tac-gia__ten a:hover { color: var(--lua); }
.pc-tac-gia__vai { margin: .15rem 0 .6rem; font-size: .8125rem; color: var(--muc-3); }
.pc-tac-gia__bio { margin: 0; font-size: .9375rem; line-height: 1.75; color: var(--muc-2); }
.pc-tac-gia__lk { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .9rem 0 0; font-size: .9375rem; }
.pc-tac-gia__lk a { color: var(--lua); text-decoration-color: #e8c4bb; }

/* Dòng tác giả dưới tiêu đề bài */
.pc-bai__avatar {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	overflow: hidden; background: var(--nen-2);
}
.pc-bai__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-bai__nguoi-viet a { color: inherit; text-decoration-color: var(--vach-dam); }
.pc-bai__nguoi-viet a:hover { color: var(--lua); }

/* ---------- 10j. Cụm nút liên hệ nổi ---------- */
/* Góc phải dưới, chỉ màn hình rộng. Trên điện thoại đã có thanh .pc-thanh-cta.
 *
 * 🔴 BA NÚT BIỂU TƯỢNG TRÒN, luôn hiện. Rê chuột vào thì nút giãn ra cho thấy
 *    chữ. Không trạng thái gập, không JavaScript — xem ghi chú ở inc/lien-he.php.
 *
 * 🔴 Giãn bằng max-width chứ KHÔNG bằng width:auto. `width: auto` không có
 *    giá trị tính được nên trình duyệt không nội suy được, nút sẽ bật ra
 *    đột ngột thay vì trượt. max-width có số ở cả hai đầu nên chuyển mượt.
 *
 * 🔴 Chữ bị cắt bằng overflow, KHÔNG bằng display:none hay visibility:hidden —
 *    hai thứ đó lấy chữ ra khỏi cây trợ năng, nút thành ra không có tên.
 */
.pc-cum {
	position: fixed; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 58; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.pc-cum__ds { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }

.pc-cum__nut {
	display: flex; align-items: center; justify-content: flex-start;
	height: 54px; max-width: 54px; min-width: 54px;
	padding: 0; overflow: hidden;
	border: 0; border-radius: 999px;
	font: inherit; font-size: .9375rem; font-weight: 600; text-align: left;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	box-shadow: var(--bong-3);
	transition: max-width .3s cubic-bezier(.2,.8,.3,1), background-color .15s;
}
/* 🔴 KHÔNG đặt width: 54px lên chính thẻ <svg>. Thẻ svg có width/height thật,
   đặt 54px là PHÓNG TO biểu tượng lên 54px chứ không phải đặt nó vào một ô
   54px — cộng thêm luật chung `svg { height: auto }` ở mục 2 thì nó giãn cả
   chiều cao, tràn khỏi nút tròn.
   Muốn có ô 54px thì giữ nguyên cỡ biểu tượng rồi chừa lề hai bên:
   20px biểu tượng + 17px × 2 = 54px. */
.pc-cum__nut > .pc-icon {
	flex: none; width: 24px; height: 24px; margin-inline: 15px;
}
.pc-cum__nut > span {
	padding-right: 1.4rem; opacity: 0;
	transition: opacity .2s ease .06s;
}
/* 🔴 Dùng :focus chứ không chỉ :focus-visible. Người đi bằng bàn phím phải
   thấy được nhãn của nút đang chọn; :focus-visible không bắt mọi trường hợp
   trình duyệt trao tiêu điểm bằng mã. Nở ra khi bấm chuột cũng không hại gì
   vì lúc đó con trỏ đã nằm trên nút rồi. */
.pc-cum__nut:hover, .pc-cum__nut:focus { max-width: 20rem; }
.pc-cum__nut:hover > span, .pc-cum__nut:focus > span { opacity: 1; }

/* 🔴 Màu nút Báo giá KHÔNG dùng var(--muc). Cụm trôi theo màn hình, cuộn tới
   chân trang là nó nằm trên nền var(--muc) — nút đen trên nền đen thì tàng
   hình. Màu nhấn --lua tách bạch với cả nền sáng lẫn nền tối. */
.pc-cum__nut--bao-gia { background: var(--lua); color: #fff; }
.pc-cum__nut--bao-gia:hover { background: var(--lua-dam); }
.pc-cum__nut--zalo { background: var(--zalo); color: #fff; }
.pc-cum__nut--zalo:hover { background: var(--zalo-dam); }
.pc-cum__nut--goi {
	background: var(--giay); color: var(--muc); font-variant-numeric: tabular-nums;
	box-shadow: var(--bong-3), inset 0 0 0 1px var(--vach-dam);
}
.pc-cum__nut--goi:hover { background: var(--nen); }
.pc-cum__nut--goi > .pc-icon { color: var(--go); }

/* Vòng sóng nhẹ quanh nút Zalo, chạy một lần mỗi 6 giây — đủ để mắt bắt
   được, không nhấp nháy. Tắt khi đang rê chuột để khỏi rối. */
.pc-cum__nut--zalo { position: relative; }
.pc-cum__nut--zalo::after {
	content: ""; position: absolute; left: 0; top: 0; width: 54px; height: 54px;
	border-radius: 50%; border: 2px solid var(--zalo); pointer-events: none;
	animation: pc-cum-song 6s ease-out infinite;
}
.pc-cum__nut--zalo:hover::after { display: none; }
@keyframes pc-cum-song {
	0%, 70%, 100% { opacity: 0; transform: scale(1); }
	72% { opacity: .55; transform: scale(1); }
	92% { opacity: 0; transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) { .pc-cum__nut--zalo::after { display: none; } }

/* Số điện thoại trong ghi chú CTA */
.pc-cta__goi { font-weight: 700; color: var(--muc); text-decoration-color: var(--vach-dam); white-space: nowrap; }

/* Nút Zalo bản viền — dùng khi Zalo là nút PHỤ, đứng cạnh nút Báo giá */
.pc-nut--vien { background: var(--giay); color: var(--zalo); border-color: #bcd9ff; box-shadow: none; }
.pc-nut--vien:hover { background: #f3f8ff; border-color: var(--zalo); }

/* ---------- 10k. Trang chính sách và điều khoản ---------- */
/* 🔴 Cỡ tiêu đề nhỏ hơn trang bài: văn bản pháp lý đọc bằng mắt quét theo mục,
   để cỡ như bài báo thì mỗi mục chiếm nửa màn hình, mất mạch. */
.pc-phap-ly__dau { padding-block: 1.5rem 0; }
.pc-phap-ly .pc-trang__tieu-de { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); margin-bottom: .5rem; }
.pc-phap-ly__ngay { margin: 0; font-size: .875rem; color: var(--muc-3); }

.pc-phap-ly .pc-noi-dung { font-size: 1rem; }
.pc-phap-ly .pc-noi-dung > h2 {
	margin-top: 2.1rem; padding-top: 1.1rem;
	border-top: 1px solid var(--vach);
	font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
}
.pc-phap-ly .pc-noi-dung > h2:first-child { margin-top: 1.5rem; }
.pc-phap-ly .pc-noi-dung > h3 { margin-top: 1.5rem; font-size: 1rem; }
.pc-phap-ly .pc-noi-dung ol, .pc-phap-ly .pc-noi-dung ul { padding-left: 1.2rem; }
.pc-phap-ly .pc-noi-dung li { margin-bottom: .35rem; }

/* Khối hỏi thêm cuối văn bản */
.pc-phap-ly__hoi {
	margin-top: clamp(2rem, 5vw, 2.75rem); padding: clamp(1.1rem, 3vw, 1.6rem);
	background: var(--nen); border: 0;
	border-left: 3px solid var(--go); border-radius: var(--r);
}
.pc-phap-ly__hoi-tieu-de { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 700; }
.pc-phap-ly__hoi p { margin: 0 0 .9rem; font-size: .9375rem; line-height: 1.7; color: var(--muc-2); }
.pc-phap-ly__hoi .pc-cta { margin: 0; }

/* Hàng chuyển sang chính sách khác */
.pc-phap-ly__khac { max-width: var(--vung-hep); margin: clamp(2rem, 5vw, 3rem) auto 0; }
.pc-phap-ly__khac ul {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin: .6rem 0 0; padding: 0; list-style: none;
}
.pc-phap-ly__khac a {
	display: inline-block; padding: .45rem .9rem;
	background: var(--giay); border: 1px solid var(--vach); border-radius: var(--r-chip);
	font-size: .875rem; color: var(--muc-2); text-decoration: none;
}
.pc-phap-ly__khac a:hover { border-color: var(--vach-dam); color: var(--muc); }

/* Mục lục trong trang pháp lý gập sẵn — văn bản dài, mở sẵn là đẩy nội dung xuống */
.pc-phap-ly .pc-muc-luc { margin-top: 1.5rem; }

/* ---------- 10l. Thông số nhanh của mẫu cửa ---------- */
/* 🔴 Khối hồ sơ ở trang mẫu cửa tên là .pc-chung-nhan, KHÔNG phải .pc-ho-so.
   Tên cũ trùng với khối hồ sơ ở trang chủ (mục 6.7) nên trang chủ ăn nhầm
   max-width 760px và viền trái của khối này — lưới ba cột bị bóp lại còn
   hai cột lệch. Trùng tên lớp giữa hai khối khác hẳn nhau là bẫy im lặng:
   không báo lỗi, chỉ hỏng ở chỗ mình không nhìn. */
.pc-thong-so, .pc-chung-nhan {
	max-width: var(--vung-hep); margin: clamp(2rem, 5vw, 3rem) auto 0;
}
.pc-thong-so__tieu-de, .pc-chung-nhan__tieu-de { margin: 0 0 1rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }

/* Nền trắng cho cả lưới, vạch kẻ vẽ bằng viền từng ô — dùng khe 1px thì ô
   cuối hàng thiếu sẽ hở ra một mảng màu vạch. */
/* Bang thong so GIU duoc duong ke — o day duong ke co nghia, no tach
   tung cap thong so. Nhung khong dong khung quanh ca bang nua. */
.pc-thong-so__ds {
	display: grid; gap: 0; margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	background: var(--nen); border: 0;
	border-radius: var(--r); overflow: hidden;
}
.pc-thong-so__o {
	padding: 1rem 1.15rem; background: var(--nen);
	border-top: 1px solid var(--vach); border-left: 1px solid var(--vach);
}
.pc-thong-so__o dt {
	margin: 0 0 .2rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--muc-3);
}
.pc-thong-so__o dd { margin: 0; font-size: .9375rem; line-height: 1.5; font-weight: 600; color: var(--muc); }
.pc-thong-so__ghi-chu { margin: .9rem 0 0; font-size: .875rem; line-height: 1.7; color: var(--muc-3); }

/* ---------- 10m. Hồ sơ kiểm định trang mẫu cửa (chỉ dòng PC60) ---------- */
.pc-chung-nhan {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--nen); border: 0;
	border-left: 3px solid var(--khien, var(--go)); border-radius: var(--r);
}
.pc-chung-nhan__ds { display: grid; gap: .65rem 1.5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pc-chung-nhan__ds > div { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.pc-chung-nhan__ds dt {
	flex: none; min-width: 9.5rem; font-size: .8125rem; color: var(--muc-3);
}
.pc-chung-nhan__ds dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--muc); font-variant-numeric: tabular-nums; }
.pc-chung-nhan__ghi-chu {
	margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vach);
	font-size: .875rem; line-height: 1.75; color: var(--muc-2);
}

/* ---------- 10n. Trang tác giả ---------- */
/* Khối hồ sơ: ảnh một bên, chữ một bên. Căn TRÁI — đây là hồ sơ một con
   người, không phải một khối giới thiệu, nên không áp luật căn giữa của
   .pc-khoi (xem mục 3). */
.pc-tg { padding-bottom: clamp(2rem, 5vw, 3rem); }
.pc-tg__dau {
	display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	align-items: start;
	padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
}
.pc-tg__anh { margin: 0; }
.pc-tg__anh img {
	width: 100%; aspect-ratio: 1; object-fit: cover;
	border-radius: var(--r); background: var(--nen-2); box-shadow: 0 1px 2px rgba(20,17,13,.05), 0 14px 32px -20px rgba(20,17,13,.3);
}
.pc-tg__ten { margin: 0 0 .35rem; }
.pc-tg__vai { margin: 0 0 1.25rem; font-size: 1.05rem; font-weight: 600; color: var(--go); }
.pc-tg__bio { max-width: 70ch; color: var(--muc-2); line-height: 1.8; }
.pc-tg__bio p:last-child { margin-bottom: 0; }
.pc-tg__cta { margin-top: 1.5rem; }

.pc-tg__khoi { padding-block: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--vach); }
.pc-tg__tieu-de { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }

/* Phạm vi chuyên môn — hai cột ngang hàng nhau.
   🔴 Cột "không thuộc phạm vi" KHÔNG được làm nhỏ hơn hay mờ hơn cột kia.
   Nó là nửa còn lại của lời cam kết, không phải phần chú thích. */
.pc-tg__pham-vi {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pc-tg__cot { padding: clamp(1.25rem, 3vw, 1.6rem); background: var(--nen); border-radius: var(--r); }
.pc-tg__cot--ngoai { background: var(--nen-2); }
.pc-tg__cot-nhan {
	margin: 0 0 .9rem; font-size: .72rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase; color: var(--muc-3);
}
.pc-tg__ds { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.pc-tg__ds li {
	display: flex; gap: .65rem; align-items: flex-start;
	font-size: .9375rem; line-height: 1.6; color: var(--muc-2);
}
.pc-tg__ds li::before {
	content: ""; flex: none; margin-top: .55em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--go);
}
.pc-tg__cot--ngoai .pc-tg__ds li::before { background: var(--vach-dam); }
.pc-tg__ghi {
	margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vach);
	font-size: .875rem; line-height: 1.7; color: var(--muc-3);
}

/* Pháp nhân đứng sau — phần tra cứu được, nên trình bày như một hồ sơ */
.pc-tg__phap-nhan {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--nen); border-left: 3px solid var(--go); border-radius: var(--r);
}
.pc-tg__ho-so {
	display: grid; gap: .85rem 2rem; margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pc-tg__ho-so > div { display: flex; flex-wrap: wrap; gap: .15rem .6rem; align-items: baseline; }
.pc-tg__ho-so dt { flex: none; min-width: 7.5rem; font-size: .8125rem; color: var(--muc-3); }
.pc-tg__ho-so dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--muc); }
.pc-tg__ho-so dd a { color: inherit; text-decoration-color: var(--vach-dam); }
.pc-tg__lien-ket {
	margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vach);
	font-size: .9375rem;
}
.pc-tg__lien-ket a { color: var(--lua); text-decoration: none; font-weight: 600; }
.pc-tg__lien-ket a:hover { text-decoration: underline; }

.pc-tg__dau-ds {
	display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
	align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem;
}
.pc-tg__dau-ds .pc-tg__tieu-de { margin: 0; }
.pc-tg__dem { margin: 0; font-size: .875rem; color: var(--muc-3); }

@media (max-width: 680px) {
	.pc-tg__dau { grid-template-columns: 1fr; }
	.pc-tg__anh { max-width: 160px; }
}

/* ---------- 11. Chân trang ---------- */
/* Nền tối cố ý: trùng tông với thanh tiện ích trên đầu trang.
   Hai đầu cùng màu thì trang có khung, không trôi tuột ở cuối. */
.pc-chan-trang {
	margin-top: clamp(3rem, 7vw, 5rem);
	background: var(--muc);
	color: rgba(255,255,255,.74);
	font-size: .9375rem;
}
/* Khối chốt đã là dải tối tràn viền — không chèn khoảng trắng giữa hai khối tối.
   Dùng :has() vì .pc-chot nằm trong <main>, không phải anh em kề của chân trang.
   Lớp .home là bản dự phòng cho trình duyệt cũ chưa hỗ trợ :has(). */
body.home .pc-chan-trang,
body:has(.pc-chot) .pc-chan-trang { margin-top: 0; }

/* Tầng thương hiệu: khối chữ bên trái, NAP hai cột bên phải.
   🔴 Nằm NGANG chứ không dồn vào một cột của lưới liên kết — xem ghi chú
   đầu footer.php để biết vì sao bản cũ lệch. */
.pc-ct-than { border-bottom: 1px solid rgba(255,255,255,.1); }
.pc-ct-than__trong {
	display: grid; gap: 2rem clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: start;
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* Bốn cột liên kết rộng bằng nhau — đủ chỗ cho "Cửa gỗ chống cháy 30 phút"
   nằm gọn một dòng. Hẹp hơn là mỗi mục gãy đôi, cột trông như răng cưa. */
.pc-chan-trang__trong {
	display: grid; gap: 2.5rem 2rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

.pc-ct-logo { margin-bottom: 1rem; }
.pc-ct-logo__img {
	max-height: 48px; width: auto;
	/* Logo gốc màu nâu đậm, nền trong suốt — đảo sang trắng để đọc được trên nền tối.
	   Có file logo bản trắng thì bỏ dòng filter này đi. */
	filter: brightness(0) invert(1);
	opacity: .95;
}
.pc-ct-logo .pc-logo__chu { color: #fff; font-size: 1.15rem; }
.pc-ct-logo .pc-logo__chu strong { color: #e8bb94; }

.pc-ct-gioi-thieu {
	max-width: 42ch; margin-bottom: 1.35rem;
	color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.65;
}

/* NAP xếp hai cột cho ngang bằng chiều cao khối thương hiệu bên trái.
   Dòng tên công ty và dòng địa chỉ dài nên cho chiếm trọn hàng. */
.pc-nap {
	font-style: normal; display: grid; gap: .7rem 1.75rem; margin: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-nap > :nth-child(1), .pc-nap > :nth-child(2) { grid-column: 1 / -1; }
.pc-nap__dong-tt {
	display: flex; gap: .6rem; align-items: flex-start;
	color: rgba(255,255,255,.74); text-decoration: none;
}
.pc-nap__dong-tt .pc-icon { margin-top: .18em; color: rgba(255,255,255,.38); }
a.pc-nap__dong-tt:hover { color: #fff; }
a.pc-nap__dong-tt:hover .pc-icon { color: #e8bb94; }
.pc-nap__dt strong { color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }

.pc-mxh { display: flex; gap: .5rem; margin-bottom: 0; }
.pc-mxh__o {
	display: grid; place-items: center; width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-nho);
	color: rgba(255,255,255,.7);
	transition: background-color .15s, border-color .15s, color .15s;
}
.pc-mxh__o:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }

.pc-ct-nhan {
	margin: 0 0 1rem; font-size: .75rem; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: #e8bb94;
}
.pc-ds-don { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pc-ds-don a {
	color: rgba(255,255,255,.72); text-decoration: none;
	transition: color .15s;
}
.pc-ds-don a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* Dải dưới */
.pc-ct-duoi { border-top: 1px solid rgba(255,255,255,.1); }
.pc-ct-duoi__trong {
	display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
	align-items: center; justify-content: space-between;
	padding-block: 1.15rem;
	font-size: .8125rem; color: rgba(255,255,255,.45);
}
.pc-ct-duoi p { margin: 0; }
.pc-ct-cham { margin-inline: .3rem; opacity: .5; }
.pc-ct-phu a { color: rgba(255,255,255,.6); text-decoration: none; }
.pc-ct-phu a:hover { color: #fff; text-decoration: underline; }

.pc-len-tren {
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 40px; padding: .35rem .9rem;
	background: transparent; border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--r-chip);
	font: inherit; font-size: .8125rem; color: rgba(255,255,255,.7); cursor: pointer;
	transition: border-color .15s, color .15s, background-color .15s;
}
.pc-len-tren:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff; }

/* 11b. Dải chốt mở đầu chân trang */
.pc-ct-chot { background: linear-gradient(105deg, var(--go-dam), var(--go-sau)); color: #fff; }
.pc-ct-chot__trong {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem); padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
.pc-ct-chot__chu { max-width: 56ch; }
.pc-ct-chot__tieu-de {
	margin: 0 0 .35rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
	font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.pc-ct-chot__dan { margin: 0; font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.76); }
.pc-ct-chot .pc-nut--goi { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.pc-ct-chot .pc-nut--goi:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* 11c. Hàng số liệu ở dải dưới */
.pc-ct-so-lieu {
	display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
	margin: 0; padding: 1.1rem 0 0; list-style: none;
	font-size: .8125rem; color: rgba(255,255,255,.5);
}
.pc-ct-so-lieu strong { color: rgba(255,255,255,.88); font-weight: 700; }


/* ---------- 11d. Hiệu ứng ---------- */
/* 🔴 Mọi quy tắc giấu nội dung PHẢI nằm sau .co-hieu-ung — lớp đó chỉ do
   JavaScript đặt lên <html>. Viết `.se-hien { opacity: 0 }` trần là tắt
   JavaScript thành trang trắng. Xem ghi chú mục 11 trong main.js. */
.co-hieu-ung .se-hien {
	opacity: 0; transform: translateY(14px);
	transition: opacity .5s ease-out var(--tre, 0ms), transform .5s ease-out var(--tre, 0ms);
}
.co-hieu-ung .se-hien.da-hien { opacity: 1; transform: none; }
/* Ảnh phụ trang mẫu cửa nằm trong .pc-truot__ray nhưng ở ngay màn hình đầu — không làm hiệu ứng hiện dần. */
.co-hieu-ung .pc-sp__anh-phu > .se-hien { opacity: 1; transform: none; transition: none; }

/* Ảnh mờ dần vào khi tải xong */
.anh-cho-tai { opacity: 0; transition: opacity .35s ease-out; }
.anh-da-tai { opacity: 1; }

/* Gạch chân chạy từ trái sang khi rê chuột — dùng cho liên kết trong thân bài */
.pc-noi-dung a:not([class]) {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	text-decoration: none; transition: background-size .25s ease;
	color: var(--lua);
}
.pc-noi-dung a:not([class]):hover { background-size: 100% 1px; }

/* Nút nhấn xuống một chút khi bấm — phản hồi tức thì, không chờ trang tải */
.pc-nut:active, .pc-loc__nut:active, .pc-thu-gon__nut:active { transform: translateY(1px); }

/* 🔴 Chốt chặn: ai đặt máy giảm chuyển động thì KHÔNG hiệu ứng nào được chạy,
   kể cả hiệu ứng "nhẹ". Quy tắc @media ở cuối file lo phần transition; chỗ này
   lo phần opacity, vì phần tử bị giấu mà không có transition là mất luôn. */
@media (prefers-reduced-motion: reduce) {
	.co-hieu-ung .se-hien { opacity: 1 !important; transform: none !important; }
	.anh-cho-tai { opacity: 1 !important; }
}

/* ---------- 12. Mobile ---------- */
.pc-thanh-cta { display: none; }

@media (max-width: 1180px) {
	.pc-tx__trong { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.75rem; }
	.pc-tx__cot--chot { grid-column: 1 / -1; }
}

/* 🔴 Đầu trang gập lại từ 1080px, KHÔNG phải 900px.
   Hàng ngang gồm logo + 5 mục menu + ô tìm + số điện thoại + nút Zalo;
   ở 1024px (iPad ngang, laptop nhỏ) nó tràn ra ngoài và kéo cả trang
   cuộn ngang theo. Đo lại bằng cách thu cửa sổ xuống 1024 trước khi đổi số này. */
@media (max-width: 1080px) {
	.pc-tien-ich { display: none; }
	.pc-dh { display: none; }
	.pc-nut-tim { display: none; }
	.pc-dien-thoai__nhan { display: none; }
	.pc-mo-menu { display: block; }
	.pc-thanh__trong { min-height: 62px; gap: .5rem; }
	.pc-thanh__phai { margin-left: auto; gap: .4rem; min-width: 0; }
	/* Logo thu lại để cả hàng vừa màn hình hẹp. */
	.pc-logo img { max-height: 36px; }
}

@media (max-width: 900px) {
	.pc-thanh__phai .pc-nut--zalo { display: none; }
}

/* 🔴 Dải 1081–1199px: menu còn mở ngang nhưng hàng đầu trang thiếu ~105px —
   nút Zalo bị đẩy ra ngoài màn hình (đo 15/10/2026, sau khi menu đổi thành
   "Cửa gỗ chống cháy"). Ẩn phần chữ số điện thoại, giữ biểu tượng — vẫn bấm gọi
   được, nhãn đọc màn hình nằm ở aria-label của thẻ <a>. Số vẫn có ở nút gọi nổi. */
@media (min-width: 1081px) and (max-width: 1199px) {
	.pc-thanh__phai .pc-dien-thoai__chu { display: none; }
}

/* 🔴 CTA trùng trên điện thoại (15/10/2026). Từ 900px trở xuống luôn có thanh
   .pc-thanh-cta (Gọi · Zalo · Báo giá) dính đáy màn hình. Mọi cặp Zalo + Gọi
   khác trên cùng màn hình là lặp lại → ẩn, NHƯNG CHỈ Ở TRANG DANH MỤC:
     · dải chốt chân trang (.pc-ct-chot) — dải này CHUNG cho cả site (footer.php).
       🔴 Đừng ẩn nó toàn site: trang chủ đã bỏ khối CTA ảnh nền, dải này là lời
          mời cuối trang DUY NHẤT của trang chủ. Đã lỡ ẩn toàn site một lần.
     · đầu trang danh mục — đẩy bộ lọc và mẫu cửa xuống dưới màn hình đầu
     · hộp "Chưa rõ công trình…" cuối danh mục — giữ câu hỏi + link so sánh cấp */
@media (max-width: 900px) {
	.post-type-archive-product .pc-ct-chot,
	.tax-product_cat .pc-ct-chot,
	.tax-pa_canh-cua .pc-ct-chot { display: none; }
	.pc-dm__dau .pc-cta, .pc-dm__chot .pc-cta { display: none; }
}

/* Bộ lọc danh mục trên điện thoại: mỗi chiều lọc là MỘT hàng vuốt ngang
   (nhãn đứng đầu hàng), thay vì xuống dòng thành 9 hàng chiếm cả màn đầu.
   Nút đang chọn nằm khuất thì main.js cuộn hàng tới nó (mục "Bộ lọc vuốt ngang"). */
@media (max-width: 680px) {
	.pc-dm__dau { padding-block: 1rem 1.25rem; }
	.pc-dm__dan { font-size: .9375rem; }
	.pc-loc-khung { gap: .2rem; margin-bottom: 1.5rem; padding: .7rem 0 .7rem .8rem; }
	.pc-loc {
		flex-wrap: nowrap; gap: .4rem; padding: .25rem .8rem .25rem 0;
		overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.pc-loc::-webkit-scrollbar { display: none; }
	/* Nhãn dính mép trái: hàng tự cuộn tới nút đang chọn (main.js) mà nhãn trôi
	   theo thì khách không biết hàng đó lọc gì. Nền trùng nền khung để che nút. */
	.pc-loc__nhan {
		position: sticky; left: 0; z-index: 1; flex: none; align-self: stretch;
		display: flex; align-items: center; width: 4.8rem; margin-right: 0; padding-right: .4rem;
		background: var(--nen); box-shadow: 6px 0 8px -6px rgba(20,17,13,.18);
		font-size: .75rem; line-height: 1.25; white-space: normal;
	}
	/* Đường dẫn trên điện thoại: chỉ giữ Trang chủ / mục cha / trang hiện tại.
	   🔴 Đừng chỉ đặt nowrap cho mọi mục: trang mẫu cửa có 5 cấp, cả dòng dài
	      hơn màn hình → trình duyệt nới khung nhìn 393 → 492px, thu nhỏ cả trang,
	      thanh nút đáy bị cắt (đã dính 15/10/2026). Mục cha + mục cuối tự cắt "…". */
	.pc-duong-dan li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
	.pc-duong-dan li { flex: none; white-space: nowrap; }
	.pc-duong-dan li:nth-last-child(2):not(:first-child) { flex: 0 1 auto; min-width: 0; max-width: 45%; }
	.pc-duong-dan li:nth-last-child(2):not(:first-child) a { overflow: hidden; text-overflow: ellipsis; }
	.pc-duong-dan li:last-child { flex: 1 1 0; }
	.pc-loc__nut { flex: none; min-height: 34px; padding: .25rem .7rem; font-size: .8125rem; }
	.pc-loc__nut em { margin-left: .3rem; }
	/* Ô đếm "60 / 60 mẫu" nằm cuối hàng cuối — trong hàng vuốt ngang nó bị đẩy
	   ra khuất. Ẩn đi: số mẫu của từng nút đã hiện ngay trên nút. */
	.pc-loc .pc-loc__dem { display: none; }
}

/* ---------- Trang mẫu cửa trên điện thoại (15/10/2026) ---------- */
@media (max-width: 680px) {
	/* Hai nút đầu trang rộng bằng nhau, xếp chồng thẳng hàng — trước đây "Báo giá"
	   co theo chữ còn nút Zalo rộng theo chữ khác, nhìn lệch. */
	.pc-cta--sp { display: grid; gap: .55rem; padding: 1rem; }
	.pc-cta--sp .pc-nut { width: 100%; min-height: 46px; justify-content: center; }
	.pc-cta--sp .pc-cta__ghi-chu { margin-top: .35rem; font-size: .8125rem; line-height: 1.55; }

	/* Bảng HAI cột → xếp dọc thành thẻ: ô đầu là nhãn đậm, ô sau là nội dung.
	   Hai cột ép vào 360px thì chữ gãy vụn, và tiêu đề cột (nowrap) đẩy bảng
	   tràn ngang. Bảng từ ba cột trở lên vẫn cuộn ngang như cũ. */
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) thead { display: none; }
	.pc-noi-dung table:not(:has(tr > :nth-child(3))),
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tbody,
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tr,
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) td,
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tbody th { display: block; width: 100%; }
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tr { padding: .8rem .95rem; border-bottom: 1px solid var(--vach); }
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tbody tr:last-child { border-bottom: 0; }
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) td,
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tbody th { padding: 0; border: 0; }
	.pc-noi-dung table:not(:has(tr > :nth-child(3))) tr > :first-child {
		margin-bottom: .25rem; font-weight: 700; color: var(--muc);
	}
	/* Bảng nhiều cột: tiêu đề cột được xuống dòng, và có vệt bóng ở mép báo còn
	   nội dung để cuộn (bóng tự tắt khi đã cuộn tới mép — background-attachment: local). */
	.pc-noi-dung thead th { white-space: normal; }
	.pc-bang-cuon {
		background:
			linear-gradient(90deg, var(--giay) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat local,
			linear-gradient(270deg, var(--giay) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(20,17,13,.18), transparent) left / 12px 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(20,17,13,.18), transparent) right / 12px 100% no-repeat scroll;
	}
	.pc-bang-cuon table:has(tr > :nth-child(3)) { min-width: 520px; }
}

/* ---------- Trang Công trình trên điện thoại (15/10/2026) ---------- */
@media (max-width: 680px) {
	/* Bốn con số: lưới 2×2 thay vì một cột dài cả màn hình */
	.pc-ct-so { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; padding: 1.35rem 1rem; }
	.pc-ct-so strong { font-size: 1.6rem; }
	.pc-ct-so span { margin-top: .35rem; font-size: .75rem; line-height: 1.4; }

	/* Bên ký hợp đồng: nhãn gọn hơn */
	.pc-ct-khach__nhom ul { gap: .4rem; }
	.pc-ct-khach__nhom li { padding: .32rem .7rem; font-size: .8125rem; }

	/* Bảng 29 công trình → mỗi dòng một thẻ. Năm 5 cột ép vào 360px thì cột
	   Địa điểm · Bên ký · Hạng mục bị đẩy khuất bên phải.
	   Thứ tự cột cố định trong page-du-an.php: 1 năm · 2 công trình (th) ·
	   3 địa điểm · 4 bên ký · 5 hạng mục — đổi thứ tự cột thì sửa nhãn ở đây. */
	/* :has(tr > :nth-child(3)) của luật 520px nặng (0,2,2) — cần ba lớp mới gỡ được */
	.pc-bang-cuon .pc-bang-ct.pc-bang-ct { min-width: 0; }
	.pc-bang-ct thead { display: none; }
	.pc-bang-ct, .pc-bang-ct tbody, .pc-bang-ct tr { display: block; width: 100%; }
	.pc-bang-ct tr { padding: .85rem .95rem; border-bottom: 1px solid var(--vach); }
	.pc-bang-ct tbody tr:last-child { border-bottom: 0; }
	.pc-bang-ct th, .pc-bang-ct td { display: block; padding: 0; border: 0; }
	.pc-bang-ct tbody th { min-width: 0; margin: .15rem 0 .45rem; font-size: .975rem; line-height: 1.4; }
	.pc-bang-ct tbody th .pc-chip { margin-left: .35rem; vertical-align: middle; }
	.pc-bang-ct .pc-bang-ct__nam { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--muc-3); }
	.pc-bang-ct td:nth-child(n+3) { font-size: .8125rem; line-height: 1.5; color: var(--muc-2); }
	.pc-bang-ct td:nth-child(n+3)::before { font-weight: 600; color: var(--muc-3); }
	.pc-bang-ct td:nth-child(3)::before { content: "Địa điểm: "; }
	.pc-bang-ct td:nth-child(4)::before { content: "Bên ký: "; }
	.pc-bang-ct td:nth-child(5)::before { content: "Hạng mục: "; }
}

/* ---------- Chuyên mục bài viết trên điện thoại (15/10/2026) ---------- */
@media (max-width: 680px) {
	.pc-luu-tru__dau { padding-block: 1rem 1.25rem; }
	.pc-luu-tru__mo-ta { font-size: .9375rem; line-height: 1.6; }

	/* Bài dẫn: ảnh trên, chữ dưới. Luật "thẻ xoay ngang" của .pc-luoi--bai
	   (38% | 1fr) đè mất luật bài dẫn → ảnh còn dải mỏng, tóm tắt dài 7 dòng. */
	.pc-luoi--bai .pc-the--dan .pc-the__lien-ket { grid-template-columns: 1fr; }
	.pc-luoi--bai .pc-the--dan .pc-the__anh { height: auto; aspect-ratio: 16 / 9; }
	.pc-luoi--bai .pc-the--dan .pc-the__chu { padding: .9rem 1rem 1rem; gap: .35rem; }
	.pc-luoi--bai .pc-the--dan .pc-the__tieu-de { font-size: 1.1rem; }
	.pc-luoi--bai .pc-the--dan .pc-the__tom-tat {
		display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	}

	/* Thẻ thường: ảnh cao đều nhau, tiêu đề tối đa 3 dòng */
	.pc-luoi--bai .pc-the:not(.pc-the--dan) .pc-the__anh { aspect-ratio: 4 / 3; height: auto; align-self: center; }
	.pc-luoi--bai .pc-the:not(.pc-the--dan) .pc-the__tieu-de {
		display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	}

	/* Đang ở trang chuyên mục thì nhãn chuyên mục trên từng thẻ là lặp */
	.category .pc-the__cm { display: none; }
}

/* Cuối danh sách bài: hộp "Cần tư vấn trực tiếp?" sát dải chốt chân trang +
   thanh nút đáy — ba lớp CTA. Ẩn hộp trên điện thoại, giữ dải chân trang. */
@media (max-width: 900px) {
	.pc-luu-tru__chot { display: none; }
}

/* ---------- Soát toàn site trên điện thoại (15/10/2026) ---------- */

/* Hộp CTA cuối trang (.pc-khoi--chot) có ở 12 khuôn trang. Dưới 900px nó nằm
   sát dải chốt chân trang + thanh nút đáy → ba lớp Zalo/Gọi. Quy tắc CHUNG:
   ẩn cặp nút trong hộp, GIỮ tiêu đề + lời dẫn + các link (vd. trang Giới thiệu
   có link "Xem danh sách công trình"). Trang mẫu cửa và danh sách bài đã ẩn
   cả hộp ở luật riêng phía trên. */
@media (max-width: 900px) {
	.pc-khoi--chot .pc-cta { display: none; }
}

/* Bài viết: từ 1080px cột bên rơi xuống DƯỚI bài, ngay sau cặp Zalo + Gọi cuối
   bài (.pc-cta--cuoi-bai) — khối CTA của cột bên thành bản lặp. Giữ cặp cuối bài
   (gắn với nội dung vừa đọc), giấu khối CTA cột bên. */
@media (max-width: 1080px) {
	.pc-cot-ben__cta { display: none; }
}

@media (max-width: 680px) {
	/* Công trình: 3 thẻ ảnh trong 2 cột thì lẻ — thẻ đầu chiếm trọn hàng làm ảnh nổi bật */
	.pc-luoi.pc-ct-anh > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
	/* Liên hệ: ba cách liên hệ — một cột, mỗi thẻ một hàng (biểu tượng trái).
	   Hai cột thì thẻ "Gửi email" lẻ và địa chỉ email tràn mép thẻ. */
	.pc-luoi.pc-lh__cach { grid-template-columns: 1fr; gap: .6rem; }
	.pc-cach { grid-template-columns: 2.25rem 1fr; column-gap: .75rem; align-items: center; padding: .9rem 1rem; }
	.pc-cach .pc-icon { grid-row: 1 / span 3; margin: 0; }
	.pc-cach strong { font-size: 1rem; }
	.pc-cach__phu { overflow-wrap: anywhere; }

	/* Chọn cấp: bảng 6 cột → mỗi cấp một thẻ.
	   Cột cố định trong page-chon-cap-ngan-chay.php: 1 cấp (th) · 2 vị trí ·
	   3 độ dày cánh · 4 khuôn bao · 5 số mẫu · 6 hồ sơ — đổi cột thì sửa nhãn. */
	.pc-bang-cuon .pc-bang-cap.pc-bang-cap { min-width: 0; }
	.pc-bang-cap thead { display: none; }
	.pc-bang-cap, .pc-bang-cap tbody, .pc-bang-cap tr { display: block; width: 100%; }
	.pc-bang-cap tr { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .9rem; padding: .9rem 1rem; border-bottom: 1px solid var(--vach); }
	.pc-bang-cap tbody tr:last-child { border-bottom: 0; }
	.pc-bang-cap th, .pc-bang-cap td { display: block; padding: 0; border: 0; }
	.pc-bang-cap tbody th { grid-column: 1 / -1; font-size: 1.3rem; }
	.pc-bang-cap td:nth-child(2) { grid-column: 1 / -1; margin-bottom: .35rem; color: var(--muc-2); }
	.pc-bang-cap td:nth-child(n+3) { font-size: .8125rem; }
	.pc-bang-cap td:nth-child(6) { grid-column: 1 / -1; }
	.pc-bang-cap td:nth-child(n+3)::before { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muc-3); }
	.pc-bang-cap td:nth-child(3)::before { content: "Độ dày cánh"; }
	.pc-bang-cap td:nth-child(4)::before { content: "Khuôn bao"; }
	.pc-bang-cap td:nth-child(5)::before { content: "Số mẫu"; }
	.pc-bang-cap td:nth-child(6)::before { content: "Hồ sơ thử nghiệm"; }

	/* Ảnh phụ trang mẫu cửa: một hàng vuốt ngang thay vì lưới 3 cột (5 ảnh = lẻ 2) */
	/* hai lớp: luật 560px phía dưới (repeat(3, 1fr)) viết sau, một lớp sẽ thua */
	.pc-sp__anh .pc-sp__anh-phu {
		display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 22%;
		overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
	}
	.pc-sp__anh .pc-sp__anh-phu::-webkit-scrollbar { display: none; }
	.pc-truot--anh .pc-truot__nut { display: none; } /* điện thoại vuốt tay, không cần mũi tên */
}

/* Cuối trang mẫu cửa: hộp "Gửi kích thước, nhận báo giá" nằm sát dải chốt chân
   trang (cùng lời mời, cùng Zalo + Gọi) và thanh nút đáy — ba lớp CTA.
   Trên điện thoại ẩn hộp này; dải chốt chân trang giữ lại như trang chủ. */
@media (max-width: 900px) {
	.pc-sp__chot { display: none; }
}

@media (max-width: 900px) {
	html { scroll-padding-top: 76px; }
	.pc-gt__chuyen, .pc-lh__than { grid-template-columns: 1fr; }
	.pc-tac-gia__than { flex-direction: column; }
	/* Tên bài dài làm đường dẫn xuống ba dòng — cắt còn một dòng. */
	.pc-duong-dan ol { flex-wrap: nowrap; }
	.pc-duong-dan li:last-child { min-width: 0; }
	.pc-duong-dan [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.pc-the--dan .pc-the__lien-ket { grid-template-columns: 1fr; }
	.pc-the--dan .pc-the__anh img { height: auto; }
	.pc-buoc::after { display: none; }
	.pc-hero { min-height: 0; }
	.pc-hero__anh { object-position: center 35%; }
	/* Trên điện thoại phủ đều cả khung, không đổ ngang — chữ nằm giữa ảnh */
	.pc-hero::after { background: linear-gradient(180deg, rgba(14,11,8,.72) 0%, rgba(14,11,8,.86) 100%); }
	.pc-chot::after { background: linear-gradient(180deg, rgba(14,11,8,.78) 0%, rgba(14,11,8,.9) 100%); }
	.pc-xuong { grid-template-columns: 1fr; }
	.pc-bang-ct tbody th { min-width: 200px; }
	.pc-sp__dau { grid-template-columns: 1fr; }
	.pc-ct-than__trong { grid-template-columns: 1fr; gap: 1.75rem; }
	.pc-chan-trang__trong { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
	.pc-ct-duoi__trong { justify-content: flex-start; }

	.pc-dau-trang.da-cuon .pc-logo img { max-height: 32px; }
	.pc-dien-thoai { min-width: 0; }
	.pc-dien-thoai strong { font-size: .95rem; }

	.pc-cum { display: none; }
	.pc-thanh-cta {
		position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: .5rem;
		padding: .6rem var(--le) calc(.6rem + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.975); border-top: 1px solid var(--vach);
		box-shadow: 0 -4px 22px -10px rgba(20,17,13,.28);
	}
	/* Ba đường: Gọi thu hẹp, Zalo và Báo giá chia đều phần còn lại.
	   🔴 Nút nào cũng phải giữ 48px chiều cao — đây là vùng bấm bằng ngón cái. */
	.pc-thanh-cta .pc-nut { flex: 1; min-height: 48px; padding-inline: .7rem; }
	.pc-thanh-cta .pc-nut--goi { flex: 0 0 auto; padding-inline: .85rem; }
	body { padding-bottom: 78px; }
}

@media (max-width: 400px) {
	.pc-dien-thoai strong { display: none; }
	.pc-dien-thoai { width: 42px; height: 42px; justify-content: center;
		border: 1px solid var(--vach); border-radius: var(--r-nho); }
	.pc-dien-thoai .pc-icon { color: var(--muc); }
}

/* ---------- 12b. 🔴 Mật độ trên điện thoại ----------
 *
 * VẤN ĐỀ: mọi lưới đều rơi về MỘT cột dưới 560px, nên trang chủ dài hơn
 * 20.000px — hơn hai mươi màn hình, vuốt mỏi tay mà chưa tới chân trang.
 * Màn 390px vẫn thừa chỗ cho hai cột với thẻ ảnh vuông; để một cột là
 * phí nửa bề ngang và nhân đôi quãng đường cuộn.
 *
 * NGUYÊN TẮC Ở ĐÂY:
 *   · Thẻ CÓ ẢNH VUÔNG hoặc ảnh dọc  → hai cột
 *   · Thẻ CHỈ CÓ CHỮ ngắn            → hai cột
 *   · Thẻ bài viết (ảnh 16/9 + tóm tắt) → xoay NGANG: ảnh trái, chữ phải
 *   · Khoảng cách khối co lại, nhưng không dưới 40px — dưới nữa thì các
 *     khối dính vào nhau, mất luôn cái nhịp vừa dựng ở gói A
 *
 * 🔴 Đo lại bằng scrollHeight ở khổ 390px sau mỗi lần sửa. Đừng đoán.
 */
/* 🔴 Lưới hai cột của trang bài PHẢI có luật cho màn hẹp. Thiếu nó thì ở
   390px cột chữ chỉ còn ~70px — mỗi dòng một chữ, trang bài phình từ 17.000px
   lên gần 77.000px. Lỗi này không báo gì, chỉ thấy khi đo chiều cao. */
@media (max-width: 1080px) {
	.pc-bai-khung { grid-template-columns: 1fr; }
	.pc-cot-ben { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
	.pc-bai .pc-noi-dung, .pc-bai__dau, .pc-bai > .pc-cta,
	.pc-bai > .pc-chia-se, .pc-bai > .pc-tac-gia { max-width: none; }
}

/* 🔴 Màn hình thấp (laptop 13", cửa sổ chia đôi): danh sách bài co xuống còn
   vài mục, nhưng hộp CTA vẫn phải nguyên. Giấu bớt ba dòng gạch đầu dòng
   trong hộp CTA là đủ chỗ — chúng là phần trang trí, hai cái nút mới là việc. */
@media (max-height: 760px) {
	.pc-cot-ben__y { display: none; }
	.pc-cot-ben__dan { margin-bottom: .75rem; }
}

/* Khối trượt trên màn hẹp: bớt số thẻ mỗi trang, không thì thẻ hẹp như que tăm. */
@media (max-width: 1024px) {
	.pc-truot { --moi-trang: 2 !important; }
}

@media (max-width: 680px) {
	.pc-khoi { padding-block: clamp(2.5rem, 7vw, 3.25rem); }
	.pc-truot { --moi-trang: 1.15 !important; }
	.pc-cot-ben { grid-template-columns: 1fr; }
	.pc-khoi__dan { margin-bottom: 1.75rem; font-size: 1rem; }
	.pc-luoi { gap: .9rem; }

	/* Mẫu cửa: hai cột. Thẻ còn ~170px nên chữ phải thu theo, nếu không
	   tên mẫu ăn bốn dòng và thẻ lại cao như cũ. */
	.pc-luoi-sp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
	/* 🔴 Viết kèm .pc-the-sp ở đầu: kiểu lưới 4 cột (.pc-luoi-sp--4 …) cụ thể hơn
	   và đè mất các luật này ở trang chủ + trang danh mục — chữ tên mẫu vẫn to,
	   nút "Báo giá" vẫn cao như bản máy tính. */
	.pc-the-sp .pc-the-sp__chu { padding: .75rem .75rem .8rem; gap: .3rem; }
	.pc-the-sp .pc-the-sp__ten,
	/* WooCommerce (chỉ nạp ở trang danh mục) có `.woocommerce ul.products li.product h3`
	   — cỡ 1em + đệm .5em. Bốn lớp mới thắng được nó. */
	.pc-luoi-sp .pc-the-sp .pc-the-sp__chu .pc-the-sp__ten { padding: 0; font-size: .875rem; line-height: 1.35; }
	.pc-the-sp .pc-the-sp__gia { font-size: .75rem; }
	.pc-the-sp .pc-the-sp__cta { padding-top: .5rem; }
	/* Nút "Báo giá" gọn: cao 34px, chữ 13px — mọi chỗ có danh sách mẫu cửa. */
	.pc-the-sp .pc-the-sp__cta .pc-nut {
		min-height: 34px; padding: .3rem .6rem; font-size: .8125rem; border-radius: 6px;
	}

	/* Ba kiểu cánh · năm cấp EI · bốn kiểu mặt cánh · công trình: hai cột */
	.pc-luoi--3, .pc-luoi--4, .pc-luoi--ei,
	.pc-mat-canh, .pc-quy-trinh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pc-the-dong__chu { padding: .9rem; gap: .3rem; }
	.pc-the-dong__ten { font-size: .95rem; }
	.pc-the-dong__mo { font-size: .85rem; }
	.pc-o-ei { padding: 1rem .9rem; }
	.pc-o-ei strong { font-size: 1.4rem; }
	.pc-o-ei > span { font-size: .8125rem; }

	/* Ba khối có 3 hoặc 5 ô: hai cột luôn thừa một ô lẻ, ô hẹp làm chữ gãy vụn.
	   → Một cột, mỗi ô thành một hàng ngang. (15/10/2026) */

	/* Ba kiểu cánh (trang chủ): ảnh trái, chữ phải */
	.pc-luoi--dong { grid-template-columns: 1fr; gap: .75rem; }
	.pc-luoi--dong .pc-the-dong { flex-direction: row; }
	.pc-luoi--dong .pc-the-dong__anh { width: 36%; flex: none; }
	.pc-luoi--dong .pc-the-dong__chu { justify-content: center; padding: .9rem 1rem; }
	.pc-luoi--dong .pc-the-dong__dan { margin-top: .2rem; padding-top: 0; }

	/* Năm cấp EI (trang chủ + trang Chọn cấp): hàng ngang — số cấp trái, mô tả phải.
	   Thanh đo ở mép trên nay chạy trên bề ngang đủ rộng, đọc ra đúng thang 30 → 120. */
	.pc-luoi--ei { grid-template-columns: 1fr; gap: .6rem; }
	.pc-o-ei {
		display: grid; grid-template-columns: 4.4rem 1fr; column-gap: .9rem; align-items: center;
		padding: 1rem 1rem .95rem;
	}
	.pc-o-ei strong { grid-row: 1 / span 2; margin: 0; font-size: 1.35rem; }
	.pc-o-ei > span { line-height: 1.5; }
	.pc-o-ei__dem { grid-column: 2; justify-self: start; margin-top: .4rem; }   /* ô lưới: align-self cũ không còn tác dụng */

	/* Hồ sơ kiểm định: một cột — số hiệu hồ sơ nằm trọn một dòng */
	.pc-luoi.pc-ho-so-luoi { grid-template-columns: 1fr; gap: .75rem; }
	.pc-buoc { padding: 1rem .9rem; }

	/* Thẻ bài viết xoay ngang — cao khoảng 120px thay vì 500px.
	   Ảnh 16/9 phóng toàn khung chiếm nửa màn hình thì đọc được gì? */
	.pc-luoi--bai { grid-template-columns: 1fr; gap: .8rem; }
	.pc-luoi--bai .pc-the__lien-ket {
		display: grid; grid-template-columns: 38% 1fr; align-items: stretch;
	}
	.pc-luoi--bai .pc-the__anh { height: 100%; }
	.pc-luoi--bai .pc-the__anh img { width: 100%; height: 100%; object-fit: cover; }
	.pc-luoi--bai .pc-the__anh--trong { aspect-ratio: auto; }
	.pc-luoi--bai .pc-the__chu { padding: .75rem .9rem; gap: .25rem; justify-content: center; }
	.pc-luoi--bai .pc-the__tieu-de { font-size: .95rem; line-height: 1.35; }
	/* Tóm tắt và ngày tháng bỏ đi: ở khổ này chúng đẩy thẻ cao thêm gấp đôi
	   mà không giúp quyết định bấm hay không — tiêu đề đã đủ. */
	.pc-luoi--bai .pc-the__tom-tat, .pc-luoi--bai .pc-the__meta { display: none; }
	.pc-luoi--bai .pc-the--dan .pc-the__tom-tat { display: block; font-size: .85rem; }

	/* Công trình: ảnh dọc 3/4 ở hai cột vẫn đọc được chú thích */
	.pc-ct__anh { aspect-ratio: 4/5; }
	.pc-ct__chu { padding: 2rem .7rem .7rem; }
	.pc-ct__chu strong { font-size: .85rem; }
	.pc-ct__chu span { font-size: .72rem; }

	/* Chân trang: hai cột liên kết thay vì bốn hàng dọc */
	.pc-chan-trang__trong { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
	.pc-ct-nhan { margin-bottom: .7rem; }
	.pc-ds-don { gap: .5rem; }

	/* Năng lực, giá trị, mốc: hai cột */
	.pc-gt__nl, .pc-moc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pc-the-nl { padding: 1rem .9rem; }
	.pc-the-nl h3 { font-size: .95rem; }
	.pc-the-nl p { font-size: .85rem; }
}

/* Dưới 400px chỉ nới lại thứ CHỮ NHIỀU. Thẻ có ảnh thì giữ hai cột —
   trả chúng về một cột là mất hết phần vừa rút ngắn được ở trên. */
@media (max-width: 400px) {
	.pc-gt__nl, .pc-moc { grid-template-columns: 1fr; }
	.pc-the-dong__mo { display: none; }
}

@media (max-width: 560px) {
	/* Bốn nhóm link chân trang: HAI cột, không phải một — một cột dài ~1.000px
	   trên mọi trang (soát 15/10/2026). Mục dài nhất (~26 ký tự) vẫn vừa nửa màn. */
	.pc-chan-trang__trong { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
	.pc-chan-trang__trong a { font-size: .875rem; }
	.pc-nap { grid-template-columns: 1fr; }
	.pc-len-tren { width: 100%; justify-content: center; }
	.pc-sp__anh-phu { grid-template-columns: repeat(3, 1fr); }
	.pc-loc__dem { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
	.pc-dau-trang, .pc-thanh-cta, .pc-cta, .pc-chan-trang, .pc-tien-do, .pc-loc,
	.pc-cum, .pc-chia-se { display: none !important; }
}