/* ===================================================================
   Website Coach Duy Nguyễn · bảng màu lấy từ bảng đèn thương hiệu
   Nâu đen ấm + vàng đồng. Ba font đã kiểm dấu tiếng Việt.
   =================================================================== */
:root{
  color-scheme:dark;
  --bg:#17120F; --bg-2:#1E1815; --bg-3:#241D18;
  --panel:#241D19; --panel-2:#2E2620; --panel-3:#392F27;
  --line:#3D332C; --line-2:#514539;
  --ink:#F9F5F0; --ink-2:#CDC2B6; --ink-3:#A2968A; --ink-4:#7E7062;
  --vang:#F2B14A; --vang-2:#FFCB74; --vang-3:#D98F2E;
  --vang-mo:rgba(242,177,74,.13); --on-vang:#17120F;
  --paper:linear-gradient(180deg,#282019 0%,#201A16 100%);
  --shadow-s:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.9);
  --shadow:0 2px 6px rgba(0,0,0,.5),0 34px 66px -30px rgba(0,0,0,1);
  --shadow-h:0 3px 8px rgba(0,0,0,.55),0 26px 50px -22px rgba(0,0,0,.95);
  --shadow-v:0 10px 26px -10px rgba(242,177,74,.42);
  --r:14px; --r-s:10px;
  --f-tit:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;
  --f-than:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --w:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-than);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-tit);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:0;text-wrap:pretty}
h1 span,h2 span,h3 span,h4 span{text-wrap:pretty}
p,li{text-wrap:pretty;margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.bd{width:min(100% - 40px,var(--w));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vang)}
.mono.xam{color:var(--ink-3)}

/* ---------- hoa văn mờ ẩn hiện ---------- */
.hoa-van{position:relative;overflow:hidden}
.hoa-van::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(242,177,74,.15) 1px,transparent 1.4px),
    repeating-linear-gradient(135deg,rgba(249,245,240,.03) 0 1px,transparent 1px 13px);
  background-size:28px 28px,auto;
  -webkit-mask-image:radial-gradient(120% 96% at 50% 0%,#000 0%,rgba(0,0,0,.45) 46%,transparent 78%);
  mask-image:radial-gradient(120% 96% at 50% 0%,#000 0%,rgba(0,0,0,.45) 46%,transparent 78%);
  animation:tho 11s ease-in-out infinite}
.hoa-van.duoi::before{-webkit-mask-image:radial-gradient(110% 96% at 50% 100%,#000 0%,rgba(0,0,0,.4) 46%,transparent 78%);
  mask-image:radial-gradient(110% 96% at 50% 100%,#000 0%,rgba(0,0,0,.4) 46%,transparent 78%)}
@keyframes tho{0%,100%{opacity:.42}50%{opacity:1}}
.hoa-van > *{position:relative;z-index:1}

/* ---------- dấu hiệu DN ---------- */
/* Logo khiên D N. Ảnh có nền trong suốt nên chạy được trên cả nền tối và sáng.
   Cao hơn rộng nên chỉ đặt bề rộng, chiều cao để trình duyệt tự tính. */
.dn{display:block;flex:0 0 auto;width:30px;height:auto;
  transition:opacity .22s var(--ease)}

/* ---------- thanh điều hướng ---------- */
#nav{position:sticky;top:0;z-index:60;background:rgba(23,18,15,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{width:min(100% - 32px,1320px);margin-inline:auto;display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.logo .dn{width:30px}
.logo b{font-family:var(--f-tit);font-weight:800;font-size:15.5px;letter-spacing:-.015em;line-height:1.15;display:block}
.logo i{display:block;font-style:normal;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
#nav-links{display:none;align-items:center;gap:2px;margin-left:auto}
#nav-links a{white-space:nowrap;text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-2);padding:9px 13px;border-radius:999px;transition:color .24s var(--ease),background-color .24s var(--ease)}
#nav-links a:hover{color:var(--vang)}
#nav-links a.on{color:var(--on-vang);background-color:var(--vang);background-image:linear-gradient(180deg,var(--vang-2),var(--vang-3))}
.nav-cta{margin-left:auto;flex:0 0 auto}
#tien{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--vang);transform:scaleX(0);transform-origin:0 50%}
/* nút mở menu trên máy nhỏ */
#mo-menu{margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer}
#mo-menu span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
#mo-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#mo-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
#mo-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#menu-nho{display:none;border-top:1px solid var(--line);background:var(--bg-2)}
/* Phải có chiều cao tối đa và cho cuộn. Thiếu hai thứ này thì menu dài hơn
   màn hình sẽ tràn ra ngoài mà không kéo xuống được. dvh tính cả thanh công
   cụ của trình duyệt điện thoại, vh thì không, nên để vh làm bản dự phòng. */
#menu-nho.mo{display:block;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Nhóm gấp lại trong menu nhỏ */
#menu-nho .gap > summary{display:block;position:relative;padding:15px 44px 15px 20px;
  border-bottom:1px solid var(--line);font-size:16.5px;font-weight:600;color:var(--ink-2);
  cursor:pointer;list-style:none}
#menu-nho .gap > summary::-webkit-details-marker{display:none}
#menu-nho .gap > summary::after{content:"";position:absolute;right:22px;top:50%;
  width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
#menu-nho .gap[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
#menu-nho .gap[open] > summary{color:var(--ink)}
#menu-nho a{display:block;padding:15px 20px;border-bottom:1px solid var(--line);text-decoration:none;font-size:16.5px;font-weight:600;color:var(--ink-2)}
#menu-nho a.on{color:var(--vang)}
#menu-nho .nut{margin:18px 20px 22px;width:calc(100% - 40px);justify-content:center}
/* #menu-nho a có id nên thắng .nut-v, làm chữ trên nút vàng thành xám nhạt.
   CDN bắt lỗi này ngày 26/08/2026. Ghi lại màu chữ với bộ chọn mạnh hơn. */
#menu-nho a.nut-v{color:var(--on-vang);border-bottom:0}
@media(min-width:1140px){#nav-links{display:flex}.nav-cta{margin-left:14px}#mo-menu,#menu-nho{display:none !important}}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-than);font-weight:700;font-size:15.5px;line-height:1;text-decoration:none;border-radius:999px;padding:14px 24px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),filter .2s var(--ease)}
.nut .mt{transition:transform .2s var(--ease)}
.nut:hover .mt{transform:translateX(3px)}
.nut:active{transform:scale(.97)}
.nut-v{background-color:var(--vang);background-image:linear-gradient(180deg,var(--vang-2) 0%,var(--vang) 52%,var(--vang-3) 100%);color:var(--on-vang);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--shadow-v)}
.nut-v:hover{filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -10px rgba(242,177,74,.55)}
.nut-vien{background-color:rgba(23,18,15,.4);background-image:linear-gradient(180deg,rgba(249,245,240,.06),rgba(249,245,240,0));color:var(--ink);border-color:var(--line-2)}
.nut-vien:hover{border-color:var(--vang);color:var(--vang)}
.nut-nho{font-size:13.5px;padding:11px 18px}
.nut-toi{background-color:var(--on-vang);background-image:linear-gradient(180deg,#241D19,#120E0C);color:var(--vang);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px -10px rgba(0,0,0,.8)}
.nut-toi:hover{filter:brightness(1.25)}
.nut-vien-toi{background:transparent;color:var(--on-vang);border-color:rgba(23,18,15,.45)}
.nut-vien-toi:hover{border-color:var(--on-vang)}
.lk-v{font-size:15.5px;font-weight:700;color:var(--vang);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.lk-v .mt{transition:transform .2s var(--ease)}
.lk-v:hover .mt{transform:translateX(3px)}

/* ---------- ảnh: đen trắng, rê vào thì lên màu và sáng lên ---------- */
.anh{position:relative;overflow:hidden;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.anh img{width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.04) brightness(.97);transition:filter .55s var(--ease),transform .7s var(--ease)}
@media(hover:hover){.anh:hover img{filter:saturate(1.1) contrast(1.02) brightness(1.09);transform:scale(1.035)}
.anh:hover{border-color:var(--line-2)}}

/* ---------- khung phần chung ---------- */
.phan{padding:86px 0}
.phan.hep{padding:64px 0}
.phan-dau{text-align:center;max-width:62ch;margin:0 auto 46px}
.phan-dau h2{font-size:clamp(28px,3.9vw,46px);margin-top:12px;text-wrap:balance}
.phan-dau p{font-size:17px;color:var(--ink-2);margin-top:16px}
.phan-dau p .nhan{color:var(--vang)}
.ket{display:flex;gap:14px;margin-top:38px;padding-left:18px;border-left:3px solid var(--vang);font-size:16.5px;font-weight:600;color:var(--ink)}

/* ---------- hộp ---------- */
.hop{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:30px}
.hop > h3{font-size:22px;margin-bottom:8px}
.hop > .dan-hop{font-size:15.5px;color:var(--ink-3);margin-bottom:22px}

/* ---------- chân trang ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0 60px}
.ct{display:grid;gap:34px}
@media(min-width:900px){.ct{grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);gap:56px}}
.ct-gioi p{font-size:15px;color:var(--ink-2);margin-top:16px;max-width:34ch}
.ct-cot{display:grid;gap:26px}
@media(min-width:600px){.ct-cot{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct-cot b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.ct-cot a{display:block;font-size:15px;color:var(--ink-2);text-decoration:none;padding:5px 0;transition:color .2s var(--ease)}
.ct-cot a:hover{color:var(--vang)}
.ct-cuoi{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px;color:var(--ink-3)}
.ct-cuoi a{color:var(--ink-3);text-decoration:none}
.ct-cuoi a:hover{color:var(--vang)}

/* ---------- hiện khi cuộn ---------- */
.hien{opacity:0;transform:translateY(18px)}
.hien.in{opacity:1;transform:none;transition:opacity .56s var(--ease),transform .56s var(--ease)}
.noanim .hien{opacity:1;transform:none}
.tre > *{opacity:0;transform:translateY(16px)}
.tre.in > *{opacity:1;transform:none;transition:opacity .56s var(--ease),transform .56s var(--ease)}
.noanim .tre > *{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.16s !important}
.hien,.tre > *,.hero-giua > *{transform:none !important}
.hoa-van::before{animation:none !important;opacity:.7 !important}}
.noanim *{animation:none !important;transition:none !important}

/* ===================================================================
   TRANG CHỦ
   =================================================================== */
#hero{position:relative;overflow:hidden;min-height:min(100svh,900px);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-nen{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-nen img{width:100%;height:100%;object-fit:cover;object-position:66% 30%;transform:scale(1.05);filter:saturate(.62) sepia(.26) contrast(1.05) brightness(.56) blur(1.5px)}
.hero-nen::after{content:"";position:absolute;inset:0;background:radial-gradient(76% 62% at 44% 44%,rgba(23,18,15,.6) 0%,rgba(23,18,15,.9) 58%,rgba(23,18,15,.99) 100%)}
.hero-in{position:relative;z-index:2;width:min(100% - 40px,1080px);margin-inline:auto;padding:92px 0 44px;text-align:center}
.hero-giua > *{opacity:0;transform:translateY(16px)}
.noanim .hero-giua > *,#hero.len .hero-giua > *{opacity:1;transform:none;transition:opacity .72s var(--ease),transform .72s var(--ease)}
.hero-avt{width:104px;height:104px;border-radius:50%;overflow:hidden;margin:0 auto 22px;border:2px solid var(--vang);box-shadow:0 0 0 9px rgba(242,177,74,.1),var(--shadow)}
.hero-avt img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.ten{font-family:var(--f-tit);font-weight:800;letter-spacing:-.035em;line-height:.95;text-transform:uppercase;font-size:clamp(38px,7.6vw,84px);margin:10px 0 0}
/* Tên để một màu. Tô vàng nửa cái tên là màu trang trí, không mang nghĩa gì. */
.ten em{font-style:normal;color:inherit}
/* danh xưng và khẩu hiệu, lấy đúng bố cục bảng đèn thương hiệu */
.bang-hieu{margin:20px auto 0;max-width:640px}
.bang-hieu .danh-xung{font-family:var(--f-than);font-weight:800;font-size:clamp(17px,2.3vw,26px);line-height:1.25;letter-spacing:.02em;color:var(--vang);text-transform:uppercase}
.bang-hieu .vach{display:flex;align-items:center;gap:10px;margin:15px auto;max-width:400px}
.bang-hieu .vach i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--vang-3),transparent)}
.bang-hieu .vach b{width:6px;height:6px;border-radius:50%;background:var(--vang);flex:0 0 auto}
.bang-hieu .khau-hieu{font-family:var(--f-than);font-weight:600;font-size:clamp(14px,1.6vw,18px);letter-spacing:.14em;color:var(--vang-2);text-transform:uppercase}
#hero h1{font-size:clamp(15.5px,1.5vw,18.5px);font-weight:500;font-family:var(--f-than);line-height:1.62;letter-spacing:0;color:var(--ink-2);max-width:60ch;margin:26px auto 0}
.hero-nut{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.hero-so{position:relative;z-index:1;margin-top:46px;padding-top:26px;border-top:1px solid rgba(249,245,240,.13)}
.hero-ghi{position:relative;z-index:2;margin-top:15px;font-size:13px;color:var(--ink-3);text-align:center}

/* ---------- về tôi: ảnh tách nền lớn cộng lưới ảnh chồng lên ---------- */
.vt{display:grid;gap:34px;align-items:center}
@media(min-width:1000px){.vt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px}}
.vt-chu h2{font-size:clamp(28px,3.6vw,42px);margin:12px 0 22px}
.vt-chu p{font-size:16.5px;color:var(--ink-2)}
.vt-chu p + p{margin-top:15px}
.vt-chu .nhan{color:var(--vang)}
.vt-chu .lk-v{margin-top:26px}
/* khối ảnh Về tôi: đặt bằng toạ độ phần trăm để ô ảnh không bao giờ đè lên mặt.
   Người đứng dưới đáy khung, đầu chiếm khoảng 28% trên của ảnh, nên mọi ô ảnh
   đều bắt đầu từ 46% chiều cao trở xuống. */
.vt-anh{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:4/5}
.vt-anh .quang{position:absolute;left:50%;top:2%;width:76%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,177,74,.72) 0%,rgba(242,177,74,.38) 34%,rgba(242,177,74,.09) 56%,rgba(242,177,74,0) 72%);z-index:0}
.vt-anh .nguoi{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.vt-anh .nguoi img{width:auto;height:100%;max-width:82%;object-fit:contain;object-position:bottom;filter:saturate(1.03) contrast(1.06) brightness(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.3) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.3) 90%,transparent 100%)}
.vt-anh .manh{position:absolute;inset:0;z-index:2}
.vt-anh .manh .anh{position:absolute;width:47%;aspect-ratio:3/2;box-shadow:var(--shadow)}
.vt-anh .m1{left:0;top:46%}
.vt-anh .m2{right:0;top:62%}
.vt-anh .m3{left:9%;bottom:0}
@media(max-width:620px){.vt-anh{max-width:400px}}

/* ---------- cách tôi làm việc ---------- */
.clv{display:grid;gap:20px}
@media(min-width:1000px){.clv{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:start}}
.viec5{display:grid;gap:0;border-top:1px solid var(--line)}
.viec5 .d{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:17px 0;border-bottom:1px solid var(--line);transition:background-color .2s var(--ease)}
@media(hover:hover){.viec5 .d:hover{background:rgba(249,245,240,.03)}}
.viec5 em{font-style:normal;font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--vang);padding-top:2px}
.viec5 h4{font-size:18px;margin-bottom:5px}
.viec5 p{font-size:15.5px;color:var(--ink-2)}
/* Hộp ghi ranh giới. Cùng cách trình bày với hộp AI: nền vàng rất nhạt,
   viền vàng mờ, nhãn màu vàng. Hai loại hộp trên trang nhìn cùng một hệ. */
.khong{margin-top:22px;border:1px solid rgba(242,177,74,.3);border-radius:var(--r-s);
  padding:20px 22px;background:var(--vang-mo)}
