/* =========================================================
   HEADER GON + THANH MENU CO MEGA MENU
   ========================================================= */

/* ---------- Hang header ---------- */
.vdd-hdr{background:var(--vdd-brown);color:var(--vdd-gold);position:relative;z-index:60}
.vdd-hdr__inner{
  max-width:var(--vdd-normal);margin-inline:auto;
  padding:.7rem var(--vdd-gutter);
  display:flex;align-items:center;gap:clamp(.5rem,2vw,1.25rem);
}

/* Nut icon dung chung */
.vdd-iconbtn{
  flex:none;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;padding:0;
  background:transparent;border:1px solid transparent;border-radius:var(--vdd-r-sm);
  color:var(--vdd-gold);cursor:pointer;
  transition:background var(--vdd-dur) var(--vdd-ease),border-color var(--vdd-dur) var(--vdd-ease);
}
.vdd-iconbtn:hover{background:rgba(237,178,79,.14);border-color:rgba(237,178,79,.3)}
.vdd-iconbtn svg{width:1.3rem;height:1.3rem}

/* Logo */
.vdd-hdr__brand{flex:none;display:flex;align-items:center;text-decoration:none;min-width:0}
.vdd-hdr__brand img{
  max-height:clamp(38px,5.2vw,52px);width:auto;height:auto;display:block;
}
.vdd-hdr__name{
  font-family:var(--vdd-font-display);font-weight:700;color:var(--vdd-gold);
  font-size:clamp(1rem,2.2vw,1.3rem);line-height:1.1;white-space:nowrap;
}

/* O tim kiem - chiem phan con lai */
.vdd-hdr__search{flex:1 1 auto;min-width:0;max-width:420px}
.vdd-searchform{
  display:flex;background:#fff;border-radius:var(--vdd-r-sm);overflow:hidden;
  border:2px solid var(--vdd-gold);
}
.vdd-searchform input[type="search"]{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);
  padding:.7em .9em;color:var(--vdd-ink);
}
.vdd-searchform input[type="search"]::placeholder{color:var(--vdd-muted)}
.vdd-searchform input[type="search"]:focus{outline:0}
.vdd-searchform:focus-within{box-shadow:0 0 0 3px rgba(237,178,79,.3)}
.vdd-searchform button{
  flex:none;border:0;background:var(--vdd-gold);color:var(--vdd-brown);
  padding-inline:1em;cursor:pointer;display:grid;place-items:center;
  transition:background var(--vdd-dur) var(--vdd-ease);
}
.vdd-searchform button:hover{background:var(--vdd-gold-deep)}
.vdd-searchform button svg{width:1.15rem;height:1.15rem}

/* Cum ben phai */
.vdd-hdr__actions{flex:none;display:flex;align-items:center;gap:.4rem}
.vdd-hdr__searchtoggle{display:none}

