/* =====================================================================
   vuhuyhai.com · Hệ thiết kế Neo-Brutalism H-OE
   Dùng chung cho mọi trang. Sửa ở đây là cả site đổi theo.
   ===================================================================== */
:root{
  --brand:#c73937; --brand-dark:#a82c2a; --brand-text:#A02824; --brand-soft:#F0817F;
  --accent:#245B6B; --accent-text:#1D4C59; --accent-bg:#E4ECEC;
  --ink:#1A1A1A; --ink-2:#3D3D3D; --ink-3:#6B6B6B;
  --line:#1A1A1A; --paper:#FFFFFF; --canvas:#F7F4EF; --canvas-2:#EFEAE1; --hairline:#E4DED4;
  --ok:#1F7A4D;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --t-hero:clamp(2.3rem,6.2vw,4.6rem); --t-h2:clamp(1.6rem,3.6vw,2.6rem);
  --t-h3:clamp(1.2rem,2vw,1.5rem); --t-h4:clamp(1.0625rem,1.4vw,1.1875rem);
  --t-body:1.0625rem; --t-small:.9375rem; --t-label:.8125rem;
  --ls-hero:-.02em; --ls-head:-.01em; --ls-label:.06em;
  --lh-tight:1.06; --lh-head:1.15; --lh-snug:1.35; --lh-body:1.65;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --gutter:clamp(20px,4vw,48px);
  --bw:2px; --bw-2:3px; --bw-3:5px; --radius:4px;
  --shadow:4px 4px 0 var(--ink); --shadow-lg:6px 6px 0 var(--ink); --shadow-xl:8px 8px 0 var(--ink);
  --shadow-light:4px 4px 0 var(--canvas);
  --focus-ring:0 0 0 3px var(--brand);
  --ease:cubic-bezier(.25,0,0,1); --dur:160ms;
  --maxw:1120px; --maxw-wide:1340px; --maxw-prose:720px;
  --nav-h:68px;
}
*{font-style:normal !important;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--font-display);
  letter-spacing:var(--ls-head);line-height:var(--lh-head);}
h2{font-size:var(--t-h2);} h3{font-size:var(--t-h3);} h4{font-size:var(--t-h4);font-weight:600;}
p,li{text-wrap:pretty;}
a{color:var(--brand-text);}
img{max-width:100%;display:block;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter);}
.prose{max-width:var(--maxw-prose);}
.mono,.eyebrow,.chip,.btn{font-family:var(--font-mono);}
.num{font-variant-numeric:tabular-nums;}
.eyebrow{display:block;font-size:var(--t-label);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-label);color:var(--brand-text);margin-bottom:var(--s-4);}
.lead{font-size:1.1875rem;line-height:var(--lh-snug);color:var(--ink-2);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- THANH ĐIỀU HƯỚNG ---------- */
.nav{position:sticky;top:0;z-index:70;background:var(--ink);color:var(--canvas);
  border-bottom:var(--bw-2) solid var(--brand);}
.nav-in{display:flex;align-items:center;gap:var(--s-6);height:var(--nav-h);}
.nav-logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  color:var(--canvas);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;}
.nav-logo span{color:var(--brand-soft);}
.nav-links{display:flex;gap:var(--s-1);margin-left:auto;flex-wrap:wrap;}
.nav-links a{font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.04em;color:#D8D2C8;text-decoration:none;padding:var(--s-2) var(--s-3);
  border-radius:var(--radius);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.nav-links a:hover{background:rgba(255,255,255,.1);color:#fff;}
.nav-links a.on{color:#fff;background:var(--brand);}
.nav-cta{font-family:var(--font-mono);font-size:var(--t-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;background:var(--brand);color:#fff !important;text-decoration:none;
  padding:var(--s-3) var(--s-5);border:var(--bw) solid var(--canvas);border-radius:var(--radius);
  white-space:nowrap;transition:transform var(--dur) var(--ease);}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--canvas);}
.nav-mo{display:none;background:transparent;border:var(--bw) solid rgba(255,255,255,.5);
  color:var(--canvas);border-radius:var(--radius);width:42px;height:42px;margin-left:auto;
  cursor:pointer;align-items:center;justify-content:center;padding:0;}
.nav-mo svg{width:22px;height:22px;}

/* ---------- BLOCK ---------- */
.block{padding:var(--s-20) 0;}
.block--light{background:var(--canvas);}
.block--light.alt{background:var(--canvas-2);
  border-top:var(--bw) solid var(--hairline);border-bottom:var(--bw) solid var(--hairline);}
.block--dark{background:var(--ink);color:var(--canvas);position:relative;overflow:hidden;
  border-top:var(--bw-3) solid var(--brand);}
.block--dark h2,.block--dark h3,.block--dark h4{color:var(--canvas);}
.block--dark .eyebrow{color:#E8B4B2;}
.block--dark .lead{color:#D8D2C8;}
.block--dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(247,244,239,.35) 1.4px,transparent 1.5px);
  background-size:24px 24px;opacity:.22;
  -webkit-mask-image:radial-gradient(ellipse at 25% 30%,#000 12%,transparent 70%);
  mask-image:radial-gradient(ellipse at 25% 30%,#000 12%,transparent 70%);}
.block--dark > *{position:relative;z-index:1;}
.sec-head{margin-bottom:var(--s-12);}
.sec-head h2{max-width:26ch;}
.sec-head .lead{margin-top:var(--s-5);max-width:64ch;}

/* ---------- NÚT ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--t-label);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:var(--s-4) var(--s-6);min-height:54px;text-decoration:none;
  background:var(--brand);color:#fff;border:var(--bw-2) solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.btn--ghost{background:var(--paper);color:var(--ink);}
.block--dark .btn{border-color:var(--canvas);box-shadow:var(--shadow-light);}
.block--dark .btn--ghost{background:transparent;color:var(--canvas);border-color:var(--canvas);}
.btn--lg{font-size:.9375rem;padding:var(--s-5) var(--s-8);min-height:62px;}
.btn:focus-visible{box-shadow:var(--shadow),var(--focus-ring);}

/* ---------- THẺ VÀ LƯỚI ---------- */
.card{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s-6);}
.block--dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.35);
  box-shadow:var(--shadow-light);color:var(--canvas);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);}
ul.plain{list-style:none;margin:0;padding:0;}
ul.plain li{position:relative;padding:0 0 var(--s-4) var(--s-6);}
ul.plain li:last-child{padding-bottom:0;}
ul.plain li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;
  background:var(--brand);border:var(--bw) solid var(--line);border-radius:2px;}