.khong b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);margin-bottom:9px}
.khong p{font-size:15.5px;color:var(--ink-2)}
.nl{border-top:1px solid var(--line)}
.nl .hang{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:19px 0;border-bottom:1px solid var(--line);transition:background-color .2s var(--ease)}
@media(hover:hover){.nl .hang:hover{background:rgba(249,245,240,.03)}}
.nl .stt{font-family:var(--f-tit);font-weight:800;font-size:30px;line-height:1;color:var(--vang);letter-spacing:-.03em}
.nl h4{font-size:18px;margin-bottom:5px}
.nl p{font-size:15.5px;color:var(--ink-2)}
.nl-ai{margin-top:20px;display:flex;gap:14px;background:var(--vang-mo);border:1px solid rgba(242,177,74,.3);border-radius:var(--r-s);padding:17px 19px}
.nl-ai b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);flex:0 0 auto;padding-top:2px}
.nl-ai p{font-size:15px;color:var(--ink-2)}

/* ---------- khối trên ảnh nền tràn ---------- */
.tran{position:relative;overflow:hidden;border-block:1px solid var(--line)}
.tran-nen{position:absolute;inset:0;z-index:0;overflow:hidden}
.tran-nen img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(.6) sepia(.28) contrast(1.02) brightness(.38) blur(5px)}
.tran-nen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,15,.95) 0%,rgba(23,18,15,.86) 45%,rgba(23,18,15,.97) 100%)}
.tran > .bd{position:relative;z-index:2}

/* ---------- blog: một bài lớn cộng danh sách ---------- */
.blog{display:grid;gap:24px;align-items:start}
@media(min-width:960px){.blog{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:34px}}
.bai-lon{display:block;text-decoration:none;border-radius:var(--r);overflow:hidden;position:relative;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.bai-lon:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line-2)}}
.bai-lon .anh{border:0;border-radius:0;aspect-ratio:3/2}
.bai-lon .chu{padding:24px}
.bai-lon .meta,.bai-nho .meta{font-family:var(--f-than);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--vang);margin-bottom:10px}
.bai-lon h3{font-size:24px;margin-bottom:10px}
.bai-lon p{font-size:15.5px;color:var(--ink-2)}
.ds-bai{display:grid;gap:0;align-content:start;border-top:1px solid var(--line)}
.bai-nho{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:background-color .2s var(--ease),padding-left .2s var(--ease)}
@media(max-width:520px){.bai-nho{grid-template-columns:96px minmax(0,1fr);gap:14px}}
@media(hover:hover){.bai-nho:hover{background:rgba(249,245,240,.03)}}
.bai-nho .anh{aspect-ratio:4/3;border-radius:var(--r-s)}
.bai-nho h3{font-size:17px;line-height:1.34}
.bai-nho p{font-size:14.5px;color:var(--ink-3);margin-top:6px}
.bai-nho .meta{margin-bottom:7px}
.blog-them{margin-top:26px;text-align:center}

/* ---------- thẻ mời ---------- */
.cd-hop{max-width:660px;margin-inline:auto;background:rgba(36,29,25,.93);backdrop-filter:blur(8px);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:38px 34px;text-align:center}
.cd-hop h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 14px}
.cd-hop > p{font-size:16.5px;color:var(--ink-2);max-width:52ch;margin-inline:auto}
.cd-buoc{display:grid;gap:0;margin:26px 0 4px;text-align:left;border-top:1px solid var(--line)}
.cd-buoc div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.cd-buoc b{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--vang)}
.cd-buoc span{font-size:15.5px;color:var(--ink-2)}
.cd-hop .nut{margin-top:24px}

/* ---------- hàng thẻ ---------- */
.dx{display:grid;gap:18px}
@media(min-width:700px){.dx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.dx{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dx article{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.dx article:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line-2)}}
.trang-thai{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vang);background:var(--vang-mo);border:1px solid rgba(242,177,74,.3);border-radius:999px;padding:6px 12px;margin-bottom:16px;align-self:flex-start}
.trang-thai i{width:6px;height:6px;border-radius:50%;background:var(--vang);flex:0 0 auto}
.trang-thai.im{color:var(--ink-3);background:var(--panel-2);border-color:var(--line)}
.trang-thai.im i{background:var(--ink-3)}
.dx h3{font-size:19px;margin-bottom:10px}
.dx p{font-size:15.5px;color:var(--ink-2)}
.dx .lk-v{margin-top:18px;font-size:15px}