.vdd-hdr__hotline{
  display:flex;align-items:center;gap:.55rem;
  color:var(--vdd-gold);text-decoration:none;padding:.3rem .5rem;border-radius:var(--vdd-r-sm);
  transition:background var(--vdd-dur) var(--vdd-ease);
}
.vdd-hdr__hotline:hover{background:rgba(237,178,79,.14);color:var(--vdd-gold)}
.vdd-hdr__hotline svg{width:1.4rem;height:1.4rem;flex:none}
.vdd-hdr__hotline-text{display:none;line-height:1.2}
.vdd-hdr__hotline-text small{
  display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(237,178,79,.72);font-weight:600;
}
.vdd-hdr__hotline-text strong{
  display:block;font-size:var(--vdd-text-md);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- Thanh menu ngang ---------- */
.vdd-navbar{
  display:none;
  background:#271003;
  border-top:1px solid rgba(237,178,79,.18);
  position:relative;z-index:55;
}

/* Header co z-index 60 va tu tao mot lop rieng, nen panel menu (du da
   dat z-index 90 ben trong) van bi ca header de len - thay ro nhat o
   cai nut tim noi len tren panel. Chi khi dang mo menu thi nang ca
   thanh menu len tren header; luc do o goi y tim kiem cung dang dong. */
.vdd-navbar:has(.is-open),
.vdd-navbar:hover,
.vdd-navbar:focus-within{z-index:80}
.vdd-navbar__inner{max-width:var(--vdd-normal);margin-inline:auto;padding-inline:var(--vdd-gutter)}

.vdd-nav{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.vdd-nav > li{position:static}
.vdd-nav > li > a{
  display:flex;align-items:center;gap:.3em;
  padding:.85rem 1rem;
  color:#F0E4D2;text-decoration:none;
  font-size:var(--vdd-text-sm);font-weight:600;
  /* Menu chinh viet HOA: day la thanh dieu huong, viet hoa giup phan
     biet ro voi noi dung ben duoi. Du lieu ten danh muc van la kieu
     "chi hoa chu dau" - day chi la cach HIEN THI.
     Menu con khong viet hoa: do la ten san pham, doc nhieu. */
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:color var(--vdd-dur) var(--vdd-ease),border-color var(--vdd-dur) var(--vdd-ease);
}
.vdd-nav > li > a:hover,
.vdd-nav > li:focus-within > a,
.vdd-nav > li.current-menu-item > a{color:var(--vdd-gold);border-bottom-color:var(--vdd-gold)}
.vdd-nav__caret{width:.85em;height:.85em;flex:none;transition:transform var(--vdd-dur) var(--vdd-ease)}
.vdd-nav > li:hover .vdd-nav__caret{transform:rotate(180deg)}

/* ---------- Mega menu ----------
   Dung column-count chu KHONG dung grid.
   Voi grid, moi muc cap 2 thanh mot o rieng nen muc co 10 muc con
   bien thanh mot o cao nghieu, vo bo cuc. column-count cho ca cum
   "tieu de + danh sach con" chay nguyen khoi sang cot ke tiep.
   ------------------------------------------------------------- */

/* Moc dinh vi: wrap ben trong, khong phai ca thanh navbar */
.vdd-navbar__inner{position:relative}

/* Mac dinh panel bam theo muc cha */
.vdd-nav > li{position:relative}

.vdd-nav .sub-menu{
  list-style:none;margin:0;
  position:absolute;top:100%;left:0;z-index:90;
  background:var(--vdd-page);
  border-top:3px solid var(--vdd-gold);
  box-shadow:var(--vdd-shadow-lg);
  padding:clamp(1rem,2vw,1.5rem);
  max-width:calc(100vw - 2 * var(--vdd-gutter));
  display:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--vdd-dur) var(--vdd-ease),
             transform var(--vdd-dur) var(--vdd-ease);
}
/* Mo bang lop .is-open do JS gan - KHONG dung :hover thuan CSS.
   Ly do: ca 5 panel chong khit len nhau cung mot o, neu dua vao
   pointer-events de phan biet thi chi can mot panel dong con sot
   su kien la chuot roi nham sang menu khac. */
.vdd-nav > li.is-open > .sub-menu{
  display:block;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}

/* Moi panel mega deu trai het thanh menu va mo o CUNG MOT CHO.
   Truoc day panel 2-3 cot bam theo muc cha, rieng hai muc cuoi bi lat
   sang trai (right:0) nen mo ra cach xa muc dang hover - nhin nhu panel
   cua menu khac. Dat full-width cho tat ca thi het han loi do. */
.vdd-nav > li.vdd-mega{position:static}
.vdd-nav > li.vdd-mega > .sub-menu{
  left:0;right:0;width:auto;max-width:none;
  column-gap:clamp(1rem,2vw,2rem);

  /* Moi panel CUNG MOT chieu cao.
     Truoc do panel cao tu 101px den 442px, chenh 341px - re chuot
     doc thanh menu la panel phinh ra co vao, nhin nhu menu bi nhay.
     Co dinh chieu cao, noi dung dai thi cuon trong panel. */
  height:min(70vh,26rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
}

/* Thanh cuon trong panel cho kin dao */
.vdd-nav > li.vdd-mega > .sub-menu::-webkit-scrollbar{width:8px}
.vdd-nav > li.vdd-mega > .sub-menu::-webkit-scrollbar-thumb{
  background:var(--vdd-line-2);border-radius:4px;
}
.vdd-nav > li.vdd-mega > .sub-menu{scrollbar-width:thin;scrollbar-color:var(--vdd-line-2) transparent}
.vdd-nav > li.vdd-mega--1 > .sub-menu{column-count:1}
.vdd-nav > li.vdd-mega--2 > .sub-menu{column-count:2}
.vdd-nav > li.vdd-mega--3 > .sub-menu{column-count:3}
.vdd-nav > li.vdd-mega--4 > .sub-menu{column-count:4}

/* Khong de mot cum bi cat doi giua hai cot */
.vdd-nav > li.vdd-mega > .sub-menu > li{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin-bottom:.9rem;
}

/* Muc cap 2 lam tieu de cot */
.vdd-nav .sub-menu > li > a{
  display:block;padding:.4rem .5rem;
  color:var(--vdd-ink-2);text-decoration:none;
  font-size:var(--vdd-text-sm);font-weight:400;
  border-radius:var(--vdd-r-sm);
  transition:background var(--vdd-dur) var(--vdd-ease),color var(--vdd-dur) var(--vdd-ease);
}
.vdd-nav .sub-menu > li > a:hover{background:var(--vdd-gold-soft);color:var(--vdd-brown)}

.vdd-nav > li.vdd-mega > .sub-menu > li.menu-item-has-children > a{
  font-weight:700;color:var(--vdd-brown);
  font-size:var(--vdd-text-sm);letter-spacing:.01em;
  border-bottom:1px solid var(--vdd-line);border-radius:0;
  margin-bottom:.3rem;padding-inline:0;
}
.vdd-nav > li.vdd-mega > .sub-menu > li.menu-item-has-children > a:hover{
  background:transparent;color:var(--vdd-gold-text);
}

/* Cap 3 nam ngay trong cot, khong bay ra ngoai */
.vdd-nav > li.vdd-mega .sub-menu .sub-menu{
  display:block;
  position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
  box-shadow:none;border:0;padding:0;background:transparent;
  width:auto;max-width:none;column-count:1;
}
.vdd-nav > li.vdd-mega .sub-menu .sub-menu > li > a{
  padding:.28rem .5rem .28rem .9rem;font-size:var(--vdd-text-sm);
  color:var(--vdd-ink-2);font-weight:400;white-space:normal;
}
.vdd-nav > li.vdd-mega .sub-menu .sub-menu > li > a::before{
  content:"·";margin-right:.45em;color:var(--vdd-gold);
}

/* ---------- Ngan keo cho dien thoai ---------- */
.vdd-drawer{position:fixed;inset:0;z-index:200}
.vdd-drawer[hidden]{display:none}
.vdd-drawer::before{content:"";position:absolute;inset:0;background:rgba(28,15,4,.6)}
.vdd-drawer__panel{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:min(86vw,22rem);background:var(--vdd-page);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:var(--vdd-shadow-lg);
}
.vdd-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--vdd-s4);background:var(--vdd-brown);color:var(--vdd-gold);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:var(--vdd-text-sm);
  position:sticky;top:0;z-index:2;
}
.vdd-drawer__nav{list-style:none;margin:0;padding:0}
.vdd-drawer__nav li{border-bottom:1px solid var(--vdd-line)}
.vdd-drawer__nav a{
  display:block;padding:.85rem var(--vdd-s4);
  color:var(--vdd-ink);text-decoration:none;font-size:var(--vdd-text-sm);font-weight:600;
}
.vdd-drawer__nav a:hover{background:var(--vdd-gold-soft);color:var(--vdd-brown)}
.vdd-drawer__nav .sub-menu{list-style:none;margin:0;padding:0;background:var(--vdd-sand)}
.vdd-drawer__nav .sub-menu a{font-weight:400;padding-left:calc(var(--vdd-s4) * 2)}