.block--dark ul.plain li::before{border-color:var(--canvas);}
.punch{border-left:var(--bw-3) solid var(--brand);padding:var(--s-5) 0 var(--s-5) var(--s-6);
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.6rem);
  line-height:1.35;max-width:36ch;}
.block--dark .punch{border-left-color:var(--brand-soft);color:#fff;}

/* ---------- CHÂN TRANG ---------- */
footer.contact{background:var(--ink);color:var(--canvas);border-top:var(--bw-3) solid var(--brand);
  padding:var(--s-16) 0 var(--s-12);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center;}
.contact-name{font-family:var(--font-display);font-weight:700;font-size:clamp(2.25rem,5vw,3.25rem);
  letter-spacing:var(--ls-hero);line-height:1;margin:0 0 var(--s-3);}
.contact-tag{font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:var(--ls-label);color:#CFC8BC;margin:0 0 var(--s-4);}
.contact-core{color:#E8B4B2;font-weight:600;margin:0;}
.contact-cards{display:grid;gap:var(--s-3);}
.ccard{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);
  border:var(--bw-2) solid var(--canvas);border-radius:var(--radius);color:var(--canvas);
  text-decoration:none;min-height:48px;transition:background var(--dur) var(--ease);}
.ccard:hover{background:var(--brand);border-color:var(--brand);color:#fff;}
.ccard .cl{display:block;font-family:var(--font-mono);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);opacity:.75;}
.ccard .cv{display:block;font-weight:600;}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-12);
  padding-top:var(--s-6);border-top:var(--bw) solid rgba(255,255,255,.25);
  font-family:var(--font-mono);font-size:var(--t-label);}