/* ---------- dải vàng ---------- */
.dai-vang{background-color:var(--vang);background-image:linear-gradient(140deg,var(--vang-2) 0%,var(--vang) 46%,var(--vang-3) 100%);color:var(--on-vang);position:relative;overflow:hidden}
.dai-vang::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,18,15,.09) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(100% 94% at 84% 100%,#000 0%,transparent 74%);
  mask-image:radial-gradient(100% 94% at 84% 100%,#000 0%,transparent 74%)}
.moi{position:relative;z-index:2;padding:52px 0 56px;display:grid;gap:26px;align-items:center}
@media(min-width:900px){.moi{grid-template-columns:minmax(0,1fr) auto;gap:44px}}
.moi .mono{color:rgba(23,18,15,.72)}
.moi h2{font-size:clamp(25px,3.4vw,38px);color:var(--on-vang);margin-top:12px;max-width:20ch}
.moi p{font-size:16.5px;color:rgba(23,18,15,.84);max-width:56ch;margin-top:12px}
.moi-nut{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- quỹ đạo niềm tin ---------- */
.qd{display:grid;gap:26px}
@media(min-width:1000px){.qd{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:46px;align-items:center}}
.qd-ve{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.qd-thanh{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.qd-thanh .cham{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.qd-thanh .ten-ve{margin-left:8px;font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:.04em}
.qd-ve svg{display:block;width:100%;height:auto;padding:14px;max-width:520px;margin-inline:auto}
.vong{fill:none;stroke-width:32;cursor:pointer;transition:stroke .25s var(--ease)}
.vong[data-i="1"]{stroke:rgba(249,245,240,.06)}
.vong[data-i="2"]{stroke:rgba(249,245,240,.088)}
.vong[data-i="3"]{stroke:rgba(249,245,240,.116)}
.vong[data-i="4"]{stroke:rgba(249,245,240,.146)}
.vong[data-i="5"]{stroke:rgba(249,245,240,.182)}
.vong.on{stroke:rgba(242,177,74,.36)}
.vong:focus-visible{outline:none;stroke:rgba(242,177,74,.54)}
.tam{fill:rgba(242,177,74,.17);stroke:var(--vang);stroke-width:1.5}
.nhan-v{font-family:var(--f-than);font-size:14px;font-weight:600;fill:var(--ink-2);pointer-events:none}
.nhan-v.on{fill:var(--ink);font-weight:700}
.nhan-t{font-family:var(--f-tit);font-size:18px;font-weight:800;fill:var(--ink);letter-spacing:-.02em;pointer-events:none}
@media(max-width:600px){.nhan-v{display:none}.nhan-t{font-size:22px}}
.qd-chip{display:none;flex-wrap:wrap;gap:8px;padding:0 14px 16px}
.qd-chip button{font-family:var(--f-than);font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.qd-chip button[aria-pressed="true"]{background-color:var(--vang);color:var(--on-vang);border-color:var(--vang)}
@media(max-width:600px){.qd-chip{display:flex}}
.qd-bang .nhan-vong{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);display:block;margin-bottom:10px}
.qd-bang h3{font-size:24px;margin-bottom:8px}
.qd-bang > p{font-size:16px;color:var(--ink-2)}
.qd-hang{margin-top:18px;display:grid;gap:12px}
.qd-hang div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
@media(max-width:640px){.qd-hang div{grid-template-columns:minmax(0,1fr);gap:4px}}
.qd-hang b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qd-hang span{font-size:15px;color:var(--ink-2)}

/* ---------- đầu trang phụ ---------- */
.dau-trang{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:72px 0 64px;background:var(--bg-2)}
.dau-trang .bd{position:relative;z-index:1}
.dau-trang h1{font-size:clamp(32px,5vw,58px);margin-top:14px;max-width:min(34ch,100%)}
.dau-trang p.dan{font-size:17.5px;color:var(--ink-2);margin-top:18px;max-width:min(90ch,100%)}

/* ---------- danh sách bài đầy đủ ---------- */
.luoi-bai{display:grid;gap:22px}
@media(min-width:760px){.luoi-bai{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.luoi-bai{grid-template-columns:repeat(3,minmax(0,1fr))}}
.the-bai{display:flex;flex-direction:column;text-decoration:none;background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.the-bai:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line-2)}}
.the-bai .anh{border:0;border-radius:0;aspect-ratio:3/2}
.the-bai .chu{padding:22px}
.the-bai .meta{font-family:var(--f-than);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--vang);margin-bottom:10px}
.the-bai h2{font-size:20px;margin-bottom:9px}
.the-bai p{font-size:15.5px;color:var(--ink-2)}

/* ---------- trang bài viết ---------- */
.bai-dau{padding:60px 0 34px}
.bai-dau .meta{font-family:var(--f-than);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--vang);margin-bottom:14px;line-height:1.6}
.bai-dau h1{font-size:clamp(30px,4.6vw,52px);max-width:min(34ch,100%)}
.bai-dau .tom{font-size:18.5px;color:var(--ink-2);margin-top:18px;max-width:min(88ch,100%)}
.bai-anh{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;box-shadow:var(--shadow)}
.bai-anh img{width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.04) brightness(.98);transition:filter .55s var(--ease)}
@media(hover:hover){.bai-anh:hover img{filter:saturate(1.1) brightness(1.07)}}
.bai-than{max-width:70ch;margin:44px auto 0;padding-bottom:24px}
.bai-than p{font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.bai-than p + p{margin-top:19px}
/* Ba mức nhấn trong thân bài, dùng đúng thứ tự này.
   Nền tối nên màu vàng bật rất mạnh. Càng dùng ít càng có sức. */
/* Mức 1, đậm trắng: nhãn dẫn dắt người đọc, không phải nhấn ý.
   Ví dụ "Câu thứ nhất:", "Một.", "Hai." */
.bai-than b{color:var(--ink);font-weight:700}
/* Mức 2, vàng: câu chốt ý của một mục. Mỗi mục nhiều nhất một câu. */
.bai-than .nhan{color:var(--vang);font-weight:inherit}
/* Mức 3, vàng đậm: câu quan trọng nhất của cả bài. Nhiều nhất một câu. */
.bai-than .nhan.dam{color:var(--vang);font-weight:700}
.bai-than h2{font-size:clamp(23px,2.9vw,30px);margin:44px 0 16px}
.bai-than .dan-manh{margin:30px 0;padding:22px 24px;border-left:3px solid var(--vang);background:var(--vang-mo);border-radius:0 var(--r-s) var(--r-s) 0;font-size:18px;font-weight:600;color:var(--ink)}
.bai-cuoi{max-width:70ch;margin:16px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.bai-cuoi p{font-size:15px;color:var(--ink-3)}

/* ---------- liên hệ ---------- */
.lh{display:grid;gap:20px}
@media(min-width:760px){.lh{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lh .hop h3{font-size:20px}
.lh .hop p{font-size:15.5px;color:var(--ink-2);margin-top:9px}
.lh .hop .lk-v{margin-top:16px;font-size:15px}

/* ---------- sách và podcast ---------- */
.ke{display:grid;gap:24px}
@media(min-width:820px){.ke{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ke article{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:28px;display:flex;flex-direction:column;gap:14px}
.ke h2{font-size:22px}
.ke p{font-size:15.5px;color:var(--ink-2)}
.trong{text-align:center;max-width:56ch;margin:0 auto;padding:52px 0}
.trong p{font-size:17px;color:var(--ink-2);margin-top:16px}

/* ---------- đăng ký bản tin ---------- */
.ban-tin{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2)}
.ban-tin .nen{position:absolute;inset:0;z-index:0}
.ban-tin .nen img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:saturate(.6) sepia(.3) contrast(1.02) brightness(.38) blur(4px)}
.ban-tin .nen::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,18,15,.97) 0%,rgba(23,18,15,.88) 55%,rgba(23,18,15,.94) 100%)}
.bt-in{position:relative;z-index:2;padding:52px 0 56px;display:grid;gap:28px;align-items:center}
@media(min-width:960px){.bt-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}}
.bt-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--vang-mo);border:1px solid rgba(242,177,74,.3);margin-bottom:16px}
.bt-icon svg{width:22px;height:22px;stroke:var(--vang);fill:none;stroke-width:1.7}
.bt-chu h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:12px}
.bt-chu p{font-size:16.5px;color:var(--ink-2);max-width:52ch}
.bt-chu .nho{font-size:14px;color:var(--ink-3);margin-top:14px}
.bt-form{display:grid;gap:12px}
@media(min-width:560px){.bt-form{grid-template-columns:minmax(0,1fr) auto}}
.bt-form input{width:100%;font-family:var(--f-than);font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:15px 22px;outline:none;transition:border-color .2s var(--ease)}
.bt-form input::placeholder{color:var(--ink-3)}
.bt-form input:focus{border-color:var(--vang)}
.bt-form button{justify-content:center}
.bt-xong{display:none;margin-top:14px;font-size:15.5px;color:var(--vang);font-weight:600}
.bt-form.xong + .bt-xong{display:block}
.bt-loi{display:none;margin-top:10px;font-size:14px;color:#FF9E7A}
.bt-form.co-loi ~ .bt-loi{display:block}

/* ---------- hàng bìa và ô tập ---------- */
.hang-bia{display:grid;gap:20px}
@media(min-width:640px){.hang-bia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.hang-bia{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hang-bia.hai{max-width:820px;margin-inline:auto}
@media(min-width:640px){.hang-bia.hai{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
.bia{text-decoration:none;display:flex;flex-direction:column;gap:14px}
.bia .mat{position:relative;aspect-ratio:2/3;border-radius:6px 12px 12px 6px;overflow:hidden;
  background-color:var(--panel-2);background-image:linear-gradient(145deg,#3A2E22 0%,#241C16 58%,#1A140F 100%);
  border:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
@media(hover:hover){.bia:hover .mat{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-h)}}
.bia .mat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.bia .mat .nhan-bia{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vang)}
.bia .mat .ten-bia{font-family:var(--f-tit);font-weight:800;font-size:clamp(20px,2.2vw,26px);line-height:1.08;color:var(--ink);letter-spacing:-.02em}
.bia .mat .tac{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bia .duoi b{display:block;font-family:var(--f-tit);font-weight:800;font-size:18px;margin-bottom:6px}
.bia .duoi p{font-size:14.5px;color:var(--ink-2)}
.bia .duoi .tt{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vang);margin-top:9px;display:block}
.bia .duoi .tt.im{color:var(--ink-3)}

/* ---------- danh sách tập podcast ---------- */
.ds-tap{border-top:1px solid var(--line)}
.tap{display:grid;grid-template-columns:52px 64px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);transition:background-color .2s var(--ease)}
@media(min-width:820px){.tap{grid-template-columns:58px 64px minmax(0,1fr) 110px 74px}}
@media(hover:hover){.tap:hover{background:rgba(249,245,240,.03)}}
.tap .so-tap{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.06em}
.tap .art{width:64px;height:64px;border-radius:9px;background-image:linear-gradient(145deg,#3A2E22,#1A140F);border:1px solid var(--line-2);display:grid;place-items:center}
.tap .art span{font-family:Georgia,serif;font-size:17px;color:var(--vang)}
.tap h3{font-size:17px;line-height:1.34;margin-bottom:5px}
.tap .phu{font-size:14px;color:var(--ink-3)}
.tap .ngay,.tap .dai{font-size:14px;color:var(--ink-3);font-family:var(--f-mono)}
@media(max-width:819px){.tap .ngay,.tap .dai{display:none}}

/* ---------- chip nền tảng ---------- */
.nen-tang{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.nen-tang > span{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.nen-tang b{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-than);font-size:14px;font-weight:600;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.nen-tang b i{width:8px;height:8px;border-radius:50%;background:var(--vang);flex:0 0 auto}

/* ---------- ô ghi chú bản mẫu ---------- */
.ghi-mau{display:flex;gap:14px;align-items:flex-start;max-width:74ch;margin:0 auto 40px;background:var(--vang-mo);border:1px solid rgba(242,177,74,.3);border-radius:var(--r-s);padding:18px 20px}
.ghi-mau b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);flex:0 0 auto;padding-top:2px}
.ghi-mau p{font-size:15.5px;color:var(--ink-2)}

/* ---------- chip chủ đề blog ---------- */
.chu-de{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:36px}
.chu-de button{font-family:var(--f-than);font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.chu-de button:hover{color:var(--vang);border-color:var(--line-2)}
.chu-de button.on{background-color:var(--vang);color:var(--on-vang);border-color:var(--vang)}

/* ---------- menu con ---------- */
.co-con{position:relative}
.co-con > a{display:inline-flex;align-items:center;gap:7px}
.co-con > a .mui{width:5px;height:5px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg) translate(-1px,-2px);transition:transform .2s var(--ease)}
.co-con:hover > a .mui{transform:rotate(225deg) translate(-2px,-1px)}
.menu-con{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);min-width:310px;padding-top:12px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.menu-con > div{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:8px}
.co-con:hover .menu-con,.co-con:focus-within .menu-con{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu-con a{display:block;padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:normal;line-height:1.3}
.menu-con a em{display:block;font-style:normal;font-weight:500;font-size:13px;color:var(--ink-3);margin-top:4px}
.menu-con a:hover{background:var(--panel-2);color:var(--ink)}
.menu-con .vach-con{height:1px;background:var(--line);margin:7px 12px}
#menu-nho .nhom{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:16px 20px 6px}
#menu-nho a.con{padding-left:34px;font-size:15.5px}

/* ---------- khối cuối trang: ba lối đi ---------- */
.cuoi{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--bg-2);padding:74px 0 78px}
.cuoi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--vang),transparent)}
.cuoi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(242,177,74,.14) 1px,transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(110% 96% at 50% 0%,#000 0%,transparent 74%);
  mask-image:radial-gradient(110% 96% at 50% 0%,#000 0%,transparent 74%);animation:tho 11s ease-in-out infinite}
.cuoi > .bd{position:relative;z-index:1}
.ba-loi{display:grid;gap:20px}
@media(min-width:900px){.ba-loi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.loi{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-s);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.loi:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line-2)}}
.loi .so{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:14px}
.loi h3{font-size:20px;margin-bottom:10px}
.loi p{font-size:15.5px;color:var(--ink-2);flex:1}
.loi .nut,.loi form{margin-top:20px}
.loi.vang{background-color:var(--vang);background-image:linear-gradient(150deg,var(--vang-2) 0%,var(--vang) 48%,var(--vang-3) 100%);border-color:var(--vang-3);box-shadow:0 14px 34px -14px rgba(242,177,74,.5)}
.loi.vang .so{color:rgba(23,18,15,.7)}
.loi.vang h3{color:var(--on-vang)}
.loi.vang p{color:rgba(23,18,15,.86)}
.loi .bt-form{grid-template-columns:minmax(0,1fr)}
.loi .bt-form input{padding:13px 18px;font-size:15px}
.loi .bt-form button{font-size:15px;padding:13px 20px}

/* ---------- bánh xe bốn năng lực ---------- */
.banh{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.banh svg{display:block;width:100%;height:auto;max-width:500px;margin-inline:auto}
.mieng{cursor:pointer;transition:fill .25s var(--ease),transform .25s var(--ease)}
.mieng{fill:rgba(249,245,240,.07);stroke:var(--line-2);stroke-width:1.5}
.mieng.on{fill:rgba(242,177,74,.3);stroke:var(--vang)}
.loi-banh{fill:rgba(242,177,74,.16);stroke:var(--vang);stroke-width:1.5}
.chu-mieng{font-family:var(--f-than);font-size:15px;font-weight:600;fill:var(--ink-2);pointer-events:none}
.chu-mieng.on{fill:var(--ink);font-weight:700}
.chu-loi{font-family:var(--f-tit);font-size:19px;font-weight:800;fill:var(--ink);letter-spacing:-.02em;pointer-events:none}
.chu-nen{font-family:var(--f-mono);font-size:12.5px;font-weight:600;fill:var(--vang);pointer-events:none;letter-spacing:.08em}
@media(max-width:620px){.chu-mieng{display:none}.chu-loi{font-size:26px}}
@media(max-width:1100px){.chu-nen{display:none}}

/* ---------- sơ đồ hệ sinh thái ---------- */
.so-do{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;overflow-x:auto}
.so-do svg{display:block;width:100%;min-width:640px;height:auto;max-width:960px;margin-inline:auto}
.sd-o{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.5;rx:10}
.sd-o.vang{fill:rgba(242,177,74,.16);stroke:var(--vang)}
.sd-duong{stroke:var(--line-2);stroke-width:1.6;fill:none}
.sd-duong.v{stroke:var(--vang);stroke-width:2}
.sd-chu{font-family:var(--f-than);font-size:14px;font-weight:600;fill:var(--ink)}
.sd-phu{font-family:var(--f-than);font-size:13px;font-weight:400;fill:var(--ink-3)}
.sd-nhan{font-family:var(--f-mono);font-size:12.5px;font-weight:600;fill:var(--vang);letter-spacing:.08em}

/* ---------- thẻ chương trình ---------- */
.luoi-ct{display:grid;gap:20px}
@media(min-width:760px){.luoi-ct{grid-template-columns:repeat(2,minmax(0,1fr))}}
.the-ct{display:flex;flex-direction:column;text-decoration:none;background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-s);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.the-ct:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--vang)}}
.the-ct .tang{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);margin-bottom:12px}
.the-ct h3{font-size:21px;margin-bottom:6px}
.the-ct .vi{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.the-ct p{font-size:15.5px;color:var(--ink-2);flex:1}
.the-ct .xem{margin-top:18px;font-size:15px;font-weight:700;color:var(--vang);display:inline-flex;align-items:center;gap:8px}
.the-ct .xem .mt{transition:transform .2s var(--ease)}
.the-ct:hover .xem .mt{transform:translateX(3px)}

/* ---------- bảng thông tin chương trình ---------- */
.bang-tt{border-top:1px solid var(--line);margin-top:8px}
.bang-tt div{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(min-width:700px){.bang-tt div{grid-template-columns:180px minmax(0,1fr);gap:20px}}
.bang-tt b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bang-tt span{font-size:16px;color:var(--ink-2)}
.bang-tt span strong{color:var(--ink);font-weight:700}

/* ---------- danh sách có dấu kiểm ---------- */
.dsk{display:grid;gap:0;border-top:1px solid var(--line)}
.dsk div{display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.dsk i{width:20px;height:20px;border-radius:50%;background:var(--vang-mo);border:1px solid rgba(242,177,74,.35);display:grid;place-items:center;margin-top:2px}
.dsk i::after{content:"";width:7px;height:4px;border-left:1.8px solid var(--vang);border-bottom:1.8px solid var(--vang);transform:rotate(-45deg) translate(1px,-1px)}
.dsk p{font-size:15.5px;color:var(--ink-2)}
.dsk.khong i{background:var(--panel-2);border-color:var(--line-2)}
.dsk.khong i::after{content:"";width:9px;height:1.8px;border:0;background:var(--ink-3);transform:none}

/* ---------- bánh xe: số trong miếng ---------- */
.so-mieng{font-family:var(--f-mono);font-size:15px;font-weight:600;fill:var(--vang);letter-spacing:.1em;pointer-events:none}
@media(max-width:620px){.so-mieng{font-size:26px}}

/* ---------- hệ sinh thái: một nguồn, ba nhánh ---------- */
.hst{position:relative;padding-top:4px}
.hst-nguon{display:flex;justify-content:center}
.hst-nguon span{display:inline-block;background-color:var(--vang);background-image:linear-gradient(180deg,var(--vang-2),var(--vang-3));color:var(--on-vang);font-weight:700;font-size:16px;padding:14px 26px;border-radius:999px;box-shadow:var(--shadow-v)}
.hst-than,.hst-thanh{display:none}
@media(min-width:1040px){
  .hst-than{display:block;width:2px;height:30px;background:var(--line-2);margin:0 auto}
  .hst-thanh{display:block;height:2px;background:var(--line-2);margin-inline:calc((100% - 40px) / 6)}
  .hst-cot{margin-top:26px}
  .hst-cot > div::before{content:"";position:absolute;left:calc(50% - 1px);top:-26px;width:2px;height:26px;background:var(--line-2)}
}
.hst-cot{display:grid;gap:20px;margin-top:26px}
@media(min-width:820px){.hst-cot{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hst-nhom{position:relative;background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-s)}
.hst-nhom b{display:block;font-family:var(--f-tit);font-weight:800;font-size:19px;margin-bottom:7px}
.hst-nhom > p{font-size:14.5px;color:var(--ink-3);margin-bottom:16px}
.hst-muc{display:grid;gap:0;border-top:1px solid var(--line)}
.hst-muc a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease),padding-left .2s var(--ease)}
.hst-muc a::after{content:"\\2192";color:var(--vang);opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);transform:translateX(-4px)}
.hst-muc a:hover{color:var(--vang)}
.hst-muc a:hover::after{opacity:1;transform:translateX(0)}

/* ---------- đường năm chặng ---------- */
.duong-chang{display:grid;gap:16px;position:relative}
@media(min-width:1000px){.duong-chang{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
.chang{position:relative;background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;box-shadow:var(--shadow-s);transition:transform .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.chang:hover{transform:translateY(-4px);border-color:var(--vang)}}
@media(min-width:1000px){.chang::after{content:"";position:absolute;right:-14px;top:44px;width:14px;height:2px;background:var(--line-2)}
.chang:last-child::after{display:none}}
.ch-so{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);margin-bottom:12px}
.chang b{display:block;font-family:var(--f-tit);font-weight:800;font-size:19px;margin-bottom:8px}
.chang p{font-size:15px;color:var(--ink-2)}

/* ---------- hai cột chữ và hình ---------- */
.doi-cot{display:grid;gap:34px;align-items:center}
@media(min-width:1000px){.doi-cot{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px}}
.doi-cot.hinh-trai > :first-child{order:2}
@media(max-width:999px){.doi-cot.hinh-trai > :first-child{order:0}}
.doi-cot h2{font-size:clamp(26px,3.3vw,38px);margin:12px 0 18px}
.doi-cot p{font-size:16.5px;color:var(--ink-2)}
.doi-cot p + p{margin-top:14px}
.anh-khung{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.anh-khung.dung{aspect-ratio:3/4}
.anh-khung.ngang{aspect-ratio:3/2}
.banh-ghi{display:none;text-align:center;font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--vang);text-transform:uppercase;margin-top:6px}
@media(max-width:1100px){.banh-ghi{display:block}}

/* nút Cộng đồng trên thanh chỉ hiện khi có chỗ; dưới 1140px dùng menu gập */
@media(max-width:1139px){#nav .nav-cta{display:none}}

/* ============ ĐỌC BÀI: bề mặt sáng hơn, chữ dễ đọc hơn ============ */
:root{ --ink-doc:#E8DFD5; --doc-bg:#221C18; --doc-bg-2:#2A231D; }
.bai-than{max-width:none;margin:40px auto 0;padding:0}
/* Tờ giấy bài viết chuyển sang kem sáng theo yêu cầu CDN 27/08: đọc dài
   trên nền tối mỏi mắt. Token định nghĩa lại trong phạm vi .doc, token gốc
   toàn trang giữ nguyên vì thẻ bài ở trang danh sách vẫn nền tối. */
.doc{
  color:var(--ink);
  --doc-bg:#F5EDDE;--doc-bg-2:#FBF6EB;--ink-doc:#3A2F26;
  --ink:#241B14;--ink-2:#4E4034;--ink-3:#75634F;--ink-4:#99876F;
  --line:#DFD2BE;--line-2:#C9B8A0;
  --bg-2:#FBF6EB;--panel:#F3EBDC;--panel-2:#EDE3D0;--panel-3:#E5D9C2;
  --vang:#8F5808;--vang-2:#7A4B07;--vang-3:#684006;
  --vang-mo:rgba(143,88,8,.09);
  background-image:linear-gradient(180deg,var(--doc-bg-2) 0%,var(--doc-bg) 100%);background-color:var(--doc-bg);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:44px 46px;max-width:74ch;margin-inline:auto}
@media(max-width:700px){.doc{padding:30px 22px;border-radius:12px}}
.doc p{font-size:18px;line-height:1.78;color:var(--ink-doc)}
.doc p + p{margin-top:20px}
.doc b,.doc strong{color:var(--ink);font-weight:700}
.doc h2{font-size:clamp(23px,2.9vw,30px);margin:46px 0 16px;color:var(--ink)}
.doc h3{font-size:20px;margin:32px 0 12px;color:var(--ink)}
.doc ul,.doc ol{margin:18px 0 0;padding-left:22px}
.doc li{font-size:17.5px;line-height:1.72;color:var(--ink-doc);margin-top:9px}
.doc a{color:var(--vang);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{color:var(--vang-2)}
.dan-manh{margin:32px 0;padding:24px 26px;border-left:3px solid var(--vang);background:var(--vang-mo);border-radius:0 var(--r-s) var(--r-s) 0;font-size:18.5px;font-weight:600;line-height:1.6;color:var(--ink)}

/* khối trả lời nhanh, để máy tìm kiếm và AI trích được ngay */
.tra-loi{margin:0 0 34px;padding:24px 26px;border:1px solid rgba(242,177,74,.34);border-radius:var(--r);background:var(--vang-mo)}
.tra-loi b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:10px}
.tra-loi p{font-size:18px;line-height:1.68;color:var(--ink);font-weight:500}

/* mục lục */
.muc-luc{margin:0 0 34px;padding:22px 26px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel)}
.muc-luc b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.muc-luc summary{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px}
.muc-luc summary::-webkit-details-marker{display:none}
.muc-luc summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--vang);border-bottom:1.5px solid var(--vang);transform:rotate(45deg);transition:transform .25s var(--ease)}
.muc-luc[open] summary::after{transform:rotate(-135deg)}
.muc-luc[open] summary{margin-bottom:12px}
.muc-luc ol{margin:0;padding-left:20px}
.muc-luc li{font-size:16px;margin-top:8px;color:var(--ink-2)}
.muc-luc a{color:var(--ink-2);text-decoration:none}
.muc-luc a:hover{color:var(--vang)}

/* bảng trong bài */
.doc .bang{overflow-x:auto;margin:28px 0;border:1px solid var(--line-2);border-radius:var(--r-s)}
.doc table{width:100%;border-collapse:collapse;min-width:520px}
.doc th,.doc td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-doc);vertical-align:top}
.doc th{background:var(--panel-2);font-family:var(--f-than);font-weight:700;color:var(--ink);font-size:15px}
.doc tr:last-child td{border-bottom:0}

/* hỏi đáp trong bài */
.hoi-dap{max-width:74ch;margin:40px auto 0}
.hoi-dap > b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:16px}
.hoi-dap .muc{border-top:1px solid var(--line)}
.hoi-dap .muc:last-child{border-bottom:1px solid var(--line)}
.hoi-dap h3{font-size:18.5px;margin:0;padding:20px 0 10px;color:var(--ink)}
.hoi-dap p{font-size:16.5px;line-height:1.7;color:var(--ink-2);padding-bottom:20px}

/* hộp tác giả */
.tac-gia{max-width:74ch;margin:40px auto 0;display:grid;gap:20px;align-items:center;background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
@media(min-width:620px){.tac-gia{grid-template-columns:88px minmax(0,1fr)}}
.tac-gia .anh-tg{width:88px;height:88px;border-radius:50%;overflow:hidden;border:2px solid var(--vang);box-shadow:0 0 0 6px rgba(242,177,74,.1)}
.tac-gia .anh-tg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.tac-gia b{display:block;font-family:var(--f-tit);font-weight:800;font-size:19px;margin-bottom:6px}
.tac-gia p{font-size:15.5px;color:var(--ink-2)}
.tac-gia .lk-v{margin-top:12px;font-size:15px}

/* vụn đường dẫn */
.vun{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--ink-3);margin-bottom:18px}
.vun a{color:var(--ink-3);text-decoration:none}
.vun a:hover{color:var(--vang)}
.vun span{color:var(--ink-3)}