/* ---------- Diem gay ---------- */
@media (max-width:899px){
  /* O tim kiem an di, bat bang nut kinh lup */
  .vdd-hdr__search{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--vdd-brown);padding:.75rem var(--vdd-gutter);
    max-width:none;z-index:70;
  }
  .vdd-hdr__search.is-open{display:block}
  .vdd-hdr__searchtoggle{display:grid}
  .vdd-hdr__brand{margin-inline-end:auto}
}

@media (min-width:900px){
  .vdd-hdr__burger{display:none}
  .vdd-navbar{display:block}
  .vdd-hdr__hotline-text{display:block}
  .vdd-drawer{display:none}
}

/* ---------- Cam ket trong hang header ---------- */
/* Nam ben phai o tim kiem. An dan tren man hinh hep de khong chen. */
.vdd-hdr__trust{
  display:none;flex:none;
  gap:clamp(.75rem,1.6vw,1.5rem);
  align-items:center;
}
.vdd-trust__item{display:flex;align-items:center;gap:.5rem;min-width:0}
.vdd-trust__icon{
  flex:none;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--vdd-gold);color:var(--vdd-brown);
}
.vdd-trust__icon svg{width:1.1rem;height:1.1rem}
.vdd-trust__text{min-width:0;line-height:1.25}
.vdd-trust__text strong{
  display:block;color:var(--vdd-gold);font-weight:700;
  font-size:var(--vdd-text-sm);white-space:nowrap;
}
.vdd-trust__text small{
  display:block;color:rgba(240,228,210,.78);
  font-size:var(--vdd-text-xs);white-space:nowrap;
}

/* Hien dan theo do rong: 1 muc -> 2 muc -> ca 3 */
@media (min-width:1080px){
  .vdd-hdr__trust{display:flex}
  .vdd-trust__item:nth-child(n+2){display:none}
}
@media (min-width:1240px){ .vdd-trust__item:nth-child(2){display:flex} }
@media (min-width:1400px){ .vdd-trust__item:nth-child(3){display:flex} }

/* Co cam ket roi thi hotline thu gon con icon cho do chat */
@media (min-width:1080px){
  .vdd-hdr__hotline-text{display:none}
}
@media (min-width:1560px){
  .vdd-hdr__hotline-text{display:block}
}

