/* ═══════════════════════════════════════════════════════════════════════════
   vuvanthanh.vn — kiểu dáng dùng chung cho mọi trang.

   BẢNG MÀU khoá theo luật viết trang cho tệp người thầy:
   Navy + xanh ngọc + cam đất.
   TUYỆT ĐỐI không gold, không đỏ chói, không kim tuyến — đó là bảng màu
   của các mô hình đa cấp đang săn chính tệp này.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0E2338;      --navy-2:#16324C;    --navy-3:#1F4160;
  --ngoc:#137C6B;      --ngoc-s:#1BA189;    --ngoc-nhat:#E6F2EF;
  --cam:#B25A32;       --cam-s:#D2794C;     --cam-nhat:#F7EEE8;
  --giay:#FBF9F6;      --trang:#FFFFFF;
  --muc:#1A2733;       --muc-nhat:#546472;  --vien:#E2DDD5;
  --khung:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;background:var(--giay);
     color:var(--muc);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ngoc-nhat);color:var(--navy)}
:focus-visible{outline:2px solid var(--ngoc-s);outline-offset:3px}

.wrap{max-width:var(--khung);margin:0 auto;padding:0 24px}
.hep{max-width:780px}
.nhan{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
      color:var(--ngoc);margin-bottom:14px}
.nhan-sang{color:var(--ngoc-s)}
h1,h2,h3{font-family:'Lora',Georgia,serif;font-weight:600;line-height:1.24;letter-spacing:-.01em}
h2{font-size:clamp(27px,3.4vw,38px);color:var(--navy);margin-bottom:16px}
h3{font-size:20px;color:var(--navy)}
section{padding:84px 0}
.dan{font-size:18.5px;color:var(--muc-nhat);max-width:680px}
.than p{margin-bottom:17px}
.than h3{margin:34px 0 12px}

/* ══ NÚT ══ */
.nut{display:inline-block;padding:13px 26px;border-radius:4px;font-size:15px;font-weight:600;
     text-decoration:none;transition:all .2s;border:1.5px solid transparent;cursor:pointer}
.nut-chinh{background:var(--ngoc);color:#fff}
.nut-chinh:hover{background:#0F6B5C}
.nut-cam{background:var(--cam);color:#fff}
.nut-cam:hover{background:#9C4C29}
.nut-vien{border-color:var(--navy);color:var(--navy)}
.nut-vien:hover{background:var(--navy);color:#fff}
.nut-sang{border-color:rgba(255,255,255,.5);color:#fff}
.nut-sang:hover{background:#fff;color:var(--navy)}

/* ══ THANH ĐIỀU HƯỚNG ══ */
header{position:sticky;top:0;z-index:50;background:rgba(251,249,246,.94);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--vien)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:'Lora',serif;font-size:19px;font-weight:600;color:var(--navy);text-decoration:none}
.logo span{display:block;font-family:'Be Vietnam Pro',sans-serif;font-size:10.5px;font-weight:500;
      letter-spacing:.14em;text-transform:uppercase;color:var(--ngoc);margin-top:-2px}
.menu{display:flex;gap:26px;align-items:center}
.menu a{font-size:14.5px;font-weight:500;color:var(--muc-nhat);text-decoration:none;transition:color .2s}
.menu a:hover,.menu a.dang{color:var(--ngoc)}
.mo-menu{display:none;background:none;border:0;font-size:26px;color:var(--navy);cursor:pointer;line-height:1}

/* ══ MỞ ĐẦU ══ */
.mo-dau{background:var(--navy);color:#fff;padding:92px 0 84px;position:relative;overflow:hidden}
.mo-dau:before{content:"";position:absolute;right:-160px;top:-120px;width:560px;height:560px;
      border-radius:50%;background:radial-gradient(circle,rgba(27,161,137,.22),transparent 68%)}
.mo-dau .wrap{position:relative}
.mo-dau.gon{padding:64px 0 58px}
.canh{font-family:'Lora',serif;font-style:italic;font-size:18px;line-height:1.85;
      color:#C7D6E2;border-left:2px solid var(--ngoc-s);padding-left:22px;max-width:620px;margin-bottom:34px}
.canh b{font-style:normal;color:#fff;font-weight:600}
.mo-dau h1{font-size:clamp(33px,5.2vw,56px);color:#fff;max-width:920px;margin-bottom:22px}
.mo-dau.gon h1{font-size:clamp(30px,4.4vw,45px)}
.mo-dau h1 em{font-style:normal;color:var(--ngoc-s)}
.mo-dau p.dan{color:#BDCDDA;font-size:19px;max-width:680px}
.cta-hang{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.vet{font-size:13.5px;color:#7E96AC;margin-bottom:18px}
.vet a{color:#9FB4C6;text-decoration:none}
.vet a:hover{color:var(--ngoc-s)}

/* ══ NĂM CHỖ RÒ ══ */
.ro{margin-top:44px;border-top:1px solid var(--vien)}
.ro-hang{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:0 32px;
     padding:26px 0;border-bottom:1px solid var(--vien);align-items:baseline}
.ro-hang .so{font-family:'Lora',serif;font-size:30px;color:var(--cam);line-height:1}
.ro-hang h3{font-size:19px;margin-bottom:6px}
.ro-hang .mo-ta{font-size:15.5px;color:var(--muc-nhat);line-height:1.68}
.ro-hang .hau-qua{font-size:15.5px;color:var(--navy);line-height:1.68;
     background:var(--cam-nhat);padding:14px 18px;border-left:3px solid var(--cam-s)}
.ro-hang .hau-qua b{color:var(--cam)}

/* ══ CÂU CHỐT ══ */
.chot{background:var(--navy-2);color:#fff;text-align:center;padding:76px 0}
.chot p.lon{font-family:'Lora',serif;font-size:clamp(24px,3.4vw,36px);line-height:1.4;
     max-width:860px;margin:0 auto 22px;color:#fff}
.chot p.lon em{font-style:normal;color:var(--ngoc-s)}
.chot p.nho{font-size:16.5px;color:#9FB4C6;max-width:640px;margin:0 auto}

/* ══ THẺ LƯỚI (ba lớp, nguyên tắc) ══ */
.lop{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:44px}
.lop > div{background:var(--trang);border:1px solid var(--vien);border-top:3px solid var(--ngoc);padding:30px 28px}
.lop .ma{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
     color:var(--muc-nhat);margin-bottom:10px}
.lop h3{font-size:20px;margin-bottom:12px}
.lop p{font-size:15.5px;color:var(--muc-nhat);line-height:1.7;margin-bottom:14px}
.lop ul{list-style:none;font-size:15px;color:var(--muc-nhat)}
.lop li{padding-left:19px;position:relative;margin-bottom:6px}
.lop li:before{content:"—";position:absolute;left:0;color:var(--ngoc)}

.ngtac{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:40px}
.ngtac > div{border-top:2px solid var(--navy);padding-top:20px}
.ngtac h3{font-size:17.5px;margin-bottom:9px}
.ngtac p{font-size:15.5px;color:var(--muc-nhat);line-height:1.68}

/* ══ BẢNG ══ */
.ranh{background:var(--trang);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.bang-cuon{overflow-x:auto;margin-top:36px;border:1px solid var(--vien)}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:15px;background:var(--trang)}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--vien);vertical-align:top;line-height:1.6}
th{background:var(--navy);color:#fff;font-weight:600;font-size:14px}
.b3 th:nth-child(1){background:#1F4160}
.b3 th:nth-child(2){background:var(--ngoc)}
.b3 th:nth-child(3){background:var(--navy-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--giay)}
td:first-child{color:var(--navy);font-weight:500}
td.giua,th.giua{text-align:center}

.luat-do{margin-top:26px;padding:24px 26px;border-left:3px solid var(--cam);background:var(--cam-nhat);
     font-size:16.5px;line-height:1.75;max-width:840px}
.luat-do b{color:var(--cam)}
.hop-ngoc{margin-top:26px;padding:24px 26px;border-left:3px solid var(--ngoc);background:var(--ngoc-nhat);
     font-size:16.5px;line-height:1.75;max-width:840px}
.hop-ngoc b{color:var(--ngoc)}

/* ══ HAI CỬA ══ */
.cua{background:var(--giay)}
.hai-cua{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:44px}
.the-cua{background:var(--trang);border:1px solid var(--vien);padding:34px 32px;display:flex;flex-direction:column}
.the-cua.a{border-top:4px solid var(--ngoc)}
.the-cua.b{border-top:4px solid var(--cam)}
.the-cua .ai{font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.the-cua.a .ai{color:var(--ngoc)}
.the-cua.b .ai{color:var(--cam)}
.the-cua h3{font-size:23px;margin-bottom:14px}
.the-cua > p{font-size:16px;color:var(--muc-nhat);margin-bottom:18px}
.the-cua ul{list-style:none;font-size:15.5px;color:var(--muc-nhat);margin-bottom:26px;flex:1}
.the-cua li{padding-left:26px;position:relative;margin-bottom:10px;line-height:1.6}
.the-cua li:before{content:"→";position:absolute;left:0;font-weight:600}
.the-cua.a li:before{color:var(--ngoc)}
.the-cua.b li:before{color:var(--cam)}
.the-cua .nut{align-self:flex-start}

/* ══ ĐÍCH XA ══ */
.dich{background:var(--navy);color:#fff}
.dich h2{color:#fff}
.dich .hai-cot-d{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;
     margin-top:36px;align-items:start}
.dich p{color:#BDCDDA;margin-bottom:17px;font-size:17px}
.dich p b{color:#fff}
.chuoi{border:1px solid rgba(255,255,255,.16);padding:26px}
.chuoi h3{color:#fff;font-size:15px;letter-spacing:.02em;margin-bottom:18px}
.chuoi ol{list-style:none;counter-reset:c;font-size:15px}
.chuoi li{counter-increment:c;position:relative;padding-left:34px;margin-bottom:13px;color:#B7C8D6;line-height:1.6}
.chuoi li:before{content:counter(c);position:absolute;left:0;top:1px;width:22px;height:22px;
     border:1px solid var(--ngoc-s);color:var(--ngoc-s);border-radius:50%;display:flex;
     align-items:center;justify-content:center;font-size:11.5px;font-weight:600;font-family:'Lora',serif}

/* ══ VÌ SAO NGHE TÔI ══ */
.vi-sao{background:var(--navy-2);color:#fff}
.vi-sao h2{color:#fff}
.vi-sao .dan{color:#B7C8D6}
.the-kiem{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:44px}
.the-kiem > div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);padding:28px 26px}
.the-kiem .bieu{font-size:22px;margin-bottom:14px;display:block}
.the-kiem h3{color:#fff;font-size:18px;margin-bottom:12px}
.the-kiem p{font-size:15px;color:#B7C8D6;line-height:1.7}
.the-kiem .ngay{display:block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);
     font-size:12.5px;color:#7E96AC}
.loi-that{margin-top:34px;padding:24px 26px;border-left:3px solid var(--ngoc-s);
     background:rgba(27,161,137,.09);font-size:16px;color:#D3E1EB;line-height:1.75;max-width:800px}

/* ══ ĐIỀU TÔI KHÔNG LÀM ══ */
.khong{background:var(--cam-nhat)}
.ds-khong{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 44px}
.ds-khong div{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid rgba(178,90,50,.2)}
.ds-khong .x{flex:0 0 22px;color:var(--cam);font-weight:700;font-size:17px;line-height:1.6}
.ds-khong p{font-size:16px;line-height:1.65}
.ds-khong b{color:var(--navy)}

/* ══ HAI CỘT + HỒ SƠ ══ */
.toi-la-ai{background:var(--trang);border-top:1px solid var(--vien)}
.hai-cot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px}
.hai-cot p{margin-bottom:17px;font-size:17px}
.ho-so{background:var(--giay);border:1px solid var(--vien);padding:28px;position:sticky;top:94px}
.ho-so h3{font-size:15px;letter-spacing:.02em;margin-bottom:18px}
.ho-so dl{font-size:14.5px}
.ho-so dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muc-nhat);
     margin-top:16px;font-weight:600}
.ho-so dt:first-child{margin-top:0}
.ho-so dd{color:var(--navy);font-weight:500;margin-top:3px;line-height:1.55}

/* ══ MỐC THỜI GIAN ══ */
.moc{margin-top:40px;border-left:2px solid var(--vien);padding-left:0}
.moc > div{position:relative;padding:0 0 30px 32px}
.moc > div:before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;
     border-radius:50%;background:var(--ngoc);border:3px solid var(--giay)}
.moc > div:last-child{padding-bottom:0}
.moc .khi{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cam);margin-bottom:5px}
.moc h3{font-size:18px;margin-bottom:7px}
.moc p{font-size:15.5px;color:var(--muc-nhat);line-height:1.68}

/* ══ CÂU HỎI ══ */
.ch details{border-bottom:1px solid var(--vien);padding:4px 0}
.ch summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:17.5px;font-weight:600;
     color:var(--navy);position:relative}
.ch summary::-webkit-details-marker{display:none}
.ch summary:after{content:"+";position:absolute;right:6px;top:19px;font-size:24px;font-weight:400;color:var(--ngoc)}
.ch details[open] summary:after{content:"–"}
.ch details p{padding:0 40px 20px 0;font-size:16px;color:var(--muc-nhat);line-height:1.75;max-width:840px}

/* ══ LIÊN HỆ ══ */
.lh{background:var(--navy);color:#fff}
.lh h2{color:#fff}
.lh .dan{color:#B7C8D6}
.hop-lh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:44px;align-items:start}
.buoc{list-style:none;counter-reset:b}
.buoc li{counter-increment:b;position:relative;padding-left:46px;margin-bottom:24px;color:#B7C8D6;font-size:15.5px}
.buoc li:before{content:counter(b);position:absolute;left:0;top:-1px;width:30px;height:30px;
     border:1px solid var(--ngoc-s);color:var(--ngoc-s);border-radius:50%;display:flex;
     align-items:center;justify-content:center;font-size:13.5px;font-weight:600;font-family:'Lora',serif}
.buoc b{display:block;color:#fff;font-size:16.5px;margin-bottom:3px;font-weight:600}
.thang-lh{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.thang-lh a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;
     font-size:16px;font-weight:600;margin-bottom:12px}
.thang-lh a:hover{color:var(--ngoc-s)}
.thang-lh .nho{font-size:13.5px;color:#7E96AC;font-weight:400;display:block;margin-top:1px}

form{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);padding:30px}
label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#9FB4C6;
     margin:0 0 7px;font-weight:600}
label .thuong{text-transform:none;letter-spacing:0}
input,select,textarea{width:100%;padding:13px 14px;background:rgba(255,255,255,.07);
     border:1px solid rgba(255,255,255,.2);color:#fff;font-family:inherit;font-size:15.5px;
     border-radius:3px;margin-bottom:18px}
input::placeholder,textarea::placeholder{color:#7E96AC}
select option{background:var(--navy);color:#fff}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ngoc-s)}
button[type=submit]{width:100%;padding:16px;background:var(--ngoc-s);color:#fff;border:0;
     font-family:inherit;font-size:16px;font-weight:600;border-radius:3px;cursor:pointer;margin-bottom:0}
button[type=submit]:hover{background:#168B76}
button[type=submit]:disabled{opacity:.55;cursor:not-allowed}
.rieng-tu{font-size:12.5px;color:#7E96AC;margin-top:14px;line-height:1.6}
.rieng-tu a{color:#9FB4C6}
.bao{display:none;margin-top:16px;padding:14px 16px;font-size:14.5px;border-radius:3px;line-height:1.6}
.bao.ok{display:block;background:rgba(27,161,137,.16);border:1px solid var(--ngoc-s);color:#CFE9E2}
.bao.loi{display:block;background:rgba(178,90,50,.18);border:1px solid #C97A52;color:#F0D6C7}

/* ══ CHÂN TRANG ══ */
footer{background:#08192A;color:#8FA5B8;padding:56px 0 34px;font-size:14.5px}
.chan-luoi{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:40px;
     padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
footer h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:14px;
     font-weight:600;font-family:'Be Vietnam Pro',sans-serif}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--ngoc-s)}
.mien-tru{margin-top:26px;font-size:13px;line-height:1.75;color:#6F879B;max-width:880px}
.ban-quyen{margin-top:22px;font-size:13px;color:#5E778C;display:flex;flex-wrap:wrap;gap:6px 18px}

/* ══ TRANG 404 ══ */
.bon-linh{min-height:72vh;display:flex;align-items:center;background:var(--navy);color:#fff;
     text-align:center;padding:80px 0}
.bon-linh .ma{font-family:'Lora',serif;font-size:clamp(64px,12vw,120px);color:var(--ngoc-s);line-height:1}
.bon-linh h1{color:#fff;font-size:clamp(26px,4vw,38px);margin:12px 0 16px}
.bon-linh p{color:#BDCDDA;max-width:520px;margin:0 auto 30px}
.bon-linh .cta-hang{justify-content:center}

@media(max-width:900px){
  .menu{display:none}
  .mo-menu{display:block}
  .menu.hien{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--giay);
     flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--vien)}
  .menu.hien a{padding:13px 0;border-bottom:1px solid var(--vien);font-size:16px}
  .menu.hien .nut{margin-top:14px;text-align:center;border-bottom:0}
  .ro-hang{grid-template-columns:44px minmax(0,1fr);gap:0 18px}
  .ro-hang .hau-qua{grid-column:2;margin-top:14px}
  .hai-cot,.hop-lh,.dich .hai-cot-d{grid-template-columns:1fr;gap:36px}
  .ho-so{position:static}
  .chan-luoi{grid-template-columns:1fr;gap:30px}
  section{padding:62px 0}
}

@media print{
  header,footer,.cta-hang,form,.mo-menu{display:none}
  body{background:#fff;font-size:12pt}
  .mo-dau,.chot,.dich,.vi-sao,.lh{background:#fff!important;color:#000!important}
  .mo-dau h1,.dich h2,.vi-sao h2,.lh h2,.chot p.lon{color:#000!important}
  section{padding:18pt 0}
}