/* thẻ bài trong danh sách: sáng hơn một bậc */
.the-bai{background-image:linear-gradient(180deg,#2A231D 0%,#221C18 100%);background-color:#241D19}
.the-bai p{color:var(--ink-doc)}
.bai-lon{background-image:linear-gradient(180deg,#2A231D 0%,#221C18 100%);background-color:#241D19}
.bai-lon p{color:var(--ink-doc)}
.bai-dau .tom{color:var(--ink-doc)}

/* ---------- ba chân dung: thẻ ngang, ảnh nhỏ ---------- */
.cd-hang{display:grid;gap:16px}
@media(min-width:900px){.cd-hang{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cd-hang article{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;
  background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-s);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
@media(hover:hover){.cd-hang article:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-h)}}
.cd-hang .anh{width:76px;height:76px;border-radius:50%;overflow:hidden;border:1px solid var(--line-2)}
.cd-hang h3{font-size:18px;margin-bottom:7px}
.cd-hang p{font-size:15px;color:var(--ink-2)}

/* ---------- mốc thời gian ---------- */

/* ---------- ô niềm tin ---------- */
.niem-tin{display:grid;gap:18px}
@media(min-width:820px){.niem-tin{grid-template-columns:repeat(2,minmax(0,1fr))}}
.niem-tin article{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-left:3px solid var(--vang);border-radius:0 var(--r) var(--r) 0;padding:24px 26px}
.niem-tin h3{font-size:19px;margin-bottom:9px}
.niem-tin p{font-size:15.5px;color:var(--ink-2)}

/* ---------- kênh YouTube ---------- */
.yt-hang{display:grid;gap:16px}
@media(min-width:900px){.yt-hang{grid-template-columns:repeat(3,minmax(0,1fr))}}
.yt-the{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-s)}
.yt-the .so{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vang);margin-bottom:12px}
.yt-the h3{font-size:19px;margin-bottom:9px}
.yt-the p{font-size:15.5px;color:var(--ink-2)}
.yt-nut{display:inline-flex;align-items:center;gap:10px}
.yt-nut i{width:22px;height:16px;border-radius:5px;background:#F2B14A;position:relative;flex:0 0 auto}
.yt-nut i::after{content:"";position:absolute;left:8px;top:4px;border-left:6px solid #17120F;border-top:4px solid transparent;border-bottom:4px solid transparent}

/* ---------- thẻ và lưới dùng chung ---------- */
.luoi{display:grid;gap:18px}
@media(min-width:760px){.luoi.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.luoi.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.the{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-s);padding:26px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
@media(hover:hover){.the:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:var(--line-2)}}
.the h3{font-size:19.5px;margin-bottom:10px}
.the p{font-size:15.5px;color:var(--ink-2)}

/* ---------- khối nét đứt: điều chưa hợp, ranh giới ---------- */
.dut{margin-top:24px;border:1px dashed var(--line-2);border-radius:var(--r-s);padding:22px 24px;background:rgba(249,245,240,.022)}
.dut b{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.dut p{font-size:15.5px;color:var(--ink-2)}


/* ---------- rê chuột vào thẻ: sáng lên hẳn một bậc ---------- */
.hst-nhom{transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.the,.hop,.dx article,.the-ct,.loi,.the-bai,.bai-lon,.chang,.yt-the,.niem-tin article,.cd-hang article,.hst-nhom{
  transition:transform .22s var(--ease),background-color .22s var(--ease),background-image .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
@media(hover:hover){
  .the:hover,.hop:hover,.dx article:hover,.the-ct:hover,.loi:not(.vang):hover,.the-bai:hover,.bai-lon:hover,
  .chang:hover,.yt-the:hover,.niem-tin article:hover,.cd-hang article:hover,.hst-nhom:hover{
    background-color:#332821;
    background-image:linear-gradient(180deg,#3B2E24 0%,#2C2219 100%);
    border-color:rgba(242,177,74,.5);
    box-shadow:var(--shadow-h),inset 0 1px 0 rgba(242,177,74,.22);
    transform:translateY(-5px)}
  .hst-nhom:hover{transform:translateY(-4px)}
  .loi.vang:hover{filter:brightness(1.06);transform:translateY(-5px);box-shadow:0 20px 44px -16px rgba(242,177,74,.6)}
  /* dòng trong thẻ cũng sáng theo */
  .the:hover p,.hop:hover p,.dx article:hover p,.the-ct:hover p,.the-bai:hover p,.bai-lon:hover p,
  .chang:hover p,.yt-the:hover p,.niem-tin article:hover p,.cd-hang article:hover p{color:var(--ink-doc)}
  /* hàng trong danh sách cũng phải thấy rõ khi rê */
  .viec5 .d:hover,.nl .hang:hover,.tap:hover,.bai-nho:hover,.dau .o:hover{background:rgba(242,177,74,.07)}
}


/* ---------- giữ đầu người trong khung ----------
   Toàn bộ ảnh nhà sáng lập là ảnh dọc 2:3, còn khung bài viết và thẻ là 3:2.
   Cắt từ giữa sẽ mất đầu. Đẩy điểm neo lên gần đỉnh để phần đầu luôn nằm trong khung. */
.anh img,.bai-anh img,.cd-hang .anh img,.bai-nho .anh img{object-position:50% 12%}
/* ô chân dung tròn nhỏ cần neo cao hơn nữa vì khung vuông cắt sâu */
.cd-hang .anh img{object-position:50% 8%}

/* ===== Khối hệ sinh thái: chọn theo điều đang kẹt ===== */
.hst2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:30px;align-items:start}

.hst-cot-ket{display:flex;flex-direction:column;gap:2px}
.hst-lan{margin:22px 0 8px;display:flex;flex-direction:column;gap:2px}
.hst-lan:first-child{margin-top:0}
.hst-lan b{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vang)}
.hst-lan span{font-size:13.5px;color:var(--ink-3)}

.hst-ket{display:block;width:100%;text-align:left;cursor:pointer;background:transparent;
  border:1px solid transparent;border-radius:var(--r-s);padding:13px 15px;color:inherit;
  font-family:var(--f-than);transition:background-color .22s var(--ease),
  border-color .22s var(--ease),transform .22s var(--ease)}
.hst-cau{display:block;font-size:15.5px;line-height:1.56;color:var(--ink-2)}
.hst-ten{display:block;margin-top:6px;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hst-cham{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vang);
  margin-left:5px;vertical-align:middle}
.hst-ket:hover{background-color:var(--panel-3);border-color:rgba(242,177,74,.34);transform:translateX(3px)}
.hst-ket:focus-visible{outline:2px solid var(--vang);outline-offset:2px}
.hst-ket[aria-current="true"]{background-color:var(--panel-2);border-color:rgba(242,177,74,.55);
  box-shadow:inset 3px 0 0 var(--vang)}
.hst-ket[aria-current="true"] .hst-cau{color:var(--ink)}
.hst-ket[aria-current="true"] .hst-ten{color:var(--vang)}

.hst-cot-bg{position:sticky;top:88px}
.hst-bg{background-image:var(--paper);background-color:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s)}
.hst-bg[hidden]{display:none}
/* Ảnh có chữ trên màn chiếu thì cắt sát vào người và phủ mờ dần, để chữ đó
   thành nền chứ không tranh đọc với nội dung thật. */
.hst-anh{aspect-ratio:16/7;overflow:hidden;background:var(--bg-2);position:relative}
/* Điểm neo và mức phóng đặt riêng cho từng ảnh ngay trên thẻ img, vì khung 16/7
   rất ngang nên mỗi ảnh cắt một kiểu. Ở đây chỉ để mức mặc định. */
.hst-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  filter:saturate(1.02) brightness(1.06) contrast(1.03)}
.hst-anh::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0 38%,rgba(36,29,25,.55) 66%,rgba(36,29,25,.9) 100%),
             linear-gradient(to top,rgba(36,29,25,.85),transparent 46%)}
.hst-chu{padding:26px 28px 28px}
.hst-nl{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vang);margin-bottom:10px}
.hst-bg h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(22px,2.4vw,28px);
  line-height:1.15;margin-bottom:4px;letter-spacing:-.01em;text-wrap:pretty}
.hst-en{font-family:var(--f-mono);font-size:12px;letter-spacing:.07em;color:var(--ink-3);margin-bottom:16px}
.hst-tom{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:22px}

.hst-so{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-bottom:20px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.hst-so > div{background:var(--bg-2);padding:12px 14px}
.hst-so dt{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.hst-so dd{font-size:14px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}

.hst-ai{font-size:14.5px;line-height:1.65;color:var(--ink-3);margin-bottom:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.hst-ai b{display:block;margin-bottom:5px;font-family:var(--f-mono);font-size:10.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

@media(max-width:940px){
  .hst2{grid-template-columns:1fr;gap:24px}
  .hst-cot-bg{position:static;order:-1}
  .hst-anh{aspect-ratio:16/8}
}
@media(max-width:560px){
  .hst-chu{padding:20px 18px 22px}
  .hst-so{grid-template-columns:1fr}
  .hst-ket{padding:12px 13px}
}

/* ===== Dải số: bốn kênh, rồi hai con số khác loại ===== */
.kenh4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(249,245,240,.11);border-radius:var(--r);overflow:hidden;
  background:rgba(23,18,15,.34);backdrop-filter:blur(3px)}
.kenh4 .k{padding:17px 20px 16px;border-left:1px solid rgba(249,245,240,.09);text-align:left}
.kenh4 .k:first-child{border-left:0}
.k-ten{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vang);margin-bottom:9px}
.k-so{display:flex;align-items:baseline;gap:7px;margin-bottom:0}
.k-so b{font-family:var(--f-tit);font-weight:800;font-size:clamp(28px,2.9vw,40px);line-height:1;
  color:var(--ink);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.k-so span{font-size:13.5px;color:var(--ink-3)}
.k-vai{font-size:13.5px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}

.kenh-them{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:16px}
.kenh-them div{display:flex;align-items:baseline;gap:7px}
.kenh-them b{font-family:var(--f-tit);font-weight:800;font-size:17px;color:var(--vang);letter-spacing:-.02em}
.kenh-them span{font-size:13.5px;color:var(--ink-3)}

@media(max-width:860px){
  .kenh4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kenh4 .k:nth-child(3),.kenh4 .k:nth-child(4){border-top:1px solid rgba(249,245,240,.09)}
  .kenh4 .k:nth-child(odd){border-left:0}
}
@media(max-width:420px){
  .kenh4 .k{padding:15px 14px}
  .k-so b{font-size:29px}
}

/* Dấu hiệu là nút về trang chủ. Thêm trạng thái rê chuột vì trước đó
   nhìn không ra là bấm được. */
.logo{transition:opacity .2s var(--ease)}
.logo:hover{opacity:.82}
.logo:hover .dn{opacity:.82}
.logo:focus-visible{outline:2px solid var(--vang);outline-offset:4px;border-radius:8px}

/* ===== Khối Cộng đồng trên trang chủ ===== */
/* Khối ảnh các nhà sáng lập. Đây là chỗ người xem tự hỏi mình có thuộc về đây
   không, nên tách hẳn ra bằng một mảng nền riêng: quầng sáng vàng ở giữa cho
   mắt dừng lại, lưới chấm thưa lấy từ hoa văn chung của trang, và một vệt sáng
   mảnh chạy ngang ở mép trên dưới để đóng khung khối. */
.cd-mat{position:relative;margin-top:46px;padding:52px 0 44px;isolation:isolate}
.cd-mat::before{content:"";position:absolute;inset:-1px 50% auto 50%;z-index:-2;
  width:100vw;height:calc(100% + 2px);transform:translateX(-50%);
  background:
    radial-gradient(74% 98% at 50% 46%,rgba(242,177,74,.20) 0%,rgba(242,177,74,.07) 44%,transparent 74%),
    radial-gradient(rgba(242,177,74,.30) 1.2px,transparent 1.7px),
    linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  background-size:auto,22px 22px,auto}
/* Hai vệt sáng mảnh đóng khung trên dưới, đậm ở giữa rồi tan dần ra hai mép. */
.cd-mat::after{content:"";position:absolute;inset:0 50% auto 50%;z-index:-1;
  width:100vw;height:100%;transform:translateX(-50%);pointer-events:none;
  border-top:1px solid transparent;border-bottom:1px solid transparent;
  background:
    linear-gradient(90deg,transparent,rgba(242,177,74,.55),transparent) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(242,177,74,.34),transparent) bottom/100% 1px no-repeat}
@media(max-width:900px){
  .cd-mat{padding:38px 0 32px;margin-top:34px}
  .cd-mat::before{background-size:auto,18px 18px,auto}
}
/* Lưới ảnh so le, dựng theo dải ảnh đầu trang Cộng đồng Next Gen Founder.
   Bảy cột: ba trái, Coach Duy ở giữa rộng hơn hẳn, ba phải. Mỗi cột tụt xuống
   một khoảng --pt khác nhau nên hàng ảnh gợn sóng chứ không thẳng băng.
   Số cột do dung.py ghi thẳng vào từng thẻ, xem ghi chú ở đó. */
.mn{position:relative;display:grid;gap:14px;align-items:start;margin-top:6px;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.62fr) repeat(3,minmax(0,1fr))}
/* Mỗi cột là một chồng dọc tự lo phần xếp ảnh của mình, nên lưới chỉ cần đúng
   một hàng. Cột nào hai ảnh thì tự cao hơn, không phải khai báo chiếm hai hàng. */
.mn-c{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;
  padding-top:var(--pt,0px)}

/* Vạch dọc mảnh chạy sau ảnh, cho khoảng trống có nhịp chứ không rỗng.
   Đặt làm ô của lưới rồi đẩy sang mép phải, khỏi phải tính toạ độ bằng tay. */
.mn-vach{justify-self:end;align-self:stretch;width:1px;margin:-44px -7px -52px 0;z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--line) 7%,var(--line) 88%,transparent)}

.mn-t{position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--bg-2);
  border:1px solid var(--line)}
.mn-t.mn-cao{aspect-ratio:3/4}
.mn-t.mn-vuong{aspect-ratio:1}
.mn-t img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;
  transition:filter .5s var(--ease),transform .6s var(--ease)}
@media(hover:hover){.mn-t:hover img{filter:saturate(1.08) brightness(1.06);transform:scale(1.04)}}

/* Thẻ giữa: ảnh cắt nền đứng chạm đáy, cao hơn và nổi hơn hai bên. */
.mn-t.mn-cat{aspect-ratio:1/1.42;border-color:transparent;
  background:linear-gradient(170deg,var(--bg-3),var(--bg-2) 62%);
  box-shadow:0 22px 52px rgba(0,0,0,.42)}
.mn-t.mn-cat::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.mn-t.mn-cat img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;
  object-fit:contain;object-position:bottom;transform:translateX(-50%)}
@media(hover:hover){.mn-t.mn-cat:hover img{transform:translateX(-50%) scale(1.03)}}
.mn-ten{position:absolute;left:9px;right:9px;bottom:9px;z-index:2;padding:8px 10px;
  border-radius:var(--r-s);background:rgba(18,14,11,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  font-family:var(--f-tit);font-size:13px;font-weight:700;line-height:1.25;color:var(--ink)}
.mn-ten span{display:block;font-family:var(--f-than);font-weight:400;font-size:11.5px;
  line-height:1.35;color:var(--ink-3);margin-top:3px;letter-spacing:0}
.cd-ghi{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-3);text-align:center;
  max-width:70ch;margin-inline:auto}

.cd-nhip{margin-top:52px}
.cd-nhip h3,.cd-14 h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(20px,2.2vw,26px);
  line-height:1.2;margin-bottom:22px;letter-spacing:-.01em;text-wrap:pretty}
.cd-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cd-luoi > div{background-image:var(--paper);background-color:var(--panel);padding:20px 20px 22px}
.cd-luoi b{display:block;font-family:var(--f-tit);font-weight:700;font-size:17px;
  color:var(--ink);margin-bottom:8px}
.cd-luoi p{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.cd-ket{margin-top:16px;font-size:14.5px;color:var(--ink-3)}

.cd-14{margin-top:48px}
.b14{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  list-style:none;counter-reset:b}
.b14 li{counter-increment:b;padding-top:16px;border-top:2px solid var(--line-2);position:relative}
.b14 li::before{content:counter(b,decimal-leading-zero);position:absolute;top:-11px;left:0;
  background:var(--bg);padding-right:9px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--vang)}
