/* blog.css — GÓC CHIA SẺ (bài viết · chuyên mục · hub). Dùng chung biến bien.css.
 * Không lặp header/chân/menu/thanh-đáy (đã ở hop-phan.css). --acc: màu nhấn theo chuyên mục. */
:root{ --acc:#6B8F6D; }

.khung{max-width:var(--cot-rong,1160px);margin:0 auto;padding:0 22px}
.hep{max-width:820px;margin:0 auto;width:100%}
/* Đồng bộ bề rộng theo TRANG CHỦ: PC 100% (≤1500px) = 1050px (chỉ trong .noi-dung, không đụng header/footer) */
@media(min-width:981px) and (max-width:1500px){ .noi-dung .khung{max-width:1050px} }
.phan{padding:var(--nhip) 0}
/* Section nhấn = VẢI HỒNG linen + may mí cam (hệ vải trang chủ) */
.phan.nen{
  position:relative;
  background-color:#F2E2D6;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n6'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n6)'%20opacity='0.19'/%3E%3C/svg%3E"),
    repeating-linear-gradient(63deg,rgba(155,105,85,.06) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 0%,rgba(255,251,247,.55),transparent 55%),
    radial-gradient(150% 110% at 50% 118%,rgba(130,85,65,.12),transparent 58%);
  background-blend-mode:soft-light,normal,normal,normal}
.phan.nen::before{
  content:'';position:absolute;left:26px;right:26px;top:6px;height:5px;z-index:4;pointer-events:none;
  background-image:var(--may-mi);background-repeat:repeat-x;background-position:left center}
@media(max-width:760px){.phan.nen::before{left:16px;right:16px}}
/* ══ Ô SỐ — CHỮ SỐ CAO ĐÚNG BẰNG CHỮ HOA (sửa lần 2, 19/08/2026) ═══════════
   Lần 1 em hiểu hụt: chỉ làm HỘP cao 24px bằng chữ hoa, còn CHỮ SỐ giữ nguyên
   .44em nên chỉ cao 11px — bằng 46% chữ hoa. Hộp to ra mà bên trong toàn
   khoảng trống, mắt bám vào CHỮ SỐ chứ không bám vào đường viền, nên anh Hưng
   xem vẫn thấy y như cũ. Lần này phóng chính chữ số.

   ĐO PHÔNG CHỮ SỐ (Montserrat) — tỉ lệ mực khác hẳn phông tiêu đề:
     Montserrat        mực chữ số = 0,720 × cỡ chữ
     Playfair Display  mực chữ hoa = 0,727 × cỡ chữ
   Muốn chữ số cao bằng chữ hoa:  0,727 / 0,720 = 1,01em của tiêu đề.
   Đúng vậy — cỡ chữ số gần bằng cỡ chữ tiêu đề, dù nhìn thì nhỏ hơn nhiều.
   Đây là lý do đoán bằng mắt luôn sai: hai phông có tỉ lệ mực khác nhau.

   ĐO LẠI SAU KHI SỬA (tiêu đề 33px):
     chữ hoa H      24,0px
     chữ số 03      24,0px   = 100% chữ hoa      (cũ 11,0px = 46%)
     hộp            34 × 60px                    (cũ 24 × 40px)

   letter-spacing .16em → .07em: khoảng cách chữ tính theo em nên khi phóng
   cỡ chữ lên 2,3 lần thì khe giữa "0" và "3" cũng giãn từ 2,3px lên 5,3px,
   nhìn rời rạc. .07em giữ lại đúng khe 2,3px như bản cũ.

   padding đổi từ 9px sang .27em: để lề trong co giãn theo cỡ chữ, không bị
   bóp lại khi tiêu đề nhỏ đi trên điện thoại.

   top .16em: hộp nay CAO HƠN chữ hoa (34 so với 24) nên căn theo TÂM — tâm
   hộp trùng tâm chữ hoa. Đo được cần dịch xuống 5,34px = 0,16em.

   ĐÃ BỎ luật đổi cỡ ở khổ ≤760px của khoa-hoc.css: luật đó ép về .5em, tức
   là kéo ngược ô số về nhỏ đúng như cũ. Nay mọi thứ tính bằng em nên tiêu đề
   co xuống 21px thì ô số tự co theo đúng tỉ lệ, không cần luật riêng.

   position/top thay vì margin hay transform: KHÔNG đụng bố cục và KHÔNG đụng
   hiệu ứng hiện (hiệu ứng đó dùng scale/rotate riêng).
   inline-flex + align-items:center để chữ số nằm giữa hộp; cố ý KHÔNG khai
   justify-content để chữ chảy tự nhiên như bản gốc. */
h2 .so{font-family:var(--font-noi-dung);font-size:.9em;letter-spacing:.07em;color:var(--cam-tram);font-weight:700;flex:none;
  height:1.2em;line-height:1;padding:0 .36em;display:inline-flex;align-items:center;
  position:relative;top:.14em;
  border:1.2px dashed rgba(194,92,62,.6);border-radius:4px;background:rgba(210,105,74,.07);transform:rotate(-2deg)}

/* breadcrumb */
.duong-dan{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--chu-phu);margin-bottom:16px}
.duong-dan a{color:var(--cam-tram);text-decoration:none}
.duong-dan a:hover{text-decoration:underline}
.duong-dan span{opacity:.6}