.foot-nav a{color:#CFC8BC;text-decoration:none;}
.foot-nav a:hover{color:#fff;}
.foot-note{margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--t-label);color:#8D877C;}

@media (max-width:960px){
  .grid-2,.grid-3,.contact-grid{grid-template-columns:1fr;}
  .block{padding:var(--s-12) 0;}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--ink);border-bottom:var(--bw-2) solid var(--brand);
    flex-direction:column;gap:0;padding:var(--s-3) var(--gutter) var(--s-5);}
  .nav-links.mo{display:flex;}
  .nav-links a{padding:var(--s-4) var(--s-2);border-bottom:var(--bw) solid rgba(255,255,255,.15);}
  .nav-mo{display:flex;}
  .nav-cta{display:none;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* =====================================================================
   THÀNH PHẦN DÙNG CHUNG CHO CÁC TRANG CON
   ===================================================================== */
.phead{background:var(--ink);color:var(--canvas);position:relative;overflow:hidden;
  border-bottom:var(--bw-3) solid var(--brand);padding:var(--s-16) 0 var(--s-12);}
.phead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(247,244,239,.4) 1.4px,transparent 1.5px);
  background-size:24px 24px;opacity:.22;
  -webkit-mask-image:radial-gradient(ellipse at 22% 40%,#000 14%,transparent 70%);
  mask-image:radial-gradient(ellipse at 22% 40%,#000 14%,transparent 70%);}
.phead > *{position:relative;z-index:1;}
.phead .eyebrow{color:#E8B4B2;}
.phead h1{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:var(--ls-hero);line-height:1.08;
  color:var(--canvas);max-width:20ch;text-transform:uppercase;}
.phead .lead{color:#D8D2C8;max-width:62ch;margin-top:var(--s-6);}
.phead .bac-tag{display:inline-block;margin-bottom:var(--s-5);font-family:var(--font-mono);
  font-size:var(--t-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--brand);border:var(--bw) solid var(--canvas);
  border-radius:var(--radius);padding:var(--s-2) var(--s-4);}

/* Bảng */
table.tbl{width:100%;border-collapse:collapse;background:var(--paper);color:var(--ink);
  border:var(--bw-2) solid var(--line);border-radius:var(--radius);overflow:hidden;}
.block--dark table.tbl{border-color:var(--canvas);}
table.tbl th{background:var(--ink);color:var(--canvas);font-family:var(--font-mono);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:500;
  text-align:left;padding:var(--s-3) var(--s-4);border-bottom:var(--bw) solid var(--canvas);}
table.tbl td{padding:var(--s-4);border-top:var(--bw) solid var(--hairline);vertical-align:top;font-size:var(--t-small);}
table.tbl td.no{font-family:var(--font-mono);font-weight:600;color:var(--brand-text);
  width:64px;text-align:center;font-variant-numeric:tabular-nums;}
table.tbl tr:nth-child(even) td{background:#FBFAF8;}
table.tbl td.hi{background:#FBEFEF !important;font-weight:600;}
.tbl-scroll{overflow-x:auto;}

/* Khối nhấn */
.callout{border-left:var(--bw-3) solid var(--accent);background:var(--accent-bg);
  padding:var(--s-5) var(--s-6);border-radius:var(--radius);}
.callout.do{border-left-color:var(--brand);background:#FBEFEF;}
.callout p{margin:0;}
.callout .h{font-family:var(--font-display);font-weight:600;margin-bottom:var(--s-3);}

/* Thẻ có số thứ tự */
.step{display:flex;gap:var(--s-4);background:var(--paper);border:var(--bw-2) solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-6);}
.block--dark .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.35);
  box-shadow:var(--shadow-light);}
.step-n{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;border:var(--bw) solid var(--line);border-radius:var(--radius);
  font-family:var(--font-mono);font-weight:600;font-size:.9375rem;}
.block--dark .step-n{border-color:var(--canvas);}
.step b{display:block;font-family:var(--font-display);font-size:var(--t-h4);margin-bottom:var(--s-2);}
.step p{margin:0;font-size:var(--t-small);color:var(--ink-2);}
.block--dark .step p{color:#D8D2C8;}
.steps{display:grid;gap:var(--s-4);}
.steps.c2{grid-template-columns:1fr 1fr;}

/* Ba gói giá */
.goi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);align-items:stretch;}
.goi{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s-6);display:flex;flex-direction:column;}
.goi.nhan{border-width:var(--bw-3);box-shadow:var(--shadow-xl);position:relative;}
.goi.nhan::before{content:"NHIỀU NGƯỜI CHỌN";position:absolute;top:calc(var(--s-4)*-1);left:50%;
  transform:translateX(-50%);background:var(--brand);color:#fff;font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.06em;padding:5px 10px;
  border:var(--bw) solid var(--line);border-radius:var(--radius);white-space:nowrap;}
.goi .ten{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);margin-bottom:var(--s-2);}
.goi .cho{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:var(--ls-label);margin-bottom:var(--s-5);display:block;}
.goi .gia{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.05rem);
  line-height:1.1;font-variant-numeric:tabular-nums;color:var(--brand);}
.goi .gia small{font-size:.5em;color:var(--ink-3);font-weight:500;}
.goi ul{margin:var(--s-5) 0 var(--s-6);}
.goi .btn{margin-top:auto;width:100%;}

/* Danh sách khóa */
.khoa{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-5);align-items:center;
  background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-4);
  text-decoration:none;color:var(--ink);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
a.khoa:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--brand);}
.khoa .ic{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--canvas-2);}
.khoa .ic svg{width:24px;height:24px;}
.khoa b{display:block;font-family:var(--font-display);font-size:var(--t-h4);margin-bottom:2px;}
.khoa span{font-size:var(--t-small);color:var(--ink-2);}
.khoa .tt{font-family:var(--font-mono);font-size:var(--t-label);white-space:nowrap;text-align:right;
  color:var(--ink-3);}
.khoa.mo{border-width:var(--bw-3);background:#FBEFEF;}
.khoa.mo .tt{color:var(--brand-text);font-weight:600;}
.khoa.mo .ic{background:var(--brand);color:#fff;}

/* Danh sách kiểu định nghĩa */
.dl-list{display:grid;gap:var(--s-5);}
.dl-item{border-left:var(--bw-2) solid var(--brand);padding-left:var(--s-5);}
.dl-item b{display:block;font-family:var(--font-display);font-size:var(--t-h4);margin-bottom:var(--s-2);}
.dl-item p{margin:0;font-size:var(--t-small);color:var(--ink-2);}
.block--dark .dl-item p{color:#D8D2C8;}

@media (max-width:960px){
  .goi-grid,.steps.c2{grid-template-columns:1fr;}
  .goi.nhan{border-width:var(--bw-2);box-shadow:var(--shadow);}
  .khoa{grid-template-columns:auto 1fr;}
  .khoa .tt{grid-column:2;text-align:left;}
  .phead{padding:var(--s-12) 0 var(--s-10);}
}