.b14 b{display:block;font-family:var(--f-than);font-size:16px;font-weight:700;
  color:var(--ink);margin-bottom:6px;letter-spacing:0;text-transform:none}
.b14 span{font-family:var(--f-than);font-size:14.5px;line-height:1.6;color:var(--ink-3);
  letter-spacing:0;text-transform:none}

@media(max-width:1000px){
  .cd-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b14{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media(max-width:640px){
  .cd-luoi{grid-template-columns:1fr}
  .b14{grid-template-columns:1fr}
  .cd-nhip{margin-top:40px}
}

/* ===== Hero: ảnh tách nền đứng lớn, chữ dồn về trái ===== */
/* Nằm trong cột nội dung nên right:0 là mép cột, không phải mép màn hình.
   Trước đây neo vào mép màn hình làm chữ và người dạt xa nhau ở màn rộng. */
.hero-nguoi{position:absolute;right:0;bottom:96px;z-index:0;width:min(42%,470px);
  max-height:calc(100% - 190px);pointer-events:none;
  display:flex;align-items:flex-end;justify-content:flex-end}
.hero-nguoi img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:bottom;display:block;
  filter:saturate(1.04) contrast(1.05) drop-shadow(-24px 0 60px rgba(23,18,15,.85));
  -webkit-mask-image:linear-gradient(to bottom,#000 0 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0 82%,transparent 100%)}

@media(min-width:1000px){
  /* Chữ dồn về trái để không đè lên người. Dưới 1000px thì quay lại canh giữa
     và ẩn ảnh tách nền, vì khổ hẹp không đủ chỗ cho hai thứ cạnh nhau. */
  #hero .hero-giua{position:relative;z-index:1;text-align:left;max-width:min(56%,620px)}
  #hero .hero-giua .bang-hieu{justify-content:flex-start}
  #hero h1{margin-left:0;margin-right:0}
  #hero .hero-nut{justify-content:flex-start}
  .hero-nen img{object-position:22% 34%}
}
@media(max-width:999px){
  .hero-nguoi{display:none}
}

/* ===== Dải khách hàng, chạy liên tục =====
   Danh sách đứng yên chiếm quá nhiều chỗ cho một phần chỉ để tham khảo.
   Cho chạy ngang thì gọn còn một dòng mà vẫn đọc được hết tên. */
.kh{background:var(--bg-2);border-block:1px solid var(--line);padding:30px 0 28px;
  overflow:hidden}
.kh-dan{text-align:center;max-width:52ch;margin:0 auto 18px;font-size:14px;line-height:1.6;
  color:var(--ink-3)}
.kh-chay{display:flex;width:max-content;animation:kh-truot 62s linear infinite}
.kh-chay:hover{animation-play-state:paused}
.kh-day{display:flex;flex-shrink:0}
.kh-t{font-family:var(--f-than);font-size:16px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;letter-spacing:.005em}
.kh-t::after{content:"·";margin:0 18px;color:var(--vang);opacity:.5}
@keyframes kh-truot{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .kh-chay{animation:none;width:100%;overflow-x:auto;padding-inline:20px}
  .kh-day:last-child{display:none}
}
@media(max-width:560px){
  .kh{padding:24px 0 22px}
  .kh-t{font-size:15px}
  .kh-t::after{margin:0 13px}
}

/* ===== Học vấn và chứng chỉ ===== */
.hv{display:grid;gap:0;border-top:1px solid var(--line)}
.hv-d{display:grid;grid-template-columns:92px minmax(0,1fr);gap:22px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:start}
.hv-d > b{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--vang);
  font-variant-numeric:tabular-nums;padding-top:2px}
.hv-d h4{font-family:var(--f-tit);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:5px}
.hv-d h4 span{font-family:var(--f-than);font-weight:400;font-size:14px;color:var(--ink-3);
  margin-left:8px;letter-spacing:0}
.hv-d p{font-size:15px;line-height:1.6;color:var(--ink-2)}
@media(max-width:620px){
  .hv-d{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .hv-d > b{padding-top:0}
}

/* Hai dòng trên bảng đèn thương hiệu, đặt ở chân trang như một dấu hiệu nhận
   diện. Trước đây nằm ở hero, chiếm hai dòng mà không nói thêm điều gì. */
.ft-bang{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}
.ft-bang i{width:16px;height:1px;background:var(--line-2);display:inline-block}

.moc-tg{margin-top:8px}
/* ===== Dòng thời gian xếp dọc, kèm ảnh =====
   Xếp dọc chứ không cuộn ngang: trên điện thoại, thanh cuộn ngang hay bị bỏ sót,
   người đọc không biết còn nội dung bên phải. Dọc thì cuộn tự nhiên trên mọi khổ. */
.mc-doc{display:grid;gap:0;margin-top:10px}
.mc-the{position:relative;display:grid;gap:8px 30px;
  grid-template-columns:154px minmax(0,1fr);
  padding:30px 0 30px 28px;border-left:2px solid var(--line);align-items:start}
.mc-the:first-child{padding-top:8px}
.mc-the:last-child{border-left-color:transparent;
  background:linear-gradient(var(--line),var(--line)) left top/2px 46px no-repeat}
/* chấm mốc trên đường dọc */
.mc-the::before{content:"";position:absolute;left:-7px;top:36px;width:12px;height:12px;
  border-radius:50%;background:var(--vang);box-shadow:0 0 0 4px var(--bg)}
.mc-the:first-child::before{top:14px}

.mc-ngay{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vang);padding-top:3px}
.mc-chu h4{font-family:var(--f-tit);font-weight:700;font-size:20px;line-height:1.25;
  color:var(--ink);margin-bottom:8px;text-wrap:pretty}
.mc-so{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.mc-chu > p:last-child{font-size:15.5px;line-height:1.68;color:var(--ink-2)}

/* Ảnh nằm cột thứ ba ở khổ rộng, xuống dưới chữ ở khổ hẹp. */
.mc-anh{grid-column:2;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);margin-top:16px;max-width:520px}
.mc-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;
  filter:saturate(.98) contrast(1.03);transition:transform .6s var(--ease),filter .4s var(--ease)}
@media(hover:hover){.mc-the:hover .mc-anh img{transform:scale(1.04);filter:saturate(1.08) brightness(1.05)}}

@media(min-width:1000px){
  /* Khổ rộng: ngày, chữ, ảnh nằm cùng một hàng. */
  .mc-the{grid-template-columns:150px minmax(0,1fr) 300px;gap:8px 32px;padding:26px 0 26px 28px}
  /* Ảnh 16:9 cho hàng gọn. Ảnh 4:3 cao hơn phần chữ nên hàng nào cũng dư khoảng trống. */
  .mc-anh{grid-column:3;grid-row:1 / span 2;margin-top:2px;max-width:none;aspect-ratio:16/10;
    align-self:start}
}
@media(max-width:620px){
  .mc-the{grid-template-columns:1fr;gap:6px;padding:24px 0 24px 20px}
  .mc-anh{grid-column:1;aspect-ratio:16/9}
  .mc-chu h4{font-size:18px}
}
/* Mốc chưa có ảnh: chữ trải hết bề ngang, không để khung trống. */
@media(min-width:1000px){
  .mc-the.mc-khong{grid-template-columns:150px minmax(0,1fr)}
}

/* Ảnh bàn làm việc: người ngồi lệch phải, neo theo đó để không cắt mất mặt. */
.mc-the img[src*="banlamviec"]{object-position:62% 45%}

/* Con số tổng đứng đầu dải, bốn kênh thành phần chia nhỏ bên dưới. */
/* Số trên, nhãn dưới, cùng canh giữa. Đặt cạnh nhau thì con số nặng hơn
   nhãn rất nhiều nên nhìn luôn thấy lệch, dù canh theo cách nào. */
.so-tong{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;margin-bottom:24px;text-align:center}
.so-tong b{font-family:var(--f-tit);font-weight:800;
  font-size:clamp(42px,5.4vw,68px);line-height:1;letter-spacing:-.04em;
  color:var(--vang);font-variant-numeric:tabular-nums}
.so-tong span{font-size:clamp(14px,1.5vw,17px);color:var(--ink-2);line-height:1.4}

@media(max-width:560px){ .so-tong{margin-bottom:20px} }

/* Ảnh tròn chỉ dùng ở khổ hẹp, nơi ảnh tách nền không đủ chỗ đứng.
   Từ 1000px trở lên đã có ảnh tách nền lớn bên phải nên ẩn ảnh tròn đi. */
@media(min-width:1000px){ #hero .hero-avt{display:none} }
@media(max-width:999px){
  #hero .hero-avt{display:block;width:112px;height:112px;border-radius:50%;overflow:hidden;
    margin:0 auto 20px;border:2px solid var(--vang);box-shadow:var(--shadow-v)}
  #hero .hero-avt img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
    display:block;filter:saturate(1.06) contrast(1.04)}
}
/* Đơn vị đi liền con số, không để "theo dõi" rớt xuống hai dòng. */
.k-so span{white-space:nowrap}
@media(max-width:560px){
  .k-so{flex-wrap:wrap;gap:2px 6px}
  .k-so b{font-size:26px}
}

/* Chín ảnh thì chỉ 9 cột hoặc 3 cột mới chia hết. Các số khác đều để lại
   một hàng cụt, nhìn lệch. */
/* Dưới 900px thì bảy cột quá chật. Bỏ cột đi, cho tất cả thẻ vào một lưới bốn
   cột, thẻ Coach Duy chiếm hai cột hai hàng ở giữa hàng trên, tám ảnh còn lại
   tự chảy quanh: hai bên hàng trên, rồi bốn cái hàng dưới. Vẫn cân hai bên. */
@media(max-width:900px){
  .mn{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
    grid-auto-flow:row dense;max-width:620px;margin-inline:auto}
  .mn-c,.mn-c.mn-giua{display:contents}
  .mn-vach{display:none}
  .mn-t.mn-cao,.mn-t.mn-vuong{aspect-ratio:1}
  .mn-c,.mn-c.mn-giua{grid-column:auto!important}
  .mn-c.mn-giua .mn-t.mn-cat{grid-column:2/4;grid-row:1/3;aspect-ratio:1}
  .mn-ten{left:8px;right:8px;bottom:8px;padding:8px 10px;font-size:13px}
  .mn-ten span{font-size:12px}
}
@media(max-width:420px){
  .mn{gap:8px}
  .mn-ten{font-size:12px;padding:6px 8px}
  .mn-ten span{font-size:11px}
}

/* ===== Nhãn dài thì thôi dùng font máy chữ =====
   Đo ngày 25/08/2026: font máy chữ viết hoa kèm giãn chữ đọc tốt tới khoảng
   20 ký tự tiếng Việt. Dài hơn thì dấu bị chật, mắt phải dò từng chữ.
   Sáu chỗ dưới đây đều vượt ngưỡng đó. */
.mono-dai,.tang-dai{font-family:var(--f-than) !important;font-size:13.5px !important;
  font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important;
  line-height:1.55}
.banh-ghi,.tt,.khong b,.kh-them{font-family:var(--f-than);letter-spacing:0;
  text-transform:none}
.banh-ghi{font-size:14px;line-height:1.6}
.tt{font-size:13.5px}
.khong b{font-size:13.5px;font-weight:700}
.kh-them{font-size:13.5px}

/* Bảng hiệu thương hiệu ở hero: khổ rộng thì bám trái theo cột chữ và nhỏ lại,
   để không dựng lại chồng năm khối chữ như bản đầu. */
@media(min-width:1000px){
  #hero .bang-hieu{margin-left:0;margin-right:0;margin-top:18px;max-width:none}
  #hero .bang-hieu .vach{margin-left:0;max-width:280px}
  #hero .bang-hieu .danh-xung{font-size:clamp(16px,1.55vw,20px)}
  #hero .bang-hieu .khau-hieu{font-size:clamp(12.5px,1.05vw,14.5px)}
}

/* ===== Năm việc của người cố vấn ===== */
/* Hàng thẻ chọn ở trên, một khối ảnh lớn kèm chữ ở dưới. Bản trước dùng vòng
   tròn chia năm miếng, chiếm gần nửa bề ngang chỉ để hiện năm con số, nên ảnh
   bị ép nhỏ. Bỏ vòng tròn thì ảnh rộng gấp đôi mà khối lại thấp hơn. */
.v5{margin-top:32px}
.v5-tab{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  border-bottom:1px solid var(--line);margin-bottom:30px}
.v5-tab::-webkit-scrollbar{display:none}
.v5-chip{flex:1 1 0;min-width:132px;display:flex;flex-direction:column;gap:5px;
  align-items:flex-start;text-align:left;padding:14px 16px 15px;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:border-color .24s var(--ease),background .24s var(--ease)}
.v5-chip i{font-family:var(--f-mono);font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--ink-2);transition:color .24s var(--ease)}
.v5-chip span{font-family:var(--f-tit);font-weight:700;font-size:16px;line-height:1.25;
  color:var(--ink);transition:color .24s var(--ease)}
@media(hover:hover){.v5-chip:hover span{color:var(--ink)}.v5-chip:hover i{color:var(--ink-2)}}
.v5-chip:focus-visible{outline:2px solid var(--vang);outline-offset:-3px;border-radius:var(--r-s)}
.v5-chip.chon{border-bottom-color:var(--vang);background:rgba(242,177,74,.06)}
.v5-chip.chon i{color:var(--vang)}
.v5-chip.chon span{color:var(--ink)}

.v5-bang{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:44px;
  align-items:center}
.v5-bang[hidden]{display:none}
.v5-anh{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line)}
.v5-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.v5-so{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vang);margin-bottom:10px}
.v5-chu h4{font-family:var(--f-tit);font-weight:700;font-size:30px;line-height:1.18;
  color:var(--ink);margin-bottom:14px;text-wrap:pretty}
.v5-chu > p:last-child{font-size:16.5px;line-height:1.72;color:var(--ink-2)}

@media(max-width:900px){
  .v5-bang{grid-template-columns:1fr;gap:24px}
  .v5-chu h4{font-size:24px}
  .v5-chu > p:last-child{font-size:15.5px}
  .v5-chip{flex:0 0 auto;min-width:0;padding:12px 14px 13px}
  .v5-chip span{font-size:15px}
  .v5-tab{margin-bottom:24px}
}

/* ===== Chuẩn căn lề =====
   Mọi đoạn chữ đọc đều căn đều hai bên, ở mọi khổ màn hình kể cả điện thoại.
   Tiếng Việt tách theo âm tiết nên mỗi dòng có rất nhiều chỗ giãn nhỏ, khoảng
   trắng rải đều chứ không hở thành khe lớn như tiếng Anh. Vì vậy không cần
   chừa khổ hẹp ra như bản trước.

   Lấy khối bao .bd và .bai-than làm gốc thay vì kể tên từng lớp, để trang thêm
   sau cũng tự đúng. Bên dưới là danh sách những chỗ phải trừ ra. */
.bd p, .bd li, .bai-than p, .bai-than li{text-align:justify;text-justify:inter-word;hyphens:none}

/* Trừ ra: chữ căn giữa, dòng thông tin, nhãn ngắn, chú thích, và danh sách
   điều hướng. Chỉ trừ những chỗ thật sự một hai dòng, vì căn đều một dòng lẻ
   thì chữ giãn ra nhìn rất rõ. Chữ trong thẻ giới thiệu vẫn căn đều, vì thường
   dài ba bốn dòng. */
/* Nhóm căn giữa: giữ nguyên căn giữa của chính nó. Phải ghi kèm .bd vì
   quy tắc căn đều ở trên dùng .bd p, độ ưu tiên cao hơn một lớp đơn. */
.phan-dau p, .bd .kh-dan, .bd .cd-ghi{text-align:center;text-justify:auto}
/* Nhãn nhỏ mở khối: căn giữa theo khối và trả lại màu vàng của .mono, vì
   .phan-dau p vốn đè lên cả hai. Các nhãn nhỏ khác trên trang đều màu vàng. */