/* bố cục 2 cột */
.bo-cuc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;padding:26px 0 var(--nhip);align-items:start}
.bo-cuc>*{min-width:0}
@media(max-width:980px){.bo-cuc{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ══ SIDEBAR ══ */
.sidebar{position:sticky;top:calc(var(--cao-header) + 20px);display:flex;flex-direction:column;gap:18px}
@media(max-width:980px){.sidebar{position:static;top:auto}}
.wg{position:relative;background:var(--trang);border:0;border-radius:13px;padding:16px 18px 18px;
  box-shadow:var(--bong-1)}
.wg::after{content:'';position:absolute;inset:5px;border:1.2px dashed var(--vang-nghe);border-radius:9px;opacity:.55;pointer-events:none}
.wg-tt{font-family:var(--font-tieu-de);font-size:16px;font-weight:600;color:var(--chu-chinh);margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--acc);display:inline-block}
.wg.cta-nho{text-align:center;
  background-color:#453425;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E");
  background-blend-mode:soft-light}
.wg.cta-nho::after{opacity:1}
.wg.cta-nho h3{font-family:var(--font-tieu-de);font-size:17px;color:#fff;margin-bottom:6px;line-height:1.3}
.wg.cta-nho p{font-size:12.5px;color:var(--chu-phu-toi);margin-bottom:14px;line-height:1.55}
.wg.cta-nho a{display:block;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;padding:12px;border-radius:8px;transition:.16s}
.wg.cta-nho a:hover{background:var(--cta-dam)}
.wg.cta-nho .tel{background:transparent;border:1px solid var(--cam-sang);color:var(--cam-sang);margin-top:8px}
.wg.cta-nho .tel:hover{background:var(--cam-sang);color:var(--nau-am)}
.wg-khoa li{list-style:none;margin-bottom:2px}
.wg-khoa a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--nau-am);font-size:14px;font-weight:500;transition:.16s}
.wg-khoa a:hover{background:var(--cam-nhat);color:var(--cam-tram)}
.wg-khoa svg{width:16px;height:16px;flex:none;color:var(--acc)}
/* Mục lục PC (Nội dung) — số nằm GỌN trong hộp, không đè chỉ may; quá dài thì cuộn trong hộp */
.wg-ml{max-height:min(58vh,500px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.wg-ml ol{list-style:decimal;margin:0;padding:0 4px 2px 26px}
.wg-ml li{margin:3px 0;font-size:13.5px;line-height:1.5;color:var(--chu-phu)}
.wg-ml li::marker{color:var(--cam-tram);font-weight:600;font-size:12.5px}
.wg-ml li.sub{margin-left:14px;list-style:circle}
.wg-ml a{color:var(--chu-phu);text-decoration:none;display:inline-block;padding:2px 0;transition:color .15s}
.wg-ml a:hover{color:var(--cam-tram)}
.wg-bai li{list-style:none;padding:11px 0;border-bottom:1px solid var(--vien)}
.wg-bai li:last-child{border-bottom:0;padding-bottom:0}
.wg-bai a{text-decoration:none;display:flex;gap:12px}
.wg-bai .th{width:66px;height:52px;border-radius:8px;flex:none;overflow:hidden;background:var(--kem);position:relative}
.wg-bai .th .ph svg{width:22px;height:22px}
/* h4 → h3 ngày 17/08/2026 (mục 16): h4 sau h2 là nhảy bậc. Kiểu chữ giữ NGUYÊN. */
.wg-bai h3{font-family:var(--font-noi-dung);font-size:13px;font-weight:600;line-height:1.4;color:var(--chu-chinh);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s}
.wg-bai a:hover h3{color:var(--cam-tram)}
.wg-bai .ng{font-size:11px;color:var(--chu-phu);margin-top:3px}

/* placeholder ảnh chung */
.ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 20%,#fff),color-mix(in srgb,var(--acc) 42%,#fff))}
.ph svg{width:38px;height:38px;color:#fff;opacity:.85}

/* ══════════ BÀI VIẾT ══════════ */
.nhan-cm{display:inline-flex;align-items:center;height:26px;padding:0 13px;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;margin-bottom:14px}
.bai h1{font-family:var(--font-tieu-de);font-weight:600;color:var(--chu-chinh);font-size:clamp(26px,3.8vw,40px);line-height:1.18;margin-bottom:16px}
.meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-bottom:20px;border-bottom:1px solid var(--vien);margin-bottom:22px;font-size:13px;color:var(--chu-phu)}
.meta-top .m{display:inline-flex;align-items:center;gap:7px}
.meta-top svg{width:15px;height:15px;color:var(--acc);flex:none}
.meta-top .tg{display:inline-flex;align-items:center;gap:8px}
.meta-top .tg .av{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--font-tieu-de)}
.anh-tieu-diem{border:4px solid #6f5236;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--kem);margin-bottom:26px;
  box-shadow:0 2px 5px rgba(58,46,34,.16),0 8px 14px -7px rgba(58,46,34,.2)}
.anh-tieu-diem img{width:100%;height:100%;object-fit:cover}
.anh-tieu-diem .ph{gap:10px;text-align:center}
.anh-tieu-diem .ph svg{width:60px;height:60px}

/* mục lục mobile */
.mucluc-mobile{display:none;background:var(--kem);border:1px solid var(--vien);border-radius:12px;padding:6px 18px;margin-bottom:24px}
.mucluc-mobile summary{cursor:pointer;list-style:none;font-weight:700;font-size:14px;padding:11px 0;display:flex;align-items:center;gap:9px;color:var(--nau-am)}
.mucluc-mobile summary::-webkit-details-marker{display:none}
.mucluc-mobile summary svg{width:16px;height:16px;color:var(--acc)}
.mucluc-mobile ol{list-style:none;padding:2px 0 12px}
.mucluc-mobile li{margin:2px 0}
.mucluc-mobile li.sub{padding-left:18px}
.mucluc-mobile a{color:var(--chu-phu);text-decoration:none;font-size:13.5px;display:block;padding:5px 0}
.mucluc-mobile a:hover{color:var(--cam-tram)}
@media(max-width:980px){.mucluc-mobile{display:block}}

/* typography thân bài */
.than-bai{font-size:16.5px;line-height:1.8;color:#2A2621;overflow-wrap:break-word}
.than-bai img{width:auto}
/* Căn đều 2 bên cho đồng nhất (nội dung cũ có chỗ justify inline, chỗ chưa) — chuẩn cho cả mobile & PC */
/* Căn đều hai bên chuyển sang LUẬT CHUNG TOÀN WEB ở cuối hop-phan.css.
   Bản cũ ở đây THIẾU hai thứ nay đã có: text-align-last:left (giữ dòng cuối
   bên trái) và hyphens:none (cấm gạch nối sai với tiếng Việt). Và bản mới
   KHÔNG căn blockquote nữa — đo được chỉ 23 ký tự/dòng, quá hẹp. */
.than-bai>p{margin:0 0 18px}
.than-bai .sapo{font-size:17.5px;color:var(--chu-phu);line-height:1.7}
.than-bai h2{font-family:var(--font-tieu-de);font-size:clamp(22px,2.7vw,28px);font-weight:600;line-height:1.3;color:var(--chu-chinh);margin:40px 0 15px;scroll-margin-top:calc(var(--cao-header) + 16px);padding-top:6px}
.than-bai h2::before{content:'';display:block;width:44px;height:3px;background:var(--acc);border-radius:3px;margin-bottom:14px}
.than-bai h3{font-family:var(--font-noi-dung);font-size:19px;font-weight:700;color:var(--nau-am);margin:28px 0 12px;scroll-margin-top:calc(var(--cao-header) + 16px)}
.than-bai h4{font-family:var(--font-noi-dung);font-size:16.5px;font-weight:700;color:var(--cam-tram);margin:20px 0 10px;scroll-margin-top:calc(var(--cao-header) + 16px)}
.than-bai h5,.than-bai h6{font-family:var(--font-noi-dung);font-size:15px;font-weight:700;color:var(--nau-am);margin:16px 0 8px}
.than-bai blockquote{margin:0 0 20px;padding:12px 20px;border-left:4px solid var(--acc);background:var(--kem);border-radius:0 8px 8px 0;color:var(--chu-phu);font-style:italic}
.than-bai ul,.than-bai ol{margin:0 0 18px;padding-left:22px}
.than-bai li{margin-bottom:8px}
.than-bai ul li::marker{color:var(--acc)}
.than-bai strong,.than-bai b{color:var(--chu-chinh);font-weight:600}
.than-bai a{color:var(--cam-tram);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.than-bai img{border-radius:10px;margin:6px auto 4px;height:auto;max-width:100%}
.than-bai .aligncenter{display:block;margin-left:auto;margin-right:auto}
.than-bai .alignleft{float:left;margin:6px 20px 12px 0;max-width:50%}
.than-bai .alignright{float:right;margin:6px 0 12px 20px;max-width:50%}
.than-bai .wp-caption{max-width:100%;margin:0 auto 18px}
.than-bai .wp-caption-text,.than-bai figcaption{font-size:13px;color:var(--chu-phu);text-align:center;margin-top:9px;font-style:italic}
.than-bai figure{margin:0 0 20px}
/* Gợi ý cuối bài — 1 dòng đề xuất + link trang chủ, thiết kế tinh tế */
.luv-goiy{margin:34px 0 6px;padding:15px 20px;background:var(--kem);border:1px solid var(--vien);border-left:3px solid var(--cta);border-radius:0 10px 10px 0;display:flex;gap:13px;align-items:center}
.luv-goiy svg{width:24px;height:24px;flex:none;color:var(--cta)}
.luv-goiy p{margin:0;font-size:15px;line-height:1.65;color:var(--chu-chinh);text-align:left}
.luv-goiy a{color:var(--cam-tram);font-weight:700;text-decoration:none;white-space:nowrap}
.luv-goiy a:hover{text-decoration:underline}
@media(max-width:560px){.luv-goiy{padding:13px 15px;gap:10px}.luv-goiy p{font-size:14px}}
/* Drop-cap kiểu tạp chí — chữ cái đầu bài viết */
.than-bai > p:first-of-type::first-letter{font-family:var(--font-tieu-de);font-weight:700;float:left;
  font-size:64px;line-height:.85;margin:5px 10px 0 0;color:var(--cam-tram)}
.than-bai .bang,.than-bai .wp-block-table{overflow-x:auto;margin:0 0 22px;border:1px solid var(--vien);border-radius:12px}
.than-bai table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:440px}
.than-bai thead th{background:var(--nau-am);color:var(--kem);text-align:left;padding:13px 16px;font-weight:600;font-size:13.5px}
.than-bai tbody td,.than-bai td,.than-bai th{padding:12px 16px;border-top:1px solid var(--vien);color:var(--chu-phu)}
.than-bai tbody tr:nth-child(even){background:#FBF6EF}
.than-bai tbody td:first-child{color:var(--chu-chinh);font-weight:600}
.than-bai::after{content:'';display:table;clear:both}

/* callout đọc thêm */
.docthem{display:flex;gap:13px;align-items:flex-start;background:var(--cam-nhat);border-left:4px solid var(--cta);border-radius:10px;padding:15px 18px;margin:24px 0}
.docthem svg{width:22px;height:22px;color:var(--cta);flex:none;margin-top:2px}
.docthem .dt-in{font-size:14.5px;line-height:1.55}
.docthem b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cta);margin-bottom:3px}
.docthem a{color:var(--nau-am);font-weight:600;text-decoration:none}
.docthem a:hover{color:var(--cta);text-decoration:underline}

/* CTA khóa học (bảng giá cuối bài) */
.cta-khoa{position:relative;border-radius:16px;padding:30px 30px 26px;margin:34px 0;color:var(--kem);box-shadow:var(--bong);
  background-color:#453425;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,238,214,.05) 0 1px,transparent 1px 5px);
  background-blend-mode:soft-light,overlay}
.cta-khoa::after{content:'';position:absolute;inset:7px;border:1.4px dashed rgba(236,213,170,.7);border-radius:11px;opacity:1;pointer-events:none}
.cta-khoa .ct-tt{font-family:var(--font-tieu-de);font-size:22px;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.3}
.cta-khoa .ct-phu{color:var(--chu-phu-toi);font-size:14px;margin-bottom:20px}
.cta-khoa .ct-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.cta-khoa .kh{background:rgba(255,255,255,.05);border:1px solid rgba(245,168,126,.22);border-radius:11px;padding:15px 14px;text-align:center;text-decoration:none;transition:.16s;display:block}
.cta-khoa .kh:hover{background:rgba(245,168,126,.14);border-color:var(--cam-sang);transform:translateY(-2px)}
.cta-khoa .kh .ten-kh{font-size:13.5px;font-weight:600;color:#fff;line-height:1.35;margin-bottom:8px;min-height:36px;display:flex;align-items:center;justify-content:center}
.cta-khoa .kh .gia{font-family:var(--font-tieu-de);font-size:18px;font-weight:700;color:var(--cam-sang)}
.cta-khoa .kh .don-vi{font-size:11px;color:var(--chu-phu-toi);display:block;margin-top:2px}
.cta-khoa .ct-hanh-dong{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(245,168,126,.2);padding-top:20px}
.cta-khoa .ct-hanh-dong p{font-size:14.5px;color:var(--kem);margin:0}
.cta-khoa .ct-hanh-dong p b{color:var(--cam-sang)}
.cta-khoa .nut-hotline{display:inline-flex;align-items:center;gap:9px;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;letter-spacing:.03em;padding:13px 24px;border-radius:999px;white-space:nowrap;transition:.16s}
.cta-khoa .nut-hotline:hover{background:var(--cta-dam);transform:translateY(-1px)}
.cta-khoa .nut-hotline svg{width:17px;height:17px}
@media(max-width:640px){.cta-khoa{padding:22px 18px}.cta-khoa .ct-luoi{grid-template-columns:1fr 1fr}.cta-khoa .ct-hanh-dong{justify-content:center;text-align:center}}

/* chia sẻ MXH */
.chia-se{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:30px 0;padding:18px 0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.chia-se .nhan-cs{font-size:13px;font-weight:700;color:var(--nau-am);letter-spacing:.03em}
.chia-se a,.chia-se button{width:40px;height:40px;border-radius:50%;border:1px solid var(--vien);background:var(--trang);display:grid;place-items:center;cursor:pointer;color:var(--chu-phu);transition:.16s;text-decoration:none}
.chia-se a:hover,.chia-se button:hover{color:#fff;transform:translateY(-2px)}
.chia-se .fb:hover{background:#1877F2;border-color:#1877F2}
.chia-se .zl:hover{background:#0068FF;border-color:#0068FF}
.chia-se .ms:hover{background:#0084FF;border-color:#0084FF}
.chia-se .pin:hover{background:#E60023;border-color:#E60023}
.chia-se .cp:hover{background:var(--acc);border-color:var(--acc)}
.chia-se svg{width:18px;height:18px}

/* hộp tác giả */
.tac-gia{display:flex;gap:16px;align-items:flex-start;background:var(--kem);border-radius:14px;padding:22px 24px;margin:8px 0 30px}
.tac-gia .av{width:56px;height:56px;border-radius:50%;flex:none;background:var(--nau-am);display:grid;place-items:center;color:var(--cam-sang);font-family:var(--font-tieu-de);font-weight:700;font-size:22px}
.tac-gia h3{font-family:var(--font-tieu-de);font-size:18px;font-weight:600;color:var(--chu-chinh);margin-bottom:4px}
.tac-gia .vt{font-size:12px;color:var(--acc);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.tac-gia p{font-size:13.5px;color:var(--chu-phu);line-height:1.6;margin:0}

/* có thể bạn quan tâm */
.tieu-de-khu{font-family:var(--font-tieu-de);font-size:23px;font-weight:600;color:var(--chu-chinh);margin-bottom:20px;display:flex;align-items:center;gap:11px}
.tieu-de-khu::after{content:'';flex:1;height:1px;background:var(--vien)}
.luoi-lienquan{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.the-lq{display:flex;gap:14px;align-items:center;background:var(--trang);border:1px solid var(--vien);border-radius:12px;padding:11px;text-decoration:none;transition:.18s}
.the-lq:hover{box-shadow:var(--bong-nhe);transform:translateY(-2px)}
.the-lq .th{width:88px;height:70px;border-radius:9px;flex:none;overflow:hidden;background:var(--kem);position:relative}
.the-lq .th img{width:100%;height:100%;object-fit:cover}
.the-lq .th .ph{background:linear-gradient(135deg,color-mix(in srgb,var(--lq,var(--acc)) 20%,#fff),color-mix(in srgb,var(--lq,var(--acc)) 42%,#fff))}
.the-lq .th .ph svg{width:26px;height:26px}
.the-lq h3{font-family:var(--font-noi-dung);font-size:14px;font-weight:600;line-height:1.4;color:var(--chu-chinh);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s}
.the-lq:hover h3{color:var(--cam-tram)}
.the-lq .cm{font-size:11px;color:var(--chu-phu);margin-top:4px}
@media(max-width:560px){.luoi-lienquan{grid-template-columns:1fr}}

/* ══════════ CHUYÊN MỤC + HUB: bìa nâu ══════════ */
.bia-cm,.bia-blog{position:relative;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.25);
  background-color:#3E3023;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23t)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,rgba(255,238,214,.045) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 7px),
    radial-gradient(1000px 520px at 80% -34%,#55422F 0%,transparent 62%),
    linear-gradient(180deg,#3A2E22 0%,#47382B 100%);
  background-blend-mode:soft-light,overlay,normal,normal,normal}
.bia-cm::before,.bia-blog::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 320px at 84% -14%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 70%),radial-gradient(540px 320px at 6% 128%,rgba(245,168,126,.16),transparent 72%)}
.bia-cm::after,.bia-blog::after{content:'';position:absolute;inset:8px 10px;pointer-events:none;
  border:1px solid rgba(236,213,170,.2);
  background-image:
    repeating-linear-gradient(90deg,rgba(236,213,170,.48) 0 5px,transparent 5px 11px),
    repeating-linear-gradient(90deg,rgba(236,213,170,.48) 0 5px,transparent 5px 11px),
    repeating-linear-gradient(0deg,rgba(236,213,170,.48) 0 5px,transparent 5px 11px),
    repeating-linear-gradient(0deg,rgba(236,213,170,.48) 0 5px,transparent 5px 11px);
  background-repeat:no-repeat;
  background-size:calc(100% - 16px) 1.5px,calc(100% - 16px) 1.5px,1.5px calc(100% - 16px),1.5px calc(100% - 16px);
  background-position:8px 7px,8px calc(100% - 8.5px),7px 8px,calc(100% - 8.5px) 8px}
@media(max-width:640px){.bia-cm::after,.bia-blog::after{inset:6px 8px}}
.bia-cm .khung,.bia-blog .khung{position:relative;padding:36px 22px 44px;text-align:center}
/* Bìa trang CHUYÊN MỤC ít nội dung hơn hub → cho chiều cao tối thiểu tương đương & canh giữa dọc cho cân đối */
.bia-cm .khung{min-height:clamp(300px,40vh,392px);display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:48px}
@media(max-width:640px){.bia-cm .khung{min-height:clamp(240px,44vh,320px)}}
.bia-cm .duong-dan,.bia-blog .duong-dan{justify-content:center}
.bia-cm .duong-dan a,.bia-blog .duong-dan a{color:var(--cam-sang)}
.bia-cm .duong-dan span,.bia-blog .duong-dan span{color:var(--chu-phu-toi)}
.bia-cm .eyebrow,.bia-blog .eyebrow{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--cam-sang);font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;gap:14px}
.bia-cm .eyebrow::before,.bia-cm .eyebrow::after,.bia-blog .eyebrow::before,.bia-blog .eyebrow::after{
  content:'';width:34px;height:1.5px;flex:none;
  background:repeating-linear-gradient(90deg,rgba(245,168,126,.55) 0 5px,transparent 5px 10px)}
.bia-cm .gach,.bia-blog .gach{width:84px;height:2px;border:0;border-radius:0;margin:18px auto 0;opacity:.9;
  background:repeating-linear-gradient(90deg,var(--cam-sang) 0 6px,transparent 6px 12px)}
/* Kim chạy chỉ khi tải trang — gạch tiêu đề & hai mũi chỉ eyebrow may dần ra */
@keyframes luvMay{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bia-cm .gach,.bia-blog .gach{transform-origin:center;animation:luvMay 1.8s cubic-bezier(.3,.6,.3,1) 2.6s backwards}
.bia-cm .eyebrow::before,.bia-blog .eyebrow::before{transform-origin:right center;animation:luvMay 1.4s ease 2.45s backwards}
.bia-cm .eyebrow::after,.bia-blog .eyebrow::after{transform-origin:left center;animation:luvMay 1.4s ease 2.45s backwards}
@media(prefers-reduced-motion:reduce){
  .bia-cm .gach,.bia-blog .gach,
  .bia-cm .eyebrow::before,.bia-blog .eyebrow::before,
  .bia-cm .eyebrow::after,.bia-blog .eyebrow::after{animation:none}}
.bia-cm h1,.bia-blog h1{text-wrap:balance;font-family:var(--font-bia);font-weight:600;color:#fff;font-size:clamp(26px,4.4vw,43px);line-height:1.15;letter-spacing:.01em;margin:0 auto;max-width:21em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.bia-cm .phu,.bia-blog .phu{color:var(--chu-phu-toi);font-size:clamp(13.5px,1.6vw,16px);margin:14px auto 0;max-width:64ch;line-height:1.7}
.tim{display:flex;max-width:520px;margin:24px auto 0;background:var(--trang);border:1px solid var(--vien);border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.28);overflow:hidden;
  outline:1.3px dashed rgba(185,138,50,.6);outline-offset:-6px}
.tim:focus-within{outline:2px solid var(--cam-sang);outline-offset:2px}
.tim svg{width:18px;height:18px;color:var(--chu-phu);flex:none;margin:0 4px 0 18px;align-self:center}
.tim input{flex:1;border:0;background:none;font-family:inherit;font-size:14.5px;padding:14px 6px;color:var(--chu-chinh);outline:none;min-width:0}
.tim input::placeholder{color:var(--chu-phu);opacity:.75}
.tim button{border:0;background:var(--cta);color:#fff;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:0 22px;margin:5px;border-radius:999px;cursor:pointer;transition:.16s}
.tim button:hover{background:var(--cta-dam)}
@media(max-width:560px){.tim button{padding:0 15px}}

/* chip chuyển chuyên mục */
.chip-cm{background:var(--trang);border-bottom:1px solid var(--vien);position:sticky;top:var(--cao-header);z-index:60;transition:top .3s cubic-bezier(.4,0,.2,1)}
/* Khi header tự ẩn (scroll xuống) → thanh lọc + sidebar dính lên sát đỉnh, không còn treo lơ lửng */
.header-an .chip-cm{top:0}
.header-an .sidebar{top:20px}
.chip-cm .khung{display:flex;gap:9px;padding:13px 22px;overflow-x:auto;justify-content:center;scrollbar-width:none}
.chip-cm .khung::-webkit-scrollbar{display:none}
/* Chip chuyên mục = DA THUỘC nâu sậm + chỉ may kem mảnh sát mép; chip đang chọn = da cam đất */
.chip-cm a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px 0 14px;border:1px solid #3A2A1E;border-radius:8px 22px 22px 8px;
  background-color:#4A3728;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23d)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%,rgba(0,0,0,.18));
  background-blend-mode:soft-light,normal;
  color:#F5E9D4;font-family:var(--font-tieu-de);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;text-decoration:none;
  outline:1px dashed rgba(236,213,170,.7);outline-offset:-3.5px;
  box-shadow:0 4px 10px rgba(58,46,34,.3),inset 0 1px 0 rgba(255,255,255,.16);
  transition:.2s cubic-bezier(.2,.7,.3,1)}
.chip-cm a::before{content:'';width:10px;height:10px;border-radius:50%;background:#F6EFE3;box-shadow:0 0 0 2.5px #B98A32;flex:none}
.chip-cm a:hover{transform:translateY(-2px);outline-color:rgba(236,213,170,.85);box-shadow:0 8px 18px rgba(58,46,34,.36),inset 0 1px 0 rgba(255,255,255,.16)}
.chip-cm a:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.chip-cm a[aria-current]{border-color:#8F3E28;background-color:#9C4228;color:#fff;
  text-shadow:0 1px 1px rgba(74,27,12,.25);
  outline-color:rgba(255,236,200,.75);
  box-shadow:0 6px 16px rgba(194,92,62,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.chip-cm a[aria-current]::before{background:#FFF3DE;box-shadow:0 0 0 2.5px #8F3E28}
@media(max-width:640px){.chip-cm .khung{justify-content:flex-start;padding:11px 16px}}

/* đầu phần (hub) */
.dau-phan{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.dau-phan h2{font-family:var(--font-tieu-de);font-size:clamp(22px,3.1vw,32px);font-weight:600;line-height:1.28;display:flex;align-items:baseline;gap:12px}
.dau-phan p{color:var(--chu-phu);font-size:14px;margin-top:6px;max-width:60ch}
.lk-tatca{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--cam-tram);text-decoration:none;white-space:nowrap;transition:.16s}
.lk-tatca svg{width:15px;height:15px;transition:transform .16s}
.lk-tatca:hover{color:var(--cta-dam)}
.lk-tatca:hover svg{transform:translateX(3px)}

/* 5 thẻ chuyên mục (hub) */
.luoi-cm{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.the-cm{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;padding:15px 18px 14px;text-decoration:none;overflow:hidden;isolation:isolate;
  border:7px solid transparent;border-radius:16px;
  background:
    linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--acc,var(--cta)) 8%,#fff) 100%) padding-box,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E") border-box,
    repeating-linear-gradient(0deg,rgba(255,240,220,.06) 0 1px,transparent 1px 4px) border-box,
    repeating-linear-gradient(90deg,rgba(255,240,220,.05) 0 1px,transparent 1px 4px) border-box,
    linear-gradient(#6f5236,#6f5236) border-box;
  background-blend-mode:normal,soft-light,normal,normal,normal;
  outline:1.2px dashed rgba(236,213,170,.7);outline-offset:-4px;
  box-shadow:0 4px 9px rgba(58,46,34,.22),0 14px 22px -10px rgba(58,46,34,.26);
  transition:transform .2s, box-shadow .2s}
.the-cm:focus-visible{outline:2px solid var(--acc,var(--cta));outline-offset:2px}
/* Biến thể DA THUỘC nâu sậm (thẻ CTA "Muốn học bài bản?"): hạt da + ánh sáng trên + chỉ may kem của .the-cm */
.the-cm--da{
  background-color:#463526;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='d'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23d)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0) 45%,rgba(0,0,0,.2));
  background-origin:border-box;background-clip:border-box;background-repeat:repeat,no-repeat;
  background-blend-mode:soft-light,normal;
  box-shadow:0 4px 9px rgba(58,46,34,.26),0 14px 22px -10px rgba(58,46,34,.3),inset 0 1px 0 rgba(255,255,255,.16)}
.the-cm::after{content:'';position:absolute;z-index:-1;top:-48px;right:-48px;width:132px;height:132px;border-radius:50%;background:var(--acc,var(--cta));opacity:.14;transition:.28s}
.the-cm:hover{transform:translateY(-4px);box-shadow:0 20px 42px color-mix(in srgb,var(--acc,var(--cta)) 28%,rgba(58,46,34,.16))}
.the-cm:hover::after{transform:scale(1.7)}
.the-cm .ic{width:58px;height:58px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--acc,var(--cta));color:#fff;box-shadow:0 9px 20px color-mix(in srgb,var(--acc,var(--cta)) 44%,transparent);transition:.2s;overflow:hidden}
.the-cm:hover .ic{transform:scale(1.07) rotate(-4deg)}
.the-cm .ic svg{width:25px;height:25px}
.the-cm .ic.co-anh{background:none}
.the-cm .ic.co-anh svg{display:none}
.the-cm .ic img{width:100%;height:100%;object-fit:cover;display:block}
.the-cm h3{font-family:var(--font-tieu-de);font-size:18px;font-weight:600;color:var(--chu-chinh);line-height:1.22;margin:0}
.the-cm .mt{grid-column:1 / -1;color:var(--chu-phu);font-size:12.5px;line-height:1.5;margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the-cm .chan-cm{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--acc,var(--cta)) 22%,var(--vien))}
.the-cm .dem-bai{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--acc,var(--cta));padding:5px 13px;border-radius:999px;box-shadow:0 5px 13px color-mix(in srgb,var(--acc,var(--cta)) 42%,transparent);transition:.16s}
.the-cm .di{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--acc,var(--cta))}
.the-cm .di svg{width:14px;height:14px;transition:transform .16s}
.the-cm:hover .di svg{transform:translateX(4px)}
@media(max-width:900px){.luoi-cm{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:560px){.luoi-cm{grid-template-columns:1fr}}

/* lưới thẻ bài (chuyên mục = 3 cột, hub = mục riêng) */
.luoi-bai{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.luoi-bai.co4{grid-template-columns:repeat(4,1fr)}
.the-bai{display:flex;flex-direction:column;background:var(--trang);border:0;border-radius:12px;overflow:hidden;text-decoration:none;
  box-shadow:var(--bong-1);
  transition:transform .2s, box-shadow .2s}
.the-bai:hover{transform:translateY(-3px);box-shadow:var(--bong)}
.the-bai .anh{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--kem)}
.the-bai .anh img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.the-bai:hover .anh img{transform:scale(1.05)}
.the-bai .nhan{position:absolute;top:9px;left:9px;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--acc);border-radius:999px;padding:3px 9px;white-space:nowrap;box-shadow:0 4px 12px rgba(31,28,25,.25)}
.the-bai .noi-bai{padding:12px 13px;display:flex;flex-direction:column;flex:1}
.the-bai .tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--chu-phu);line-height:1.5;margin-bottom:8px}
.the-bai h2,.the-bai h3{font-family:var(--font-noi-dung);font-size:14px;font-weight:600;line-height:1.38;color:var(--chu-chinh);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s}
.the-bai:hover h2,.the-bai:hover h3{color:var(--cam-tram)}
.the-bai .meta-bai{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--chu-phu)}
.the-bai .meta-bai svg{width:13px;height:13px;flex:none;color:var(--cam-sang)}
@media(max-width:1080px){.luoi-bai,.luoi-bai.co4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.luoi-bai,.luoi-bai.co4{grid-template-columns:1fr;gap:12px}}

/* bài nổi bật (đọc nhiều) */
.luoi-noibat{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 34px}
.hang-nb{display:flex;gap:15px;align-items:center;padding:11px 0;border-bottom:1px solid var(--vien);text-decoration:none}
.hang-nb .stt{font-family:var(--font-tieu-de);font-size:26px;font-weight:700;color:var(--cam-sang);line-height:1;flex:none;width:34px;text-align:center}
.hang-nb .ttnb h3{font-family:var(--font-noi-dung);font-size:14px;font-weight:600;line-height:1.4;color:var(--chu-chinh);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s}
.hang-nb:hover .ttnb h3{color:var(--cam-tram)}
.hang-nb .ttnb .cm-nb{font-size:11.5px;color:var(--chu-phu);margin-top:3px}
@media(max-width:700px){.luoi-noibat{grid-template-columns:1fr;gap:0}}

/* phân trang */
.phan-trang{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:28px;flex-wrap:wrap}
.phan-trang a,.phan-trang span{min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--vien);border-radius:9px;font-size:14px;font-weight:600;color:var(--nau-am);text-decoration:none;transition:.16s}
.phan-trang a:hover{border-color:var(--acc);color:var(--acc)}
.phan-trang .current,.phan-trang .hientai{background:var(--acc);border-color:var(--acc);color:#fff}
.phan-trang .dots,.phan-trang .cham{border:0;color:var(--chu-phu)}

/* ══ FORM banner (bọc form-dang-ky .luv-form) ══ */
.form-chinh{background:var(--nau-am);border-radius:12px;box-shadow:var(--bong)}
.form-chinh.gon{max-width:940px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.form-chinh.gon .dk-text{flex:1 1 210px;min-width:190px}
.form-chinh.gon .dk-text h2{font-family:var(--font-tieu-de);font-weight:600;color:var(--kem);text-align:left;margin-bottom:5px;font-size:21px;line-height:1.25}
.form-chinh.gon .dk-text .dan{color:var(--chu-phu-toi);text-align:left;margin:0;font-size:12.5px;font-style:italic}
/* 430 thay vì 450: nhường thêm ~10px cho cột tiêu đề bên trái để tiêu đề
   nằm trọn 1 dòng có dư, mà 2 ô nhập + nút vẫn thừa chỗ (cần tối thiểu ~475px). */
.form-chinh.gon .luv-form{flex:1 1 430px;margin:0;max-width:none}
.form-chinh.gon .luv-form__dau{display:none}
.form-chinh.gon .luv-form__hang{display:grid;grid-template-columns:minmax(120px,.85fr) minmax(165px,1.15fr) auto;gap:10px;align-items:center}
.form-chinh.gon .luv-ta{display:none}
/* Ô nhập NỀN TRẮNG — đồng bộ với mọi form khác trên site */
.form-chinh.gon .luv-inp{height:48px;border:1px solid rgba(245,168,126,.26);border-radius:6px;
  background:rgba(255,255,255,.95);color:var(--chu-chinh);width:100%;min-width:0;font-size:14.5px}
.form-chinh.gon .luv-inp::placeholder{color:var(--chu-phu);opacity:.7}
.form-chinh.gon .luv-inp:focus{outline:none;border-color:var(--cam-sang);background:#fff}
.form-chinh.gon .nut-dk{height:48px;padding:0 22px;white-space:nowrap}
.form-chinh.gon .luv-form__msg{flex-basis:100%}
@media(max-width:820px){.form-chinh.gon{flex-direction:column;align-items:stretch;gap:14px;padding:22px 20px}.form-chinh.gon .dk-text,.form-chinh.gon .luv-form{flex:0 0 auto;width:100%;min-width:0}.form-chinh.gon .dk-text h2,.form-chinh.gon .dk-text .dan{text-align:center}}
@media(max-width:520px){.form-chinh.gon .luv-form__hang{grid-template-columns:1fr}}

/* khám phá thêm */
.xemthem{text-align:center;padding:0}
.phan.phan-xt{padding:34px 0 44px}
.blog-hub #dangky{padding-block:52px}
.xt-title{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.xt-title::before,.xt-title::after{content:'';width:46px;height:2px;background:var(--chi-cam)}
.xt-title span{font-family:var(--font-tieu-de);font-size:15px;font-weight:600;color:var(--nau-am);letter-spacing:.06em;text-transform:uppercase}
.xt-luoi{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 20px}
.xt-item{display:inline-flex;align-items:baseline;gap:7px;padding:3px 2px;font-size:14.5px;font-weight:600;color:var(--nau-am);text-decoration:none;transition:.18s}
.xt-item .no{font-family:var(--font-tieu-de);font-size:12px;font-weight:700;color:var(--cam-tram)}
.xt-item:hover{color:var(--cta-dam)}

/* mô tả trong thẻ bài liên quan */
.the-lq{align-items:flex-start}
.the-lq .lq-mo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--chu-phu);line-height:1.5;margin-top:4px}

/* tag cloud sidebar */
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-cloud a{font-size:12px!important;color:var(--cam-tram);background:var(--cam-nhat);border-radius:999px;padding:4px 11px;text-decoration:none;transition:.15s;line-height:1.4}
.tag-cloud a:hover{background:var(--cta);color:#fff}

/* hàng thẻ chủ đề (tags) */
.the-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 4px}
.the-tags .tt-nhan{font-size:13px;font-weight:700;color:var(--nau-am)}
.the-tags a{font-size:12.5px;color:var(--cam-tram);background:var(--cam-nhat);border-radius:999px;padding:5px 12px;text-decoration:none;transition:.15s}
.the-tags a:hover{background:var(--cta);color:#fff}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  ĐỌC BÀI — hai nhịp nhỏ cho đỡ khô, KHÔNG đụng vào chữ đang đọc       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── ① GẠCH NHẤN TRÊN TIÊU ĐỀ TỰ VẼ RA ─────────────────────────────────────
   Mỗi h2 trong bài vốn đã có một gạch nhấn 44px phía trên. Nay cho nó VẼ RA
   từ trái sang, ngay sau khi tiêu đề hiện — như nét bút gạch dưới tên chương.
   Chi tiết nhỏ, nằm đúng chỗ mắt dừng lại, và không hề chạm vào chữ. */
html.js-on .blog-single .than-bai > h2.chu-bai::before{
  transform:scaleX(0);transform-origin:left center}
html.js-on .blog-single .than-bai > h2.chu-bai.nhan-hien::before{
  transform:scaleX(1);
  transition:transform .62s cubic-bezier(.16,1,.3,1) .26s}

/* ── ② THANH TIẾN TRÌNH ĐỌC ────────────────────────────────────────────────
   Bài đo được dài 6.804px — gần 9 màn hình. Khách không biết còn bao xa nên
   dễ bỏ giữa chừng. Một vạch mảnh 3px chạy theo tay cuộn trả lời đúng câu hỏi
   đó mà không tốn một milimet nội dung nào.

   Bám ngay dưới thanh đầu trang và tự tụt lên khi thanh đầu ẩn đi, nên không
   bao giờ có hai thanh chồng nhau. */
.luv-tiendo{position:fixed;left:0;right:0;top:var(--cao-header);height:3px;z-index:75;
  pointer-events:none;background:rgba(58,46,34,.10);
  transition:top .28s cubic-bezier(.16,1,.3,1)}
html.header-an .luv-tiendo{top:0}
.luv-tiendo i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--acc,#D2694A),#E8A26F)}
@media(prefers-reduced-motion:reduce){.luv-tiendo{display:none}}