/* ---------- Goi y tim kiem ---------- */
.vdd-hdr__search{position:relative}
.vdd-suggest{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:120;
  background:var(--vdd-page);border:1px solid var(--vdd-line);
  border-top:3px solid var(--vdd-gold);
  border-radius:0 0 var(--vdd-r-sm) var(--vdd-r-sm);
  box-shadow:var(--vdd-shadow-lg);
  max-height:min(70vh,30rem);overflow-y:auto;overscroll-behavior:contain;
}
.vdd-suggest[hidden]{display:none}
.vdd-suggest__group{padding:.5rem 0}
.vdd-suggest__group + .vdd-suggest__group{border-top:1px solid var(--vdd-line)}
.vdd-suggest__label{
  margin:0;padding:.4rem .9rem;
  font-size:var(--vdd-text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vdd-gold-text);
}
.vdd-suggest__item{
  display:flex;align-items:center;gap:.7rem;
  padding:.5rem .9rem;text-decoration:none;color:var(--vdd-ink);
  transition:background var(--vdd-dur) var(--vdd-ease);
}
.vdd-suggest__item:hover,.vdd-suggest__item.is-active{background:var(--vdd-gold-soft)}
.vdd-suggest__item img,.vdd-suggest__ph{
  flex:none;width:44px;height:44px;object-fit:cover;border-radius:var(--vdd-r-sm);
  background:var(--vdd-sand);
}
.vdd-suggest__body{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.vdd-suggest__title{
  font-size:var(--vdd-text-sm);line-height:1.35;color:var(--vdd-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vdd-suggest__meta{font-size:var(--vdd-text-xs);color:var(--vdd-gold-text);font-weight:600}
.vdd-suggest__empty{margin:0;padding:1rem .9rem;color:var(--vdd-muted);font-size:var(--vdd-text-sm)}
.vdd-suggest__more{
  display:block;padding:.7rem .9rem;text-align:center;text-decoration:none;
  background:var(--vdd-sand);color:var(--vdd-brown);
  font-size:var(--vdd-text-sm);font-weight:700;
  border-top:1px solid var(--vdd-line);
}
.vdd-suggest__more:hover,.vdd-suggest__more.is-active{background:var(--vdd-gold);color:var(--vdd-brown)}

/* =========================================================
   MENU SO XUONG (it muc con)

   Muc nao chi co vai muc con thi khong dung mega menu trai het be
   rong man hinh - vua thua cho vua lam nguoi dung phai dua mat di xa.
   Dung bang so xuong gon ngay duoi muc cha.
   ========================================================= */
.vdd-nav > li.vdd-sodown{position:relative}
.vdd-nav > li.vdd-sodown > .sub-menu{
  position:absolute;top:100%;left:0;z-index:90;
  /* Mac dinh dong - mo bang lop .is-open do JS gan, giong mega menu */
  display:none;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--vdd-dur) var(--vdd-ease),
             transform var(--vdd-dur) var(--vdd-ease);
  min-width:15rem;max-width:22rem;
  margin:0;padding:var(--vdd-s3);
  list-style:none;
  background:var(--vdd-page);
  border-radius:0 0 var(--vdd-r-sm) var(--vdd-r-sm);
  box-shadow:var(--vdd-shadow-lg);
  border-top:3px solid var(--vdd-gold);
}
.vdd-nav > li.vdd-sodown > .sub-menu > li{margin:0;break-inside:auto}
.vdd-nav > li.vdd-sodown > .sub-menu > li > a{
  display:block;padding:.55rem .75rem;
  font-size:var(--vdd-text-sm);line-height:1.45;
  color:var(--vdd-ink);text-decoration:none;
  border-radius:var(--vdd-r-sm);
  transition:background var(--vdd-dur) var(--vdd-ease),color var(--vdd-dur) var(--vdd-ease);
}
.vdd-nav > li.vdd-sodown > .sub-menu > li > a:hover{
  background:var(--vdd-sand);color:var(--vdd-brown);
}
/* Muc con cap 3 - hiem, nhung co thi xep thut vao */
.vdd-nav > li.vdd-sodown .sub-menu .sub-menu{
  position:static;box-shadow:none;border:0;padding:0 0 0 var(--vdd-s4);min-width:0;
}
/* Gan mep phai man hinh thi lat sang trai cho khoi tran */
.vdd-nav > li.vdd-sodown:nth-last-child(-n+2) > .sub-menu{left:auto;right:0}

/* Luat mo cho menu so xuong.
   Phai viet SAU khoi .vdd-sodown o tren: hai luat do dam dac bang nhau
   (0,3,1) nen cai nao viet sau thi thang. Neu khong, .sub-menu giu
   display:none va bam vao khong thay gi. */
.vdd-nav > li.vdd-sodown.is-open > .sub-menu{
  display:block;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}