.bd .phan-dau .mono, .phan-dau p.mono{text-align:center;color:var(--vang)}
/* Nhóm căn trái: nhãn, dòng thông tin, chú thích, danh sách điều hướng. */
.bd .meta, .bd .mono, .bd .k-vai, .bd .hst-en, .bd .v5-so,
.bd .hero-ghi p, .bd .bang-hieu p, .bd .nut, .bd figcaption, .bd .bai-cuoi p,
.bd .mc-so, .dau-trang .mono, .bd .muc-luc li, .bd .muc-luc b, .bd nav li,
.bd .vach li, .bd .vi, .bd .tang, .bd .k-so span,
.meta, .mono, .k-vai, .hst-en, .v5-so, .nut, figcaption,
.muc-luc li, .muc-luc b, nav li, .vach li, .vi, .tang{text-align:left;text-justify:auto}

/* Chữ trong ô hẹp dưới 34 ký tự thì luôn căn trái, dù nằm trong .bd */
.so-tong span, .kenh4 p, .kenh-them p, .k-so span{text-align:left}

/* ===== Trang Podcast ===== */
/* Dựng theo mẫu trang phim tài liệu Coach Duy chọn: mở đầu tràn màn hình,
   sáu dải chuyên mục ảnh tràn viền, chữ hiển thị viết hoa cỡ lớn. */
.pd-hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--line)}
.pd-nen{position:absolute;inset:0}
.pd-nen img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:saturate(.85) brightness(.9)}
.pd-nen::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(23,18,15,.95) 0%,rgba(23,18,15,.78) 44%,rgba(23,18,15,.34) 100%),
  linear-gradient(180deg,rgba(23,18,15,.42) 0%,transparent 34%,rgba(23,18,15,.97) 100%)}
.pd-hero-in{position:relative;z-index:1;padding-block:104px 88px}
.pd-hero h1{font-size:clamp(40px,5.8vw,84px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;margin-top:18px}
.pd-dan{margin-top:22px;max-width:52ch;font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.pd-nut-hang{display:flex;gap:22px;margin-top:32px;flex-wrap:wrap;align-items:center}
/* Hàng số kiểm được, đứng chỗ dải huy hiệu trong mẫu gốc */
.pd-hieu{display:flex;gap:12px 30px;margin-top:48px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.pd-hieu b{color:var(--vang);font-weight:600}
.pd-cuon{position:absolute;right:24px;bottom:26px;z-index:1;writing-mode:vertical-rl;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:44px}
.pd-cuon::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;
  background:linear-gradient(180deg,var(--ink-3),transparent)}

/* Hàng mở đầu danh sách chuyên mục */
.pd-muc-dau{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:26px 0 16px;flex-wrap:wrap}
.pd-ghi{font-size:13.5px;color:var(--ink-3)}

/* Dải chuyên mục: ảnh tràn hết bề ngang, chữ theo khung trang.
   Cả dải là một liên kết mở kênh YouTube. */
.pd-band{position:relative;display:flex;align-items:center;text-decoration:none;
  min-height:clamp(210px,24vw,320px);overflow:hidden;isolation:isolate}
.pd-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.85) brightness(.78);
  transition:transform .7s var(--ease),filter .7s var(--ease)}
.pd-band::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(23,18,15,.93) 0%,rgba(23,18,15,.6) 46%,rgba(23,18,15,.18) 100%)}
.pd-band + .pd-band{border-top:1px solid rgba(249,245,240,.09)}
@media(hover:hover){
  .pd-band:hover > img{transform:scale(1.04);filter:saturate(1) brightness(.94)}
  .pd-band:hover .pd-chu h3{color:var(--vang-2)}
}
.pd-band:focus-visible{outline:2px solid var(--vang);outline-offset:-3px}
.pd-band .bd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:26px;align-items:center;padding-top:34px;padding-bottom:34px}
.pd-cham{width:13px;height:13px;border-radius:50%;border:1px solid var(--vang);
  position:relative;flex:0 0 auto}
.pd-cham::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--vang)}
.pd-nhan{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vang);margin-bottom:9px}
.pd-chu h3{font-family:var(--f-tit);font-weight:800;font-size:clamp(23px,3vw,38px);
  line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);
  transition:color .3s var(--ease)}
.pd-mo{margin-top:9px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.pd-dem{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-variant-numeric:tabular-nums}
.pd-dem b{color:var(--vang);font-weight:600}
.pd-dem i{width:24px;height:1px;background:var(--line-2)}

/* Khối cuối: khung xem kênh với nút chạy */
.pd-cuoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:46px;
  align-items:center}
.pd-xem{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.pd-xem img{width:100%;height:100%;object-fit:cover;filter:brightness(.68) saturate(.9);
  transition:filter .5s var(--ease),transform .6s var(--ease)}
.pd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;border:1px solid rgba(249,245,240,.55);
  background:rgba(23,18,15,.5);backdrop-filter:blur(5px);
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
.pd-play::after{content:"";margin-left:5px;
  border-left:17px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;
  transition:border-left-color .3s var(--ease)}
@media(hover:hover){
  .pd-xem:hover img{filter:brightness(.82) saturate(1);transform:scale(1.03)}
  .pd-xem:hover .pd-play{background:var(--vang);border-color:var(--vang)}
  .pd-xem:hover .pd-play::after{border-left-color:var(--bg)}
}

@media(max-width:900px){
  .pd-hero{min-height:72vh}
  .pd-hero-in{padding-block:84px 70px}
  .pd-cuon{display:none}
  .pd-band .bd{grid-template-columns:minmax(0,1fr) auto;gap:18px;
    padding-top:26px;padding-bottom:26px}
  .pd-cham{display:none}
  .pd-cuoi{grid-template-columns:1fr;gap:28px}
  .pd-hieu{gap:10px 20px}
}
@media(max-width:560px){
  .pd-mo{font-size:14px}
  .pd-dem{display:none}
  .pd-band{min-height:190px}
}
@media(prefers-reduced-motion:reduce){
  .pd-band > img,.pd-xem img,.pd-play{transition:none}
}

/* ===== Rạp xem tập tại trang ===== */
/* Khung phát bên trái, mô tả với lời mời bên phải. Bấm một tập ở lưới dưới thì
   khung này đổi sang tập đó và phát ngay tại trang, không rời sang YouTube. */
.pd-rap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;
  align-items:start;padding-top:8px}
.pd-man{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:#000;border:1px solid var(--line);box-shadow:var(--shadow)}
.pd-man iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pd-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:#000;cursor:pointer;display:block}
.pd-poster img{width:100%;height:100%;object-fit:cover;filter:brightness(.78);
  transition:filter .4s var(--ease),transform .5s var(--ease)}
.pd-poster .pd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(hover:hover){
  .pd-poster:hover img{filter:brightness(.92);transform:scale(1.02)}
  .pd-poster:hover .pd-play{background:var(--vang);border-color:var(--vang)}
  .pd-poster:hover .pd-play::after{border-left-color:var(--bg)}
}
.pd-rap-chu h2{font-size:clamp(22px,2.5vw,30px);line-height:1.16;margin-top:8px}
.pd-rap-mo{margin-top:12px;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.pd-lydo{margin:18px 0 22px;padding:14px 18px;border-left:3px solid var(--vang);
  background:var(--vang-mo);border-radius:0 var(--r-s) var(--r-s) 0}
.pd-lydo b{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:6px}
.pd-lydo p{font-size:14.5px;line-height:1.62;color:var(--ink-2)}

/* Lưới tập */
.pd-tap-dau{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  flex-wrap:wrap;margin-top:46px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pd-tap-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:22px}
.pd-tap{display:block;text-decoration:none;border-radius:var(--r-s);outline-offset:3px}
.pd-tap-anh{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-s);
  overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.pd-tap-anh img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.95);
  transition:filter .4s var(--ease),transform .5s var(--ease)}
.pd-tap-play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(23,18,15,.72);border:1px solid rgba(249,245,240,.4);
  display:grid;place-items:center;transition:background .3s var(--ease)}
.pd-tap-play::after{content:"";margin-left:2px;border-left:9px solid var(--ink);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
@media(hover:hover){
  .pd-tap:hover .pd-tap-anh img{filter:brightness(1) saturate(1);transform:scale(1.04)}
  .pd-tap:hover .pd-tap-play{background:var(--vang)}
  .pd-tap:hover b{color:var(--vang-2)}
}
.pd-tap.chon .pd-tap-anh{border-color:var(--vang);box-shadow:0 0 0 1px var(--vang)}
.pd-tap-so{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin:12px 0 5px}
.pd-tap b{display:block;font-family:var(--f-tit);font-weight:700;font-size:16.5px;
  line-height:1.3;color:var(--ink);transition:color .3s var(--ease)}

@media(max-width:900px){
  .pd-rap{grid-template-columns:1fr;gap:24px}
  .pd-tap-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:560px){
  .pd-tap-luoi{grid-template-columns:1fr}
}

/* Bộ lọc và lật trang của lưới tập */
.pd-lat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pd-loc-xoa{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);background:none;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;cursor:pointer;
  transition:color .24s var(--ease),border-color .24s var(--ease)}
.pd-loc-xoa:hover{color:var(--ink);border-color:var(--vang)}
.pd-mui{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);
  background:none;color:var(--ink);font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:border-color .24s var(--ease),background .24s var(--ease)}
.pd-mui:hover:not(:disabled){border-color:var(--vang);background:var(--vang-mo)}
.pd-mui:disabled{opacity:.32;cursor:default}
.pd-trang{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.pd-band{cursor:pointer}

/* ===== Khối tập podcast liên quan, ở cuối mỗi bài viết ===== */
/* Một thẻ ngang: ảnh bìa bên trái, nhãn chuyên mục, tên tập và lý do nên xem.
   Bấm vào đi thẳng tới đúng tập trên trang podcast, không phải trang chung. */
.lq-tap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px;
  align-items:center;max-width:74ch;margin:0 auto;padding:20px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.lq-anh{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-s);
  overflow:hidden;background:var(--bg-3)}
.lq-anh img{width:100%;height:100%;object-fit:cover;filter:brightness(.86);
  transition:filter .4s var(--ease),transform .5s var(--ease)}
.lq-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:rgba(23,18,15,.66);
  border:1px solid rgba(249,245,240,.45);display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.lq-play::after{content:"";margin-left:3px;border-left:12px solid var(--ink);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  transition:border-left-color .3s var(--ease)}
@media(hover:hover){
  .lq-tap:hover{border-color:var(--vang);background:var(--vang-mo)}
  .lq-tap:hover .lq-anh img{filter:brightness(1);transform:scale(1.04)}
  .lq-tap:hover .lq-play{background:var(--vang);border-color:var(--vang)}
  .lq-tap:hover .lq-play::after{border-left-color:var(--bg)}
}
.lq-chu{display:block}
.lq-nhan{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vang);margin-bottom:8px}
.lq-tap b{display:block;font-family:var(--f-tit);font-weight:700;font-size:19px;
  line-height:1.28;color:var(--ink);margin-bottom:7px}
.lq-mo{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.lq-di{display:inline-block;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--vang)}
@media(max-width:760px){
  .lq-tap{grid-template-columns:1fr;gap:16px;padding:16px}
}

/* ===== Mở rộng khung phát và toàn màn hình ===== */
/* CDN muốn khung video không bị đóng cứng trong một ô nhỏ. Có hai mức: mở rộng
   khung ra hết bề ngang trang, và toàn màn hình như trình phát thường thấy. */
.pd-khung{display:flex;flex-direction:column;gap:0}
.pd-dieu{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.pd-nut-man{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.pd-nut-man:hover{color:var(--vang);border-color:var(--vang)}
.pd-nut-man[aria-pressed="true"]{color:var(--vang);border-color:var(--vang);background:var(--vang-mo)}
.pd-bieu{width:13px;height:11px;border:1.5px solid currentColor;border-radius:2px;flex:none}
.pd-bieu-toan{border:0;position:relative}
.pd-bieu-toan::before,.pd-bieu-toan::after{content:"";position:absolute;width:5px;height:5px;
  border:1.5px solid currentColor}
.pd-bieu-toan::before{left:0;top:0;border-right:0;border-bottom:0}
.pd-bieu-toan::after{right:0;bottom:0;border-left:0;border-top:0}

/* Mức một: khung chiếm hết bề ngang trang, phần chữ tụt xuống dưới. */
.pd-rap.rong{grid-template-columns:1fr;gap:30px}
.pd-rap.rong .pd-khung{width:100vw;margin-left:calc(50% - 50vw)}
.pd-rap.rong .pd-man{border-radius:0;border-left:0;border-right:0;
  max-height:calc(100vh - 190px)}
.pd-rap.rong .pd-dieu{width:min(100% - 40px,var(--w));margin-left:auto;margin-right:auto}
.pd-rap.rong .pd-rap-chu{max-width:72ch}
@media(max-width:900px){
  /* Dưới mức này khung đã chiếm hết bề ngang sẵn, nên nút mở rộng không còn việc
     gì để làm. Để lại một nút bấm vào không thấy gì đổi thì tệ hơn là bỏ đi. */
  #pd-rong{display:none}
  .pd-rap.rong{gap:24px}
  .pd-rap.rong .pd-khung{width:auto;margin-left:0}
  .pd-rap.rong .pd-man{border-radius:var(--r);border-left:1px solid var(--line);
    border-right:1px solid var(--line)}
  .pd-rap.rong .pd-dieu{width:auto}
}

/* Mức hai: toàn màn hình. Trình duyệt tự phủ đen phần thừa, chỉ cần bỏ tỉ lệ cố
   định để khung nở hết chiều cao. */
.pd-man:fullscreen{aspect-ratio:auto;width:100%;height:100%;border:0;border-radius:0;
  max-height:none}
.pd-man:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;border:0;border-radius:0}

/* ===== Phiếu phương pháp ===== */
/* CDN muốn mỗi phương pháp rõ ràng như dải chuyên mục bên Podcast, nhưng không
   giống y hệt. Cách khác: mỗi phương pháp có một hình dạng riêng, nên vẽ đúng
   hình đó. Tam giác vẽ thành tam giác, công thức vẽ thành phân số, ba bước vẽ
   thành ba bước nối nhau. Hình mang nghĩa, không phải trang trí. */
.pp-bo{display:flex;flex-direction:column;gap:20px;margin-top:34px}
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:38px;
  align-items:center;padding:32px 34px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2);position:relative;overflow:hidden}
.pp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vang)}
.pp-dau{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.pp-so{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--vang);font-variant-numeric:tabular-nums}
.pp-ten{font-family:var(--f-tit);font-weight:800;font-size:clamp(21px,2.3vw,29px);
  line-height:1.1;color:var(--ink)}
.pp-mo{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:52ch}
.pp-khi{margin-top:16px;padding:12px 16px;border-left:2px solid var(--vang);
  background:var(--vang-mo);border-radius:0 var(--r-s) var(--r-s) 0}
.pp-khi b{display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:5px}
.pp-khi p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.pp-hinh{display:grid;place-items:center;min-height:190px}

/* Hình 1: công thức tin cậy, vẽ thành phân số thật */
.ct-ps{display:inline-flex;align-items:center;gap:16px;
  font-family:var(--f-tit);font-weight:700;color:var(--ink)}
.ct-t{font-size:clamp(30px,4vw,46px);color:var(--vang)}
.ct-bang{font-size:clamp(24px,3vw,34px);color:var(--ink-3)}
.ct-chia{display:flex;flex-direction:column;align-items:center;gap:9px}
.ct-tren{display:flex;align-items:center;gap:9px}
.ct-vach{align-self:stretch;height:1px;background:var(--vang);opacity:.75}
.ct-o{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(249,245,240,.03);min-width:58px}
.ct-o i{font-family:var(--f-tit);font-style:normal;font-weight:800;
  font-size:19px;color:var(--vang)}
.ct-o span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.ct-cong{font-size:20px;color:var(--ink-3)}
.ct-o.pha{border-color:rgba(242,177,74,.45)}
.ct-o.pha i{color:var(--ink)}
.ct-ghi{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:center}

/* Hình 2: tam giác vàng, vẽ thành tam giác thật */
.tg{position:relative;width:min(100%,290px);aspect-ratio:1/.9}
.tg svg{position:absolute;inset:0;width:100%;height:100%}
.tg-dinh{position:absolute;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-align:center;
  width:104px;margin-left:-52px}
.tg-dinh i{display:block;width:9px;height:9px;border-radius:50%;background:var(--vang);
  margin:0 auto 7px}
.tg-giua{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;width:132px;line-height:1.5}

@media(max-width:860px){
  .pp{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  .pp-hinh{min-height:auto;order:2}
}

/* Hình 3: bốn nguyên tắc, xếp thành bốn ô vuông */
.nt4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,300px)}
.nt4 div{padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(249,245,240,.03)}
.nt4 b{display:block;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;color:var(--vang);margin-bottom:6px}
.nt4 span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* Hình 4: ba điểm chạm, ba bước nối nhau theo đúng thứ tự */
.bc{display:flex;align-items:flex-start;gap:8px;width:min(100%,330px)}
.bc-o{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.bc-tron{width:46px;height:46px;border-radius:50%;border:1px solid var(--vang);
  display:grid;place-items:center;font-family:var(--f-tit);font-weight:800;
  font-size:16px;color:var(--vang);background:rgba(242,177,74,.08)}
.bc-o b{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);line-height:1.4}
.bc-o i{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.bc-mui{flex:0 0 auto;margin-top:22px;color:var(--vang);opacity:.7;font-size:15px}

/* Hình 5: REFLECT, một vòng quay ngược về chỗ còn thiếu */
.rf{width:min(100%,300px)}
.rf-hang{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rf-o{padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(249,245,240,.03);text-align:center}
.rf-o.vang{border-color:var(--vang);color:var(--vang)}
.rf-vong{position:relative;height:52px;margin-top:6px}
.rf-vong svg{position:absolute;inset:0;width:100%;height:100%}
.rf-ghi{margin-top:4px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:center}

@media(max-width:520px){
  /* Công thức là hình rộng nhất trong năm hình, thu lại cho vừa khung thẻ. */
  .ct-ps{gap:9px}
  .ct-o{min-width:0;padding:6px 8px}
  .ct-o i{font-size:16px}
  .ct-o span{font-size:8.5px;letter-spacing:.06em}
  .ct-tren{gap:5px}
  .ct-cong{font-size:15px}
  .bc{gap:4px}
  .bc-tron{width:40px;height:40px;font-size:14px}
  .bc-o b{font-size:9px}
  .bc-o i{font-size:10.5px}
  .nt4{grid-template-columns:1fr}
}

/* Hình 6: ba lăng kính, vẽ thành ba vòng giao nhau */
.lk{position:relative;width:min(100%,270px);aspect-ratio:1/.92}
.lk svg{position:absolute;inset:0;width:100%;height:100%}
.lk-ten{position:absolute;font-family:var(--f-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-align:center;
  width:92px;margin-left:-46px;line-height:1.35}
.lk-giua{position:absolute;left:50%;top:49.5%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vang);text-align:center;width:76px;line-height:1.35}

/* Hình 7: bốn cấp độ, vẽ thành bốn bậc chồng lên nhau */
.cd4{display:flex;flex-direction:column;align-items:center;gap:5px;width:min(100%,300px)}
.cd4 div{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border:1px solid var(--line);border-radius:3px;
  background:rgba(249,245,240,.03)}
.cd4 div:nth-child(1){width:70%}
.cd4 div:nth-child(2){width:80%}
.cd4 div:nth-child(3){width:90%}
.cd4 div:nth-child(4){width:100%}
.cd4 b{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);line-height:1.3}
.cd4 i{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vang);white-space:nowrap}
.cd4 div:nth-child(1) i,.cd4 div:nth-child(2) i{color:var(--vang)}
.cd4 div:nth-child(3) i,.cd4 div:nth-child(4) i{color:var(--ink-3)}
.cd4-truc{margin-top:12px;display:flex;justify-content:space-between;width:min(100%,300px);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
@media(max-width:520px){
  .cd4 div{padding:7px 10px}
  .cd4 b{font-size:8.5px}
  .cd4 i{font-size:8px}
}

/* Hình 8: năm tầng, vẽ thành một khối tam giác chia năm băng.
   Khác hình bốn cấp độ ở chỗ: bốn cấp là bốn bậc rời nhau, còn năm tầng là
   một khối liền, tầng trên đặt lên tầng dưới nên yếu dưới thì lung lay trên. */
.nt5{display:flex;align-items:center;gap:16px;width:min(100%,300px)}
.nt5-hinh{position:relative;flex:0 0 128px;aspect-ratio:1/1.02}
.nt5-hinh svg{position:absolute;inset:0;width:100%;height:100%}
.nt5-so{position:absolute;left:0;right:0;text-align:center;font-family:var(--f-mono);
  font-size:9.5px;font-weight:600;color:var(--vang);font-variant-numeric:tabular-nums}
.nt5-ds{flex:1;display:flex;flex-direction:column;gap:0}
.nt5-ds span{display:flex;gap:8px;align-items:baseline;padding:5px 0;
  border-bottom:1px solid rgba(249,245,240,.07);font-size:11.5px;line-height:1.35;
  color:var(--ink-2)}
.nt5-ds span:last-child{border-bottom:0}
.nt5-ds b{font-family:var(--f-mono);font-size:9px;font-weight:600;color:var(--vang);
  flex:0 0 16px;font-variant-numeric:tabular-nums}
@media(max-width:520px){
  .nt5{gap:12px}
  .nt5-hinh{flex:0 0 104px}
  .nt5-ds span{font-size:10.5px}
}

/* Dòng ghi nguồn cho phương pháp kế thừa từ người khác.
   CDN bắt đúng lỗi ngày 26/08/2026: công thức tin cậy là của Maister, Green
   và Galford, mà trang lại để dưới tiêu đề "Phương pháp Duy dùng" không ghi
   nguồn. Khung nào không phải của CDN thì phải có dòng này. */
.pp-nguon{margin-top:14px;padding-top:12px;border-top:1px solid rgba(249,245,240,.08);
  font-size:13px;line-height:1.6;color:var(--ink-3)}
.pp-nguon b{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
.pp-nguon i{font-style:italic;color:var(--ink-2)}

/* ===== Thư viện tài liệu trên trang Sách và tài liệu ===== */
/* Học từ trang Tool Box của scaleos.vn: khung phương pháp trở thành cách sắp
   xếp tài liệu. Khác chỗ này: lọc tại chỗ không tải lại trang, và bìa vẽ bằng
   chữ theo bảng màu thương hiệu thay vì ảnh dựng sẵn. */
.tl-loc{display:flex;gap:9px;flex-wrap:wrap;margin-top:34px}
.tl-nut{padding:9px 16px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:transparent;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.tl-nut:hover{color:var(--vang);border-color:var(--vang)}
.tl-nut.chon{color:var(--bg);background:var(--vang);border-color:var(--vang)}
.tl-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px}
.tl{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-2);overflow:hidden}
.tl-bia{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;min-height:118px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 85% -20%,rgba(242,177,74,.16),transparent 55%),
    rgba(249,245,240,.02)}
.tl-bia i{font-style:normal;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tl-bia b{font-family:var(--f-tit);font-weight:800;font-size:20px;line-height:1.12;
  color:var(--vang);max-width:16ch}
.tl-than{display:flex;flex-direction:column;flex:1;gap:9px;padding:18px}
.tl-than h3{font-family:var(--f-tit);font-weight:700;font-size:17.5px;line-height:1.28}
.tl-mo{font-size:13.5px;line-height:1.6;color:var(--ink-2);flex:1}
.tl-duoi{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:6px;flex-wrap:wrap}
.tl-tt{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:5px 10px;border:1px solid var(--line);
  border-radius:999px;white-space:nowrap}
.tl-tt.mo{color:var(--vang);border-color:rgba(242,177,74,.5);background:var(--vang-mo)}
@media(max-width:900px){.tl-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.tl-luoi{grid-template-columns:1fr}}

/* ===== Bảng mười điểm: người bán hàng và người cố vấn ===== */
/* Học cách trình bày hai cột đối chiếu từ trang chủ scaleos.vn. Chất liệu là
   bảng 10 điểm trong Brand Voice, tài sản có sẵn mà chưa từng lên trang. */
.ss10{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:36px;
  background:var(--bg-2)}
.ss10-dau{display:grid;grid-template-columns:1fr 1fr}
.ss10-dau span{padding:15px 20px;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.ss10-dau span+span{color:var(--vang);border-left:1px solid var(--line)}
.ss10 .h{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ss10 .h span{padding:13px 20px;font-size:14.5px;line-height:1.58;color:var(--ink-3)}
.ss10 .h span+span{color:var(--ink);border-left:1px solid var(--line);position:relative;
  padding-left:34px}
.ss10 .h span+span::before{content:"";position:absolute;left:18px;top:21px;width:6px;
  height:6px;border-radius:50%;background:var(--vang)}
@media(max-width:560px){
  .ss10-dau span{padding:11px 13px;font-size:9.5px}
  .ss10 .h span{padding:10px 13px;font-size:12.5px}
  .ss10 .h span+span{padding-left:26px}
  .ss10 .h span+span::before{left:12px;top:17px}
}

/* ===== Trang công cụ tự kiểm ===== */
.tk-nhom{margin-top:38px}
.tk-nhom h2{font-size:clamp(19px,2vw,24px)}
.tk-nhom .mono{margin-bottom:4px}
.tk-cau{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;margin-top:10px;
  border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.tk-cau input{margin-top:3px;width:16px;height:16px;accent-color:var(--vang);flex:none;
  cursor:pointer}
.tk-cau span{font-size:15px;line-height:1.6;color:var(--ink-2)}
.tk-cau:has(input:checked){border-color:var(--vang);background:var(--vang-mo)}
.tk-cau:has(input:checked) span{color:var(--ink)}
#tk-kq{margin-top:30px;padding:22px 24px;border:1px solid var(--vang);
  border-radius:var(--r);background:var(--vang-mo)}
#tk-kq .diem{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--vang);margin-bottom:12px}
#tk-kq h3{font-family:var(--f-tit);font-size:20px;margin-bottom:8px}
#tk-kq p{font-size:15px;line-height:1.65;color:var(--ink-2)}
#tk-kq p+p{margin-top:8px}

/* ===== Mục lục dính bên trái của bài viết ===== */
/* Màn hẹp dùng hộp gấp .muc-luc đầu bài, màn rộng giấu hộp đó đi và hiện cột
   này ở phần lề trái còn trống cạnh tờ giấy .doc. Mục đang đọc được site.js
   đánh dấu bằng vạch vàng. */
.ml-ben{display:none}
.doc h2[id]{scroll-margin-top:92px}
@media(min-width:1240px){
  .muc-luc{display:none}
  .bai-than{position:relative}
  .ml-ben{display:block;position:absolute;left:0;top:8px;bottom:0;width:150px}
  .ml-hop{position:sticky;top:96px}
  .ml-hop b{display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
  .ml-hop ol{list-style:none;margin:0;padding:0}
  .ml-hop li{margin:0}
  .ml-hop a{display:block;padding:6px 0 6px 11px;border-left:2px solid var(--line);
    font-size:12.5px;line-height:1.45;color:var(--ink-3);text-decoration:none;
    transition:color .25s var(--ease),border-color .25s var(--ease)}
  .ml-hop a:hover{color:var(--ink)}
  .ml-hop a.dang{color:var(--vang);border-left-color:var(--vang)}
}

/* ===== Trang câu chuyện học viên ===== */
/* Học cấu trúc mục câu chuyện khách hàng của scaleos.vn nhưng làm bằng chuyện
   thật đã được xác nhận, kể hành vi trước rồi mới tới con số, và nói rõ giới
   hạn của từng câu chuyện ngay trên trang. */
.ch-so{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}
.ch-so div{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--bg-2)}
.ch-so b{display:block;font-family:var(--f-tit);font-weight:800;
  font-size:clamp(24px,2.6vw,32px);color:var(--vang);font-variant-numeric:tabular-nums}
.ch-so span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:10px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.5}
.ch-quote{margin:30px 0;padding:6px 0 6px 26px;border-left:3px solid var(--vang)}
.ch-quote p{font-family:var(--f-tit);font-weight:700;font-size:clamp(19px,2.2vw,26px);
  line-height:1.4;color:var(--ink)}
.ch-quote span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ch-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}
.ch-the{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  display:flex;flex-direction:column;gap:9px}
.ch-the b{font-family:var(--f-tit);font-weight:800;font-size:clamp(21px,2vw,26px);
  color:var(--vang);font-variant-numeric:tabular-nums}
.ch-the i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.5}
.ch-the p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:900px){.ch-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .ch-luoi{grid-template-columns:1fr}
  .ch-so{grid-template-columns:1fr;gap:10px}
}

/* ===== Chips triệu chứng trên trang chủ ===== */
/* Học từ khối dấu hiệu của scaleos.vn: người đọc tự nhận ra mình trong một
   câu, không cần ai thuyết phục. Bốn câu lấy nguyên văn từ bài blog bốn câu
   nghe nhiều nhất, là câu thật của người sáng lập chứ không phải câu bịa. */
.tc-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 6px}
.tc{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-s);background:rgba(249,245,240,.025);
  text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease)}
.tc:hover{border-color:var(--vang);background:var(--vang-mo)}
.tc i{font-style:normal;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;color:var(--vang);flex:none;margin-top:3px}
.tc span{font-size:15px;line-height:1.55;color:var(--ink-2);font-style:italic}
.tc:hover span{color:var(--ink)}
@media(max-width:640px){.tc-luoi{grid-template-columns:1fr}}

/* ===== Khối tầm nhìn, sứ mệnh, giá trị trên trang Về Duy ===== */
/* Chữ lấy nguyên văn từ NGF-02, tài liệu chiến lược đã chốt 15/08/2026.
   Học bố cục từ trang Giới thiệu của scaleos.vn nhưng nhãn viết tiếng Việt
   và tầm nhìn dựng quanh con số 10.000 thay vì một đoạn văn dài. */
.tn-khoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:36px;
  align-items:center;margin-top:36px;padding:34px 36px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-2)}
.tn-so{text-align:center}
.tn-so b{display:block;font-family:var(--f-tit);font-weight:800;
  font-size:clamp(52px,7vw,84px);line-height:1;color:var(--vang);
  font-variant-numeric:tabular-nums}
.tn-so span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tn-loi p{font-size:16.5px;line-height:1.7;color:var(--ink)}
.tn-loi p+p{margin-top:12px;font-size:14.5px;color:var(--ink-2)}
.sm-khoi{margin-top:20px;padding:26px 30px;border-left:3px solid var(--vang);
  background:var(--vang-mo);border-radius:0 var(--r) var(--r) 0}
.sm-khoi b{display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vang);margin-bottom:10px}
.sm-khoi p{font-family:var(--f-tit);font-weight:700;font-size:clamp(17px,1.9vw,21px);
  line-height:1.5;color:var(--ink)}
.gt-luoi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}
.gt{padding:18px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:rgba(249,245,240,.025)}
.gt em{font-style:normal;font-family:var(--f-mono);font-size:10px;font-weight:600;
  letter-spacing:.12em;color:var(--vang)}
.gt h3{font-family:var(--f-tit);font-weight:700;font-size:15.5px;margin:7px 0 7px}
.gt p{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
@media(max-width:1000px){.gt-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt:last-child{grid-column:1/-1}}
@media(max-width:760px){.tn-khoi{grid-template-columns:1fr;gap:22px;padding:26px 22px}}
@media(max-width:560px){.gt-luoi{grid-template-columns:1fr}.gt:last-child{grid-column:auto}}

/* ===== Ba khối trang chủ học từ scaleos.vn ===== */
/* Dải phương pháp: tám khung có tên, cho tài sản một chỗ ở mặt tiền. */
.pp-pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:30px}
.pp-pill{padding:9px 16px;font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.pp-pill:hover{color:var(--vang);border-color:var(--vang)}
/* Băng công cụ: mời dùng thử một thứ ngay, không cần để lại thông tin. */
.cu-banner{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-top:0;padding:28px 32px;border:1px solid var(--line);
  border-radius:var(--r);background:
    radial-gradient(130% 160% at 90% -30%,rgba(242,177,74,.14),transparent 55%),
    var(--bg-2)}
.cu-banner b{display:block;font-family:var(--f-tit);font-weight:800;
  font-size:clamp(19px,2vw,24px);color:var(--ink)}
.cu-banner p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:56ch}

