:root{
    /* lay dung tu kimtamcat.com */
    --nen:#FFFFFF; --nen2:#FCF8F0; --nen3:#F3EDE1;
    --navy:#142839; --navy2:#1B3447; --navy-vien:#2E4A60;
    --son:#AE0B11; --son-dam:#8C080D;
    --vang:#C9A14A; --vang-sang:#F6E7B4; --vang-dam:#8A6B2A;
    --vien:#E2DACB; --vien2:#C9BDA3;
    --chu:#1A1A1A; --chu-mo:#55514A; --trang:#1A1A1A;
    /* chu tren nen navy */
    --chu-navy:#FFFFFF; --chu-navy-mo:#C6D2DB;
    /* tuong thich ten cu */
    --dam:#142839; --dam2:#1B3447; --dam-vien:#2E4A60;
    --chu-dam:#FFFFFF; --chu-dam-mo:#C6D2DB; --do:#AE0B11;
    --thuphap:"Dancing Script",cursive;
    --serif:"Playfair Display","IBM Plex Serif",Cambria,serif;
    --sans:"Be Vietnam Pro","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  :focus-visible{outline:2px solid var(--vang);outline-offset:3px;border-radius:2px}
  .bo-qua{position:absolute;left:-9999px;top:0;z-index:100;background:var(--vang);color:#FFFFFF;
    padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none}
  .bo-qua:focus{left:12px;top:12px}
  html{overflow-x:clip;scroll-behavior:smooth}
  body{overflow-x:clip}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--nen);color:var(--chu);font-family:var(--sans);font-size:clamp(17px,1.62vw,25px);font-weight:400;line-height:1.62;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  .khung{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
  .hep{max-width:900px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
  section{padding:clamp(58px,6.2vw,100px) 0}
  .vien-tren{border-top:0}
  .toi{background:var(--nen2)}

  .nhan{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(19px,1.9vw,28px);
    line-height:1.39;letter-spacing:normal;text-transform:none;color:var(--vang);margin:0 0 18px;display:block}
  .nhan.giua{text-align:center}
  h2{font-family:var(--sans);font-size:clamp(27px,2.45vw,36px);line-height:1.36;margin:0 0 24px;
    color:var(--trang);font-weight:500;letter-spacing:normal;text-transform:none;text-wrap:balance}
  h3{font-family:var(--sans);font-size:clamp(20px,1.65vw,25px);margin:0 0 12px;color:var(--trang);font-weight:500;line-height:1.38;letter-spacing:normal}
  p{margin:0 0 19px;max-width:60ch}
  .mo{color:var(--chu-mo)}
  .to{font-size:clamp(19px,1.75vw,26px);line-height:1.62;font-weight:400}
  .giua{text-align:center}
  .giua p{margin-left:auto;margin-right:auto}
  em.v{color:var(--vang-sang);font-style:normal;font-weight:700}
  .loi{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--vang-sang)}
  .loinoi{margin:clamp(34px,3.6vw,52px) auto;text-align:center;max-width:1000px;padding:0 20px}
  .loinoi p{font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(22px,2.6vw,38px);line-height:1.34;color:var(--vang-sang);margin:0;max-width:none}
  .haicot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,54px)}
  @media(max-width:860px){.haicot{grid-template-columns:1fr;gap:0}}
  .haicot p{max-width:none}
  b,strong{font-weight:700}

  .nut{display:inline-block;padding:15px 38px;border-radius:3px;text-decoration:none;
    font-size:16px;font-weight:700;line-height:1.45;border:2px solid var(--son);transition:.22s;
    position:relative;overflow:hidden}
  .nut-chinh{background:var(--son);color:#fff}
  .nut-chinh:hover{background:var(--son-dam);border-color:var(--son-dam)}
  .nut-phu{background:transparent;color:var(--son)}
  .nut-phu:hover{background:var(--son);color:#fff}
  .hang-nut{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
  .giua .hang-nut{justify-content:center}

  header{position:sticky;top:0;z-index:60;background:var(--navy);backdrop-filter:blur(14px);border-bottom:1px solid var(--vien)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(22px,4vw,56px);max-width:1280px;margin:0 auto}
  .logo{display:block;text-decoration:none;line-height:0}
  .logo img{height:clamp(66px,6vw,92px);width:auto;display:block}
  @media(max-width:640px){.logo img{height:66px}}
  .menu{display:flex;gap:30px;flex-wrap:wrap}
  .menu a{color:#DCE5EC;text-decoration:none;font-size:16px;letter-spacing:normal;text-transform:none;font-weight:400}
  .menu a:hover{color:var(--vang-sang)}


  /* menu dien thoai */
  .nut-menu{display:none;background:none;border:0;padding:12px 6px;cursor:pointer;
    width:46px;height:46px;position:relative}
  .nut-menu i{position:absolute;left:8px;right:8px;height:2px;background:var(--vang-sang);
    border-radius:2px;transition:.26s}
  .nut-menu i:nth-child(1){top:14px}
  .nut-menu i:nth-child(2){top:22px}
  .nut-menu i:nth-child(3){top:30px}
  .nut-menu[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
  .nut-menu[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nut-menu[aria-expanded="true"] i:nth-child(3){top:22px;transform:rotate(-45deg)}
  @media(max-width:820px){
    .nut-menu{display:block}
    .menu{position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;
      background:var(--navy);
      border-bottom:1px solid var(--vien);padding:8px 0 20px;
      max-height:0;overflow:hidden;transition:max-height .32s ease;z-index:59}
    .menu.mo{max-height:80vh;overflow:auto}
    .menu a{padding:15px clamp(22px,6vw,40px);font-size:17px;border-bottom:1px solid var(--vien)}
    .menu a:last-child{border-bottom:0}
  }

  .vkhung{position:relative;width:100%;aspect-ratio:16/9;background:var(--nen2);border:1px solid var(--vien);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .vkhung iframe{width:100%;height:100%;border:0}
  .tron{width:70px;height:70px;border-radius:50%;border:1px solid var(--vang);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
  .tron span{color:var(--vang);font-size:21px;margin-left:5px}
  .vtrong{text-align:center;padding:22px;color:var(--chu-mo);font-size:16px;line-height:1.6}
  .vkhung video,.vkhung iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:var(--navy);display:block}

  .ten3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px);background:transparent;margin-top:36px}
  @media(max-width:860px){.ten3{grid-template-columns:1fr}}
  .ten3 .o{background:transparent;padding:0 0 0 clamp(22px,2.4vw,42px);text-align:left;border-left:1px solid var(--vien)}
  .ten3 .o:first-child{border-left:0;padding-left:0}
  .ten3 .dau{text-align:center;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--vien)}
  .ten3 .giai{font-size:clamp(17px,1.4vw,21px);line-height:1.66;color:var(--chu-mo);font-weight:400;margin:0;max-width:none}
  .ten3 .giai b{color:var(--vang-sang);font-weight:700}
  .khauquyet{margin-top:clamp(42px,4.4vw,66px);text-align:center}
  .khauquyet .ten{font-family:var(--sans);font-size:clamp(14px,1.15vw,16px);font-weight:700;
    letter-spacing:.34em;color:var(--vang);text-transform:uppercase;margin:0 0 26px}
  .khauquyet .cau{font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(25px,3.4vw,50px);line-height:1.34;color:var(--vang-sang);margin:0;letter-spacing:normal}
  .ten3 .ngh{font-family:var(--sans);font-size:clamp(40px,4.3vw,62px);font-weight:300;
    letter-spacing:.09em;color:var(--vang);text-transform:uppercase;line-height:1.1}
  .ten-ket{margin:52px auto 0;text-align:center;font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(26px,3.4vw,50px);color:var(--vang-sang);line-height:1.2;max-width:none}

  .moc{position:relative;padding-left:34px;margin-top:38px}
  .moc::before{content:"";position:absolute;left:4px;top:8px;bottom:36px;width:1px;background:linear-gradient(180deg,var(--vang),var(--vien2),transparent)}
  .moc .m{position:relative;padding-bottom:42px}
  .moc .m::before{content:"";position:absolute;left:-34px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--vang)}
  .moc .nam{font-family:var(--sans);font-size:13px;letter-spacing:.12em;color:var(--vang);margin-bottom:9px;font-weight:700}
  .moc .m p{margin:0 0 14px;color:var(--chu-mo)}
  .moc .m p:last-child{margin-bottom:0}
  .ds,.moc .ds{list-style:none;margin:0;padding:0;display:grid;gap:11px}
  .ds li,.moc .ds li{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.5vw,23px);
    letter-spacing:.02em;color:var(--chu);display:flex;gap:13px;align-items:baseline;line-height:1.45}
  .ds li::before,.moc .ds li::before{content:"+";color:var(--vang);font-weight:700;flex:none}
  .moc .m h3{margin-bottom:7px}

  .luoi{display:grid;gap:1px;background:var(--vien)}
  .l2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
  .l3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .l4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .the{background:var(--nen);padding:34px 30px}
  .the p{font-size:clamp(16px,1.35vw,20px);color:var(--chu-mo);margin:0;font-weight:400;line-height:1.62}
  .the .stt{font-family:var(--sans);font-size:13px;color:var(--vang);letter-spacing:.12em;margin-bottom:14px;font-weight:700}

  .doi{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
  @media(max-width:880px){.doi{grid-template-columns:1fr;gap:34px}}
  .anh-vien{border:1px solid var(--vien)}
  .anh2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
  @media(max-width:760px){.anh2{grid-template-columns:1fr}}
  .chuthich{font-size:clamp(15px,1.25vw,18px);font-weight:400;color:var(--chu-mo);margin:14px 0 0;max-width:none;line-height:1.55}

  .sk{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin-top:32px}
  .sk .o{background:var(--nen);border:1px solid var(--vien)}
  .sk .noi{padding:24px 26px 28px}
  .sk .ngay{font-size:13px;letter-spacing:.12em;color:var(--vang);margin-bottom:11px;text-transform:uppercase;font-weight:700}
  .sk h3{font-size:clamp(19px,1.5vw,23px);margin-bottom:10px;line-height:1.34}
  .sk p{font-size:clamp(15px,1.25vw,19px);color:var(--chu-mo);margin:0;line-height:1.56;font-weight:400}
  .sk .anhsk{width:100%;height:215px;object-fit:cover;border-bottom:1px solid var(--vien)}

  .so{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien2);margin-top:30px}
  @media(max-width:900px){.so{grid-template-columns:repeat(2,1fr)}}
  .so .o{background:var(--nen);padding:clamp(30px,3vw,44px) 20px;text-align:center}
  .so .num{font-family:var(--sans);font-weight:600;letter-spacing:-.015em;font-size:clamp(40px,4.8vw,72px);color:var(--vang-sang);line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
  .so .lab{font-size:clamp(15px,1.25vw,18px);color:var(--chu-mo);letter-spacing:.01em;text-transform:none;font-weight:500;line-height:1.4}

  .ng{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:32px}
  .ng .o{background:transparent;border:0}
  .ng .anh{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;display:block;
    border:1px solid rgba(212,175,55,.3);box-shadow:0 6px 22px rgba(0,0,0,.45);transition:.25s}
  .ng .o:hover .anh{border-color:var(--vang)}
  .ng .kh{width:100%;aspect-ratio:3/4;background:linear-gradient(160deg,var(--nen3),var(--nen2));display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,175,55,.3)}
  .ng .kh span{font-family:var(--serif);font-size:46px;color:var(--vang);opacity:.38}
  .ng .noi{padding:20px 2px 0}
  .ng .ten{font-family:var(--sans);font-size:clamp(19px,1.55vw,23px);font-weight:500;color:var(--trang);margin-bottom:7px;line-height:1.38;letter-spacing:normal}
  .ng .vai{font-size:clamp(15px,1.25vw,18px);color:var(--chu-mo);line-height:1.58;font-weight:400}

  .bao{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
  .bao span{background:transparent;border:1px solid var(--vien2);border-radius:100px;padding:13px 32px;font-size:17px;letter-spacing:normal;color:var(--chu);font-weight:500}
  .bao span.tv{border-color:var(--vang);color:var(--vang-sang)}

  .giay{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:30px}
  .giay figure{margin:0;background:var(--nen2);border:1px solid var(--vien);padding:18px}
  .giay img{width:100%;max-height:470px;object-fit:contain}
  .giay figcaption{font-size:clamp(15px,1.2vw,17px);color:var(--chu-mo);font-weight:400;margin-top:16px;text-align:center;line-height:1.55}

  .soc{display:grid;grid-template-columns:repeat(4,1fr);max-width:900px;gap:clamp(14px,1.5vw,20px);margin-top:clamp(26px,2.8vw,38px)}
  
  @media(max-width:520px){.soc{grid-template-columns:repeat(2,1fr)}}
  .soc a{display:flex;flex-direction:column;align-items:center;gap:15px;
    background:transparent;border:1px solid var(--vien2);border-radius:4px;
    padding:clamp(24px,2.4vw,34px) 14px;text-decoration:none;color:var(--chu-mo);transition:.22s}
  .soc a:hover{border-color:var(--vang);color:var(--vang-sang);background:rgba(212,175,55,.05)}
  .soc svg{width:clamp(30px,2.8vw,38px);height:clamp(30px,2.8vw,38px);fill:var(--vang);transition:.22s}
  .soc a:hover svg{fill:var(--vang-sang)}
  .soc .ten{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:.02em}

  .chung{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:42px}
  .chung .o{background:var(--nen);border:1px solid var(--vien);padding:32px 28px;min-height:168px;display:flex;flex-direction:column;justify-content:center}
  .chung .o .q{font-family:var(--serif);font-size:30px;color:var(--vang);opacity:.35;line-height:1;margin-bottom:10px}
  .chung .o p{font-size:15px;color:var(--chu-mo);margin:0}

  .re{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin-top:32px}
  .re .o{background:var(--nen2);border:1px solid var(--vien);padding:50px 42px}
  .re .o.dt{border-color:var(--vang)}

  .cho{background:#FDEEEC;border-left:3px solid var(--do);padding:15px 20px;margin:22px 0 0;font-size:16px;color:#8C080D;max-width:none;line-height:1.6}
  .cho b{color:#6B0509}

  /* hero */
  .hero{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,5vw,74px);align-items:center;
    padding:clamp(54px,7vw,104px) 0 clamp(70px,8vw,120px)}
  @media(max-width:960px){.hero{grid-template-columns:1fr;gap:38px}}
  .hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.5vw,70px);line-height:1.08;
    letter-spacing:.015em;text-transform:uppercase;color:var(--trang);margin:0 0 16px;
    white-space:nowrap}
  @media(max-width:960px){.hero h1{font-size:clamp(36px,8.6vw,62px)}}
  .hero .dinh-vi{font-family:var(--sans);font-weight:300;font-size:clamp(17px,1.8vw,27px);
    line-height:1.45;letter-spacing:.24em;text-transform:uppercase;color:var(--vang-sang);
    margin:0 0 24px;max-width:none}
  .hero .mota{font-size:clamp(18px,1.7vw,26px);line-height:1.62;color:var(--chu-mo);font-weight:400;max-width:44ch}
  /* ---- chong khuon: so chuong chim ---- */
  .chuong{position:relative}
  .chuong::before{content:none;/* so 01 02 03 — Trí cho an 13/10; bo chu content:none la hien lai */
    display:none;position:absolute;left:calc(-1 * clamp(8px,2.6vw,54px));
    top:calc(-1 * clamp(32px,4vw,74px));font-family:var(--sans);font-weight:700;
    font-size:clamp(76px,9vw,148px);line-height:1;color:var(--vang);opacity:.11;
    pointer-events:none;user-select:none;letter-spacing:-.02em}
  @media(max-width:760px){.chuong::before{font-size:88px;top:-24px;left:-6px}}

  /* ---- anh tran het chieu ngang ---- */
  .tranrong{width:100vw;margin-left:calc(50% - 50vw);display:block}
  .tranrong img{width:100%;height:clamp(300px,42vw,620px);object-fit:cover;display:block}

  /* ---- nhip khoang cach lech ---- */
  section.tho{padding:clamp(74px,8vw,132px) 0}
  section.siet{padding:clamp(48px,5vw,78px) 0}

  /* ---- muc ten goi: ba cot lech do cao ---- */
  .ten3 .o:nth-child(1){transform:translateY(clamp(36px,4.8vw,88px))}
  .ten3 .o:nth-child(2){transform:translateY(clamp(18px,2.4vw,44px))}
  .ten3 .o:nth-child(3){transform:none}
  @media(max-width:860px){.ten3 .o:nth-child(1),.ten3 .o:nth-child(2){transform:none}}

  /* ---- con so: mot o chiem doi ---- */
  .so .o.noibat{background:var(--nen2);box-shadow:inset 0 0 0 2px var(--son)}
  .so .o.noibat .num{font-size:clamp(46px,5.4vw,82px);color:var(--vang);font-weight:700}
  .so .o.noibat .lab{color:var(--chu)}

  /* doi ngu - anh tron */
  .tron-ds{display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(26px,3vw,52px);margin:clamp(34px,3.6vw,52px) auto 0}
  
  
  .tron-ds .o{text-align:center;flex:0 0 auto;width:clamp(170px,19vw,250px)}
  .tron-ds img{width:100%;max-width:none;aspect-ratio:1/1;object-fit:cover;border-radius:50%;
    margin:0 auto 20px;display:block;border:2px solid rgba(212,175,55,.38);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:.25s}
  .tron-ds .o:hover img{border-color:var(--vang)}
  .tron-ds.lanhdao .o{width:clamp(210px,26vw,340px)}
  .tron-ds.lanhdao .ten{font-size:clamp(21px,1.8vw,27px)}
  .tron-ds.lanhdao .vai{font-size:clamp(16px,1.35vw,19px)}
  .tron-ds .ten{font-family:var(--sans);font-size:clamp(18px,1.5vw,23px);font-weight:500;color:var(--trang);margin-bottom:6px}
  .tron-ds .vai{font-size:clamp(15px,1.25vw,18px);color:var(--chu-mo);font-weight:400;line-height:1.5}

  /* luoi san pham */
  .sp{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,22px);margin-top:clamp(28px,3vw,40px)}
  @media(max-width:1000px){.sp{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.sp{grid-template-columns:1fr}}
  .sp .o{background:transparent;border:0;overflow:hidden}
  .sp .o:hover img{border-color:var(--vang);box-shadow:0 8px 28px rgba(212,175,55,.16)}
  .sp img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:.25s;
    border:1px solid rgba(212,175,55,.34);box-shadow:0 6px 22px rgba(0,0,0,.5)}
  .sp .ten{padding:18px 2px 0;font-family:var(--sans);font-size:clamp(17px,1.45vw,22px);
    font-weight:500;color:var(--trang);line-height:1.4}
  .sp .o.xem{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding:clamp(24px,2.4vw,34px);background:var(--nen2);border:1px solid var(--vien)}
  .sp .o.xem .t{font-family:var(--sans);font-size:clamp(18px,1.5vw,23px);font-weight:500;color:var(--vang-sang);margin-bottom:20px}

  /* cau trich lon - kieu chu to nhat, giong h3 80px cua Dan Lok */
  .trich{font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(28px,4vw,58px);line-height:1.2;color:var(--vang-sang);
    letter-spacing:normal;margin:0;max-width:none;text-wrap:balance}

  /* ============ HOA TIET ============ */
  /* 1. may xoan chim, lap deu toan trang */

  section,footer{position:relative;z-index:1}
  header{position:sticky;top:0;z-index:60}

  /* 2. dai nui + dan co bay o chan mot so muc */
  .nui-co{position:absolute;left:0;right:0;bottom:0;height:min(42%,280px);z-index:0;pointer-events:none;opacity:.17}
  .nui-co svg{width:100%;height:100%;display:block}
  .nui-co .net{fill:none;stroke:var(--vang);stroke-width:1.6;stroke-linecap:round}
  .nui-co .co{fill:none;stroke:var(--vang);stroke-width:1.5;stroke-linecap:round}

  /* 3. bong sen net vang sau khau quyet */
  .khauquyet{position:relative}
  .khauquyet .cau,.khauquyet .ten{position:relative;z-index:1}
  .sen{position:absolute;left:50%;top:52%;translate:-50% -50%;
    width:min(600px,88vw);aspect-ratio:1;z-index:0;pointer-events:none;opacity:.3}
  .sen path{fill:none;stroke:var(--vang);stroke-width:1.1;stroke-linecap:round}
  @media(max-width:760px){.sen{width:82vw;opacity:.22}}

  /* 4. dai may gio o hero */
  .may-hero{position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none;opacity:.2;overflow:hidden}
  .may-hero svg{width:100%;height:100%;display:block}
  .may-hero path{fill:none;stroke:var(--vang);stroke-width:1.3;stroke-linecap:round}
  .hero{position:relative;z-index:1}



  /* ---- con trien son ---- */
  .trien{display:block;margin:0 auto 22px;width:clamp(74px,7vw,96px);height:auto}
  .trien .khung{fill:none;stroke:#B33A30;stroke-width:4.5}
  .trien .chu{fill:#B33A30;font-family:var(--sans);font-weight:700;font-size:26px;
    text-anchor:middle;dominant-baseline:central;letter-spacing:.04em}
  .ten3 .o{text-align:center}
  .ten3 .giai{text-align:left}

  /* ---- mat na video: nut play vang thay nut do YouTube ---- */
  .matna{all:unset;position:absolute;inset:0;cursor:pointer;display:block;overflow:hidden}
  .matna img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
  .matna:hover img{transform:scale(1.03)}
  .matna .play{position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:clamp(56px,5vw,76px);aspect-ratio:1;border-radius:50%;
    border:1.5px solid var(--vang);background:rgba(20,40,57,.52);backdrop-filter:blur(5px);
    display:grid;place-items:center;transition:.26s}
  .matna:is(:hover,:focus-visible) .play{background:var(--vang);border-color:var(--vang-sang);scale:1.07}
  .matna .play::before{content:"";margin-left:5px;
    border-left:16px solid var(--vang);border-top:10px solid transparent;border-bottom:10px solid transparent}
  .matna:is(:hover,:focus-visible) .play::before{border-left-color:#FFFFFF}

  /* ---- vien goc kieu A Dong cho anh lon ---- */
  .goc{position:relative}
  .goc::before,.goc::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:2}
  .goc::before{left:-5px;top:-5px;border-left:1.5px solid var(--vang);border-top:1.5px solid var(--vang)}
  .goc::after{right:-5px;bottom:-5px;border-right:1.5px solid var(--vang);border-bottom:1.5px solid var(--vang)}

  /* ---- hien dan khi cuon ---- */
  @media (prefers-reduced-motion: no-preference){
    html.ktc-io :is(section h2,section .nhan,.the,.moc .m,.sk .o,.ng .o,.sp .o,.tron-ds .o,.giay figure):not(.hien){
      opacity:0;transform:translate3d(0,20px,0)}
    html.ktc-io :is(section h2,section .nhan,.the,.moc .m,.sk .o,.ng .o,.sp .o,.tron-ds .o,.giay figure){
      transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
    html.ktc-io .hien{opacity:1;transform:none}
  }


  /* ======== HAT VANG KIM ROI (nhan dien thuong hieu) ======== */
  .hat{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .hat i{box-shadow:0 0 6px rgba(246,231,180,.7)}
  .hat i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;
    background:var(--vang);opacity:0;animation:roi linear infinite}
  @keyframes roi{
    0%{opacity:0;transform:translate3d(0,-10px,0) scale(.6)}
    12%{opacity:.75}
    88%{opacity:.5}
    100%{opacity:0;transform:translate3d(14px,420px,0) scale(1)}}
  @media (prefers-reduced-motion:reduce){.hat{display:none}}
  @media (max-width:820px){.hat i:nth-child(n+8){display:none}}

  /* ======== DAI SONG VANG DUOI CHAN (nhan dien thuong hieu) ======== */
  .song{position:absolute;left:0;right:0;bottom:0;height:72px;z-index:0;pointer-events:none;opacity:.3}
  .song svg{width:100%;height:100%;display:block}
  .song path{fill:none;stroke:var(--vang);stroke-width:1.4;stroke-linecap:round}

  /* ======== ANH VANG QUET QUA KHAU QUYET ======== */
  @media (prefers-reduced-motion:no-preference){
    .khauquyet .cau{
      background:linear-gradient(100deg,#8A6B2A 0 36%,#F6E7B4 47%,#E3C878 53%,#8A6B2A 64% 100%);
      background-size:280% 100%;background-position:130% 0;
      -webkit-background-clip:text;background-clip:text;color:transparent;
      animation:quetvang 9s ease-in-out 1s infinite}
    @keyframes quetvang{0%{background-position:130% 0}55%,100%{background-position:-50% 0}}
  }

  /* ======== DUONG PHAN MUC CO HOA VAN GIUA ======== */
  .vien-tren{position:relative}
  .vien-tren::after{content:"";position:absolute;left:50%;top:-7px;translate:-50% 0;
    width:14px;height:14px;rotate:45deg;background:var(--nen);
    border-right:1px solid var(--vang);border-bottom:1px solid var(--vang);opacity:.55;z-index:2}
  .toi.vien-tren::after{background:var(--nen2)}

  /* ======== HOA VAN GOC MUC ======== */
  .hv-goc{position:absolute;width:clamp(76px,7vw,120px);height:auto;pointer-events:none;z-index:0;opacity:.19}
  .hv-goc.tren-phai{right:clamp(14px,2.4vw,42px);top:clamp(14px,2.4vw,42px)}
  .hv-goc.duoi-trai{left:clamp(14px,2.4vw,42px);bottom:clamp(14px,2.4vw,42px);rotate:180deg}
  .hv-goc path{fill:none;stroke:var(--vang);stroke-width:1.4;stroke-linecap:round}

  /* ======== LOGO XOAY NHE KHI RE CHUOT ======== */
  .logo img{transition:transform .5s cubic-bezier(.3,.9,.4,1)}
  .logo:hover img{transform:rotate(-8deg) scale(1.06)}

  /* ======== NUT: anh vang luot qua khi re chuot ======== */
  .nut{position:relative;overflow:hidden}
  .nut::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transition:.55s}
  .nut:hover::after{transform:translateX(120%)}

  /* ======== CON TRIEN: dong xuong khi vao khung ======== */
  .ten3 .o .trien{transition:transform .4s cubic-bezier(.2,.9,.3,1)}
  .ten3 .o:hover .trien{transform:rotate(-4deg) scale(1.06)}


  /* ================= KHUNG TRON VANG KIM quanh chan dung ================= */
  .tron-ds .o{position:relative}
  .tron-ds .vong{position:relative;width:100%;max-width:230px;margin:0 auto 20px;aspect-ratio:1}
  .tron-ds .vong::before{content:"";position:absolute;inset:-15px;border-radius:50%;
    background:conic-gradient(from 205deg,#5E430F,#F6E7B4 8%,#A8801F 18%,#FFF3CF 30%,
      #7A5A18 42%,#E8CE8A 54%,#9C7320 66%,#F6E7B4 78%,#B8902F 88%,#5E430F 100%);
    -webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 15px),#000 calc(50% - 15px));
    mask:radial-gradient(circle,transparent 0 calc(50% - 15px),#000 calc(50% - 15px));
    filter:drop-shadow(0 5px 18px rgba(0,0,0,.7))}
  .tron-ds .vong::after{content:"";position:absolute;inset:-2px;border-radius:50%;
    border:1px solid rgba(246,231,180,.5);pointer-events:none}
  .tron-ds .vong img{width:100%;height:100%;border-radius:50%;object-fit:cover;
    border:0!important;box-shadow:none!important;display:block;position:relative;z-index:1}
  .khung-vang{position:relative;padding:9px;background:
    linear-gradient(145deg,#5E430F,#F6E7B4 16%,#A8801F 32%,#FFF3CF 48%,#7A5A18 64%,#E8CE8A 80%,#B8902F);
    box-shadow:0 6px 22px rgba(0,0,0,.6)}
  .khung-vang::after{content:"";position:absolute;inset:5px;border:1px solid rgba(94,67,15,.65);pointer-events:none;z-index:2}
  .ng .o .khung-vang img{border:0!important;box-shadow:none!important;position:relative;z-index:1}

  /* ================= NEN HOA VAN VAY SONG ================= */


  /* ================= DAI SON DO + CHU THU PHAP DUOI TIEU DE ================= */
  .dai-son{display:block;margin:14px auto 0;width:min(320px,80%);height:auto}
  .dai-son .vet{fill:var(--son)}
  .dai-son .chu{fill:#F6E7B4;font-family:var(--thuphap);font-size:34px;font-weight:700;
    text-anchor:middle;dominant-baseline:central}
  .giua .dai-son{margin-left:auto;margin-right:auto}

  /* ================= DUONG LUON SONG NGAN MUC ================= */
  .vien-tren{border-top:0!important}
  .vien-tren::after{display:none!important}
  .luon{position:absolute;left:0;right:0;top:-1px;height:clamp(40px,4.4vw,72px);
    z-index:3;pointer-events:none;line-height:0;color:transparent}
  /* mau = mau cua muc PHIA TREN, tao cam giac muc tren tran xuong */
  section.navy + section > .luon,header + section > .luon{color:var(--navy)}
  section.toi + section > .luon{color:var(--nen2)}
  section:not(.navy):not(.toi) + section > .luon{color:var(--nen)}
  .luon svg{width:100%;height:100%;display:block}

  /* ================= CON SO: do dam, co chan ================= */
  .so .num{font-family:var(--serif)!important;font-weight:700!important;color:var(--son)!important;letter-spacing:-.01em!important}
  .so .o.noibat .num{color:var(--son-dam)!important}
  .so .lab{text-transform:uppercase!important;letter-spacing:.06em!important;font-size:14px!important}

  /* ================= TIEU DE MUC: them net ================= */
  h2{font-family:var(--serif)!important;font-weight:700!important}


  /* ================= MUC NEN NAVY ================= */
  .navy{background:var(--navy);color:var(--chu-navy);position:relative}
  .navy::before{content:"";position:absolute;inset:0;z-index:0;opacity:.09;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23F6E7B4' stroke-width='1.2'%3E%3Cpath d='M0 56 q 15 -34 30 0 q 15 -34 30 0 q 15 -34 30 0 q 15 -34 30 0'/%3E%3Cpath d='M-15 26 q 15 -34 30 0 q 15 -34 30 0 q 15 -34 30 0 q 15 -34 30 0 q 15 -34 30 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size:120px 60px}
  .navy > *:not(.hat):not(.may-hero):not(.luon):not(.song):not(.nui-co){position:relative;z-index:1}
  .navy h1,.navy h2,.navy h3,.navy .ten,.navy .cty,.navy .ngh{color:var(--chu-navy)}
  .navy p,.navy .mo,.navy .vai,.navy .lab,.navy .chuthich,.navy .giai,.navy .mota{color:var(--chu-navy-mo)}
  .navy .nhan,.navy .dan,.navy .stt,.navy .ngay,.navy .nam,.navy h4{color:var(--vang-sang)}
  .navy .the,.navy .so .o,.navy .sk .o{background:var(--navy)}
  .navy .luoi,.navy .so{background:var(--navy-vien)}
  .navy .the,.navy .so .o,.navy .sk .o,.navy .giay figure{border-color:var(--navy-vien)}
  .navy .vkhung{background:var(--navy2);border-color:var(--navy-vien)}
  .navy em.v,.navy b,.navy strong{color:var(--vang-sang)}
  .navy .nut-phu{color:#fff;border-color:var(--vang)}
  .navy .nut-phu:hover{background:var(--vang);color:var(--navy)}
  .navy .ds li{color:var(--chu-navy)}
  .navy .so .num{color:var(--vang-sang)!important}

  .navy .moc::before{background:linear-gradient(180deg,var(--vang-sang),var(--navy-vien),transparent)}
  .navy .moc .m::before{background:var(--vang-sang)}
  .navy .chuong::before{color:var(--vang-sang);opacity:.13}
  .navy .sen path,.navy .nui-co .net,.navy .nui-co .co,.navy .song path,
  .navy .may-hero path,.navy .hv-goc path{stroke:var(--vang-sang)}
  .navy .trien .khung{stroke:var(--vang-sang)}
  .navy .trien .chu{fill:var(--vang-sang)}

  /* ======= chu nhan tren nen TRANG: dung son do, khong dung vang nhat ======= */
  em.v,b,strong{color:var(--son)}
  .khauquyet .cau{background:none!important;-webkit-text-fill-color:initial!important;
    color:var(--son)!important;animation:none!important}
  .ten-ket,.trich,.loinoi p,.loi{color:var(--son)!important}
  .ten3 .giai b{color:var(--son)}
  .ten3 .ngh{color:var(--vang-dam)}
  .chuong::before{color:var(--vang-dam);opacity:.16}
  .moc::before{background:linear-gradient(180deg,var(--son),var(--vien2),transparent)}
  .moc .m::before{background:var(--son)}
  .moc .nam,.the .stt,.sk .ngay{color:var(--son)}
  .nhan,.dan{color:var(--son)}
  .sen path,.nui-co .net,.nui-co .co,.song path,.may-hero path,.hv-goc path{stroke:var(--vang-dam)}
  .ds li::before,.moc .ds li::before{color:var(--son)}
  .bao span.tv{border-color:var(--son);color:var(--son)}
  .soc svg{fill:var(--son)}
  .soc a:hover{border-color:var(--son);color:var(--son)}
  .soc .ten{color:var(--chu)}
  .sp .o.xem .t{color:var(--son)}
  .re .o.dt{border-color:var(--son)}
  .tron span{color:var(--vang-sang)}
  .matna .play{border-color:var(--vang-sang)}
  .matna .play::before{border-left-color:var(--vang-sang)}
  .nutnhac{background:var(--navy);border-color:var(--navy-vien);color:var(--vang-sang)}


  /* ========== MENU CO TAB CON ========== */
  .menu{align-items:center}
  .menu > a,.menu .co-con > button{color:#DCE5EC;text-decoration:none;font-size:16px;
    font-weight:400;background:none;border:0;cursor:pointer;font-family:var(--sans);
    padding:0;display:inline-flex;align-items:center;gap:7px;line-height:1.4}
  .menu > a:hover,.menu .co-con > button:hover,.menu .co-con[aria-expanded="true"] > button{color:var(--vang-sang)}
  .menu .co-con{position:relative}
  .menu .co-con > button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:.2s}
  .menu .co-con.mo > button::after{rotate:-135deg;translate:0 2px}
  .menu .con{position:absolute;left:50%;translate:-50% 0;top:calc(100% + 16px);min-width:264px;
    background:var(--navy2);border:1px solid var(--navy-vien);box-shadow:0 14px 34px rgba(0,0,0,.42);
    padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s;z-index:70}
  .menu .co-con:hover .con,.menu .co-con.mo .con{opacity:1;visibility:visible;transform:none}
  .menu .con a{display:block;padding:12px 22px;color:#DCE5EC;text-decoration:none;font-size:15.5px;line-height:1.45}
  .menu .con a:hover{background:rgba(201,161,74,.14);color:var(--vang-sang)}
  .menu .con::before{content:"";position:absolute;left:50%;top:-6px;translate:-50% 0;width:11px;height:11px;
    rotate:45deg;background:var(--navy2);border-left:1px solid var(--navy-vien);border-top:1px solid var(--navy-vien)}

  @media(max-width:820px){
    .menu{align-items:stretch}
    .menu > a,.menu .co-con > button{padding:15px clamp(22px,6vw,40px);font-size:17px;
      border-bottom:1px solid var(--navy-vien);width:100%;justify-content:space-between}
    .menu .co-con{width:100%}
    .menu .con{position:static;translate:none;transform:none;min-width:0;border:0;box-shadow:none;
      background:rgba(0,0,0,.22);padding:0;max-height:0;overflow:hidden;opacity:1;visibility:visible;
      transition:max-height .28s ease}
    .menu .co-con.mo .con{max-height:340px}
    .menu .con::before{display:none}
    .menu .con a{padding:13px clamp(36px,10vw,58px);font-size:16px;border-bottom:1px solid var(--navy-vien)}
    .menu .co-con:hover .con{max-height:0}
    .menu .co-con.mo .con{max-height:340px}
  }


  /* ===== CHAN TRANG: chu sang tren nen navy ===== */
  footer{color:#CFDAE3}
  footer p,footer .dong,footer .dong span,footer .ftduoi p{color:#CFDAE3!important}
  footer .cty{color:#FFFFFF!important;font-weight:600}
  footer h4{color:var(--vang-sang)!important}
  footer .dong b{color:#FFFFFF!important;font-weight:600}
  footer a,footer .ftduoi a{color:#CFDAE3!important}
  footer a:hover,footer .ftduoi a:hover{color:var(--vang-sang)!important}
  footer .ft > div > p[style]{color:var(--vang-sang)!important}
  .ftduoi{border-top-color:var(--navy-vien)!important}


  /* nhay dung muc khi bam neo: tru chieu cao thanh menu dinh tren */
  section[id],header{scroll-margin-top:clamp(84px,9vw,118px)}
  /* khai bao width/height tren the img khong duoc lam meo anh */
  img{height:auto}
  .tron-ds img,.khung-vang .anh,.sk .o img,.bao img,.giay img,.sp img,.vkhung img,
  .re img,.moc img,.the img{height:100%}

  /* muc chan trang dang KHOA: van hien, bam khong duoc */
  .ft-khoa{display:block;margin-bottom:11px;font-size:17px;font-weight:400;line-height:1.5;
    color:var(--chu-mo);opacity:.5;cursor:not-allowed;user-select:none}

  /* nut dang KHOA: van hien, bam khong duoc */
  .nut.khoa{background:var(--vien2);border-color:var(--vien2);color:#fff;
    cursor:not-allowed;pointer-events:none;box-shadow:none;opacity:.92}
  /* nut nhac nen */
  .nutnhac{position:fixed;right:22px;bottom:22px;z-index:90;width:52px;height:52px;border-radius:50%;
    background:rgba(19,19,24,.92);border:1px solid var(--vien2);color:var(--vang);cursor:pointer;
    display:none;align-items:center;justify-content:center;backdrop-filter:blur(10px);
    transition:border-color .2s,color .2s}
  .nutnhac:hover{border-color:var(--vang);color:var(--vang-sang)}
  .nutnhac svg{width:21px;height:21px;fill:currentColor}
  .nutnhac .song{transform-origin:center;animation:song 1.6s ease-in-out infinite}
  .nutnhac.im .song{animation:none;opacity:.25}
  @keyframes song{0%,100%{opacity:.35}50%{opacity:1}}
  @media(max-width:640px){.nutnhac{right:14px;bottom:14px;width:46px;height:46px}}
  footer{background:var(--navy);padding:clamp(56px,5.5vw,86px) 0 0;border-top:1px solid var(--vien)}
  footer p{font-size:17px;color:var(--chu-mo);font-weight:400;margin:0 0 11px;max-width:none;line-height:1.6}
  .ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(26px,3vw,52px)}
  @media(max-width:900px){.ft{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.ft{grid-template-columns:1fr}}
  .ft h4{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--vang);margin:0 0 18px}
  .ft .cty{font-family:var(--sans);font-size:19px;font-weight:500;color:var(--trang);line-height:1.45;margin-bottom:16px}
  .ft .dong{display:flex;gap:10px;font-size:17px;color:var(--chu-mo);margin-bottom:11px;line-height:1.55;font-weight:400}
  .ft .dong b{color:var(--chu);font-weight:500;flex:none}
  .ft a{color:var(--chu-mo);text-decoration:none;font-size:17px;font-weight:400;display:block;margin-bottom:11px;line-height:1.5}
  .ft a:hover{color:var(--vang-sang)}
  .ft .bando{border:1px solid var(--vien);width:100%;height:240px;filter:grayscale(.85) brightness(.55) contrast(1.05)}
  .ft .bando:hover{filter:none}
  .ftduoi a{color:var(--chu-mo);text-decoration:none}
  .ftduoi a:hover{color:var(--vang-sang)}
  .ftduoi{margin-top:clamp(40px,4vw,58px);border-top:1px solid var(--vien);
    padding:26px 0 36px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
  .ftduoi p{font-size:16px;margin:0}
  .ftduoi .ch{display:flex;gap:22px;flex-wrap:wrap}
  .ftduoi .ch a{font-size:16px;margin:0}


  /* ===== tab Kien thuc: chu la link vao trang bai viet, mui ten de so tab con ===== */
  .menu .co-con{display:flex;align-items:center;gap:2px}
  .menu .co-con > a.cha{color:#DCE5EC;text-decoration:none;font-family:var(--sans);
    font-size:16px;font-weight:400;line-height:1.4;padding:0}
  .menu .co-con:hover > a.cha,.menu .co-con.mo > a.cha{color:var(--vang-sang)}
  .menu .co-con > button{gap:0}
  @media(max-width:820px){
    .menu .co-con{align-items:stretch;flex-wrap:wrap;border-bottom:1px solid var(--vien)}
    .menu .co-con > .con{flex:0 0 100%;width:100%;order:3}
    .menu .co-con > a.cha{flex:1;display:flex;align-items:center;
      padding:15px clamp(22px,6vw,40px);font-size:17px;border-bottom:0}
    .menu .co-con > button{width:auto;flex:none;border-bottom:0;
      padding:15px clamp(22px,6vw,40px) 15px 10px}
  }