/* ===== Chuyên gia nói về Duy, bê từ scaleos.vn theo yêu cầu CDN 27/08 ===== */
.kol-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.kol{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  overflow:hidden;display:flex;flex-direction:column}
.kol .anh{aspect-ratio:1/.92;overflow:hidden;border-bottom:1px solid var(--line)}
.kol .anh img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:saturate(.92)}
.kol-than{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.kol-than p{font-size:14.5px;line-height:1.65;color:var(--ink-2);flex:1}
.kol-than p::before{content:"\201C";color:var(--vang);font-family:var(--f-tit);
  font-size:22px;line-height:0;margin-right:3px}
.kol-ten b{display:block;font-family:var(--f-tit);font-weight:700;font-size:15.5px;
  color:var(--vang)}
.kol-ten span{display:block;margin-top:3px;font-family:var(--f-mono);font-size:10px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:860px){.kol-luoi{grid-template-columns:1fr;gap:14px}
  .kol{flex-direction:row}.kol .anh{flex:0 0 118px;aspect-ratio:auto;border-bottom:0;
  border-right:1px solid var(--line)}}

/* ===== Hành trình ba chặng với Next Gen Founder ===== */
.ht-luoi{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;
  align-items:stretch;margin-top:34px}
.ht{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  display:flex;flex-direction:column;gap:9px;text-decoration:none;
  transition:border-color .25s var(--ease)}
.ht:hover{border-color:var(--vang)}
.ht em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vang)}
.ht h3{font-family:var(--f-tit);font-weight:700;font-size:17.5px;color:var(--ink)}
.ht p{font-size:13.5px;line-height:1.6;color:var(--ink-2);flex:1}
.ht i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.ht-mui{display:inline-block;align-self:center;color:var(--vang);opacity:.7;font-size:17px}
@media(max-width:860px){.ht-luoi{grid-template-columns:1fr}
  .ht-mui{transform:rotate(90deg);justify-self:center}}

/* ===== Khối giới thiệu tám khung trên trang chủ ===== */
/* Trang chủ scaleos giới thiệu framework ngay mặt tiền bằng hình buồng lái.
   Bản của mình: bốn hình thu nhỏ vẽ đúng hình dạng bốn khung tiêu biểu. */
.kh-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:32px}
.kh-o{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  text-decoration:none;transition:border-color .25s var(--ease)}
.kh-o:hover{border-color:var(--vang)}
.kh-o svg{width:84px;height:74px}
.kh-o b{font-family:var(--f-tit);font-weight:700;font-size:14.5px;color:var(--ink);
  text-align:center}
.kh-o i{font-style:normal;font-family:var(--f-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:760px){.kh-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ===== Hiệu ứng cuộn bổ sung, theo skill emil-design-eng ===== */
/* Ảnh đầu bài viết mở màn bằng cắt lớp thay vì trồi lên, mẫu image reveal
   của Emil Kowalski. Khối cha giữ nguyên vị trí (.hien.lo bỏ translateY)
   để chỉ có một chuyển động, không chồng hai chuyển động lên nhau. */
.hien.lo{transform:none}
.hien.lo .bai-anh{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease)}
.hien.lo.in .bai-anh{clip-path:inset(0 0 0 0)}
.noanim .hien.lo .bai-anh{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.hien.lo .bai-anh{clip-path:inset(0 0 0 0)}}

/* ===== Bìa đứng kiểu sách cho thẻ tài liệu ===== */
/* CDN hỏi vì sao không giống Tool Box của scaleos: bên đó mỗi thẻ có bìa
   mockup dọc 3:4. Bản này dựng bìa dọc bằng mã theo bảng màu thương hiệu,
   có gáy sách và bóng đổ, nghiêng nhẹ khi rê chuột. Khi có bìa thật do
   hoạ sĩ làm thì thay ảnh vào đúng khối .bia3d. */
.tl-bia3d{display:grid;place-items:center;padding:26px 18px 20px;
  border-bottom:1px solid var(--line);perspective:900px;
  background:
    radial-gradient(120% 130% at 50% -25%,rgba(242,177,74,.1),transparent 60%),
    rgba(249,245,240,.02)}
.bia3d{position:relative;width:132px;aspect-ratio:3/4.2;border-radius:4px 8px 8px 4px;
  background:linear-gradient(160deg,#2b211a 0%,#201812 55%,#191210 100%);
  border:1px solid rgba(242,177,74,.35);
  box-shadow:14px 18px 28px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(249,245,240,.07);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 12px 12px 16px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.bia3d::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(249,245,240,.09));border-radius:2px}
.bia3d::after{content:"";position:absolute;inset:7px;border:1px solid rgba(242,177,74,.22);
  border-radius:3px 6px 6px 3px;pointer-events:none}
.bia3d i{font-style:normal;font-family:var(--f-mono);font-size:7.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.bia3d b{font-family:var(--f-tit);font-weight:800;font-size:16.5px;line-height:1.15;
  color:var(--vang);flex:1;display:flex;align-items:center}
.bia3d .chan{display:flex;align-items:center;gap:6px}
.bia3d .chan img{width:16px;height:auto;opacity:.85}
.bia3d .chan span{font-family:var(--f-mono);font-size:6.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media(hover:hover){
  .tl:hover .bia3d{transform:rotateY(-7deg) translateY(-4px);
    box-shadow:22px 24px 34px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(249,245,240,.07)}
}
@media(prefers-reduced-motion:reduce){.tl:hover .bia3d{transform:none}}

/* ===== Hai nhịp nền cho trang chủ, chữa bệnh một màu ===== */
/* CDN chê trang chủ một màu trông chán. Nguyên tắc màu chỉ mang nghĩa nên
   không thêm màu lạ: lật độ sáng của chính hai màu thương hiệu. Dải giấy kem
   mang nghĩa tài liệu, đặt cho khối phương pháp và kho công cụ. Dải vàng
   đồng mang nghĩa đường dẫn, đặt cho hành trình ba chặng. Trải hết bề ngang
   bằng bóng đổ toả và cắt lớp, vì các section vốn bị giới hạn bề rộng .bd. */
.phan-sang,.phan-vang{position:relative;clip-path:inset(0 -100vmax)}
.phan-sang{
  color:var(--ink); /* đặt lại tại đây để token kem được tính, không kế thừa màu sáng từ body */
  background:#F2E9DA;box-shadow:0 0 0 100vmax #F2E9DA;
  --ink:#241B14;--ink-2:#4E4034;--ink-3:#75634F;--ink-4:#99876F;
  --line:#DFD2BE;--line-2:#C9B8A0;
  --bg:#F2E9DA;--bg-2:#FBF6EB;--bg-3:#F7F0E2;
  --panel:#FBF6EB;--panel-2:#F3EBDC;
  --vang:#8F5808;--vang-2:#7A4B07;--vang-3:#684006;
  --vang-mo:rgba(143,88,8,.09);
  --shadow:0 2px 6px rgba(60,42,20,.08),0 24px 46px -26px rgba(60,42,20,.28);
}
.phan-vang{
  background:var(--vang);box-shadow:0 0 0 100vmax var(--vang);
}
.phan-vang .phan-dau .mono{color:var(--on-vang);opacity:.72}
.phan-vang .phan-dau h2{color:var(--on-vang)}
.phan-vang .phan-dau p{color:rgba(23,18,15,.78)}
.phan-vang .phan-dau p .nhan{color:var(--on-vang);font-weight:700}
.phan-vang .ht-mui{color:var(--on-vang);opacity:.55}
.phan-vang .ht{box-shadow:0 3px 8px rgba(23,18,15,.18),0 26px 44px -22px rgba(23,18,15,.5)}

/* Các thẻ nền tối cố định nằm trong dải giấy: ghim lại token của nền tối,
   nếu không chữ trong thẻ ăn token sẫm của dải giấy và chìm vào nền thẻ.
   Lỗi này máy quét tương phản bắt được trên trang blog ngày 27/08. */
.phan-sang :is(.the-bai,.bai-lon,.bia3d,.ds-bai a),
body.giay :is(.the-bai,.bai-lon,.bia3d,.ds-bai a){
  color:var(--ink); /* đặt lại tại thẻ để con cháu kế thừa màu sáng, không lấy màu sẫm đã tính từ dải giấy */
  --ink:#F9F5F0;--ink-2:#CDC2B6;--ink-3:#A2968A;--ink-4:#7E7062;
  --vang:#F2B14A;--vang-2:#FFCB74;--vang-3:#D98F2E;
  --vang-mo:rgba(242,177,74,.13);--line:#3D332C;--line-2:#514539;
}
.phan-sang .bia3d{background-color:#201812}
/* nút lọc chủ đề đang chọn: nền hổ phách thì chữ phải kem, không dùng nâu đen */
.phan-sang .chu-de button.on{color:#FBF6EB}


/* Mục lục bên nằm trong DOM của .doc nhưng hiển thị trên nền tối của trang,
   nên ghim lại token nền tối, không ăn token kem của tờ giấy. */
.doc .ml-ben{--ink:#F9F5F0;--ink-2:#CDC2B6;--ink-3:#A2968A;
  --line:#3D332C;--line-2:#514539;--vang:#F2B14A;--vang-2:#FFCB74}


/* ===== Trang bài viết nền kem toàn phần ===== */
/* CDN muốn trang đọc sáng như trang cộng đồng, tờ giấy không tách biệt quá
   với nền sau. Lớp giay đặt trên body của riêng các trang bài viết: nền kem,
   token lật sang tông giấy, thanh menu và chân trang ghim tối làm dải nhận
   diện đầu cuối, tờ giấy .doc chỉ còn sáng hơn nền một bậc nhẹ. */
body.giay{
  color-scheme:light;
  background:#F2E9DA;color:var(--ink);
  --ink:#241B14;--ink-2:#4E4034;--ink-3:#75634F;--ink-4:#99876F;
  --line:#DFD2BE;--line-2:#C9B8A0;
  --bg:#F2E9DA;--bg-2:#ECE1CE;--bg-3:#F7F0E2;
  --panel:#FBF6EB;--panel-2:#F3EBDC;--panel-3:#EDE3D0;
  --vang:#8F5808;--vang-2:#7A4B07;--vang-3:#684006;
  --vang-mo:rgba(143,88,8,.09);
  --paper:linear-gradient(180deg,#FDF9F0,#F7F0E2);
  --shadow-s:0 1px 2px rgba(60,42,20,.08),0 14px 30px -18px rgba(60,42,20,.25);
  --shadow:0 2px 6px rgba(60,42,20,.09),0 30px 56px -30px rgba(60,42,20,.3);
  --shadow-h:0 3px 8px rgba(60,42,20,.1),0 24px 46px -22px rgba(60,42,20,.3);
}
/* thanh menu và chân trang ghim lại token tối, vì nền của chúng vốn tối */
body.giay :is(#nav,#menu-nho,footer){
  --ink:#F9F5F0;--ink-2:#CDC2B6;--ink-3:#A2968A;--ink-4:#7E7062;
  --line:#3D332C;--line-2:#514539;
  --bg:#17120F;--bg-2:#1E1815;--panel:#241D19;
  --vang:#F2B14A;--vang-2:#FFCB74;--vang-3:#D98F2E;
  --vang-mo:rgba(242,177,74,.13);
  color:var(--ink-2);
}
body.giay #menu-nho{background:#17120F}
body.giay footer{background:#1E1815}
/* tờ giấy chỉ sáng hơn nền một bậc, viền mảnh, bóng nhẹ */
body.giay .doc{--doc-bg:#FBF6EB;--doc-bg-2:#FDF9F0;border-color:#E5D9C2;
  box-shadow:0 2px 6px rgba(60,42,20,.06),0 24px 48px -30px rgba(60,42,20,.22)}
/* mục lục bên trên trang giấy dùng tông giấy, ghi đè ghim tối trước đó */
body.giay .doc .ml-ben{--ink:#241B14;--ink-2:#4E4034;--ink-3:#75634F;
  --line:#DFD2BE;--line-2:#C9B8A0;--vang:#8F5808;--vang-2:#7A4B07}
/* nút viền vốn nền tối cố định: trả về dạng viền trong suốt trên nền sáng */
body.giay .nut-vien{background-color:transparent;background-image:none}

/* Nhãn hero theo hướng căn của khối cha: giữa ở khổ hẹp, trái ở khổ rộng.
   CDN bắt lỗi 27/08: quy tắc nhóm căn trái cho .mono đè lên nhãn hero làm
   nhãn dạt trái trong khi tên vẫn giữa. */
#hero .hero-giua .mono-dai{text-align:inherit}

/* Thẻ lối màu vàng trên trang giấy: ghim lại tông vàng gốc, không ăn tông
   hổ phách sẫm của trang, vì chữ trên thẻ này vốn là nâu đen đậm. */
body.giay .cuoi .loi.vang{--vang:#F2B14A;--vang-2:#FFCB74;--vang-3:#D98F2E}

/* Dòng dẫn dưới tiêu đề bài dùng token giấy sáng toàn cục, trên trang giấy
   thành kem trên kem. CDN bắt lỗi 27/08 kèm ảnh chụp. */
body.giay .bai-dau .tom{color:var(--ink-2)}

/* ============ dải logo doanh nghiệp (27/08, dựng lại 28/08) ============
   Trước đây dùng filter brightness(0) invert() để đưa logo về một màu. Cách đó
   làm logo nào có chi tiết bên trong biến thành một khối trắng đặc, mất luôn
   danh tính. Nay bản một màu được tính sẵn thành tệp riêng trong img/doi-tac/mono,
   giữ đúng chênh lệch sáng tối bên trong logo, nên chữ và hình vẫn đọc được.
   Rê chuột thì bản màu gốc chồng lên. */
.kh-l{position:relative;display:block;flex-shrink:0;margin:0 26px;align-self:center;
  height:32px;line-height:0}
.kh-l img{height:32px;width:auto;display:block;
  transition:opacity .35s cubic-bezier(.23,1,.32,1)}
.kh-l>img:first-child{opacity:.82}
.kh-l .kh-mau{position:absolute;left:0;top:0;opacity:0}
.kh-l:hover>img:first-child{opacity:0}
.kh-l:hover .kh-mau{opacity:1}
.kh-day{align-items:center}
/* doanh nghiệp chưa có tệp logo thì hiện bằng chữ, cùng tông mờ với logo một màu */
.kh-t{opacity:.85}
.kh-t::after{margin:0 0 0 26px}
@media (max-width:640px){.kh-l,.kh-l img{height:24px}.kh-l{margin:0 16px}}
@media (prefers-reduced-motion:reduce){.kh-l img{transition:none}}

/* ============ khối nguồn tham khảo cuối bài (27/08) ============
   Chỉ hiện ở bài nào thật sự dựa trên khung của người khác. Đặt sau phần hỏi
   đáp và trước hộp tác giả, để người đọc thấy ranh giới giữa chữ của Duy và
   chữ đi mượn. */
.nguon-bai{max-width:74ch;margin:34px auto 0;padding-top:18px;
  border-top:1px solid rgba(249,245,240,.10)}
.nguon-bai b{font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px}
.nguon-bai ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.nguon-bai li{font-size:14.5px;line-height:1.65;color:var(--ink-2);padding-left:15px;position:relative}
.nguon-bai li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--vang);opacity:.55}
.nguon-bai li i{font-style:italic}
.nguon-bai li a{color:var(--vang);text-decoration:none;border-bottom:1px solid rgba(224,168,74,.32);
  white-space:nowrap}
.nguon-bai li a:hover{border-bottom-color:var(--vang)}
.nguon-bai>p{font-size:13.5px;color:var(--ink-3);margin-top:12px}
body.giay .nguon-bai{border-top-color:rgba(58,47,38,.14)}

/* ============ danh sách điều kiện tham gia (27/08) ============
   Trang không đăng giá thì phải đăng điều kiện, nên khối này cần đọc nhanh:
   mỗi dòng một điều kiện, dấu tích ở đầu, không gạch đầu dòng tròn cho đỡ giống
   danh sách tính năng. */
.dk-ds{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.dk-ds li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.62;color:var(--ink-2)}
.dk-ds li::before{content:"";position:absolute;left:2px;top:6px;width:16px;height:9px;
  border-left:2px solid var(--vang);border-bottom:2px solid var(--vang);
  transform:rotate(-45deg);opacity:.9}
@media (max-width:640px){.dk-ds li{font-size:15.5px;padding-left:29px}}