/* =========================================================
   THANH PHAN NHAN DIEN - giu dung phong cach hien tai
   nau #321301 + vang #EDB24F, chi chuan hoa ty le va khoang cach
   ========================================================= */

/* ---------- Thanh tren cung ---------- */
.vdd-topbar{background:#1C0F04;color:#E8DCCB;font-size:var(--vdd-text-sm)}
.vdd-topbar__inner{
  max-width:var(--vdd-normal);margin-inline:auto;padding:.5rem var(--vdd-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--vdd-s4);flex-wrap:wrap;
}
.vdd-topbar a{color:inherit;text-decoration:none}
.vdd-topbar a:hover{color:var(--vdd-gold)}
.vdd-topbar__phone{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--vdd-gold);font-size:var(--vdd-text-md);font-variant-numeric:tabular-nums}
.vdd-topbar__social{display:flex;gap:var(--vdd-s3);align-items:center}
.vdd-topbar__social svg{width:1.1rem;height:1.1rem;fill:currentColor;display:block}

/* ---------- Header nau ---------- */
.vdd-header{background:var(--vdd-brown);color:var(--vdd-gold)}
.vdd-header__inner{
  max-width:var(--vdd-normal);margin-inline:auto;padding:var(--vdd-s4) var(--vdd-gutter);
  display:flex;align-items:center;gap:var(--vdd-s5);justify-content:space-between;
}
.vdd-brand{display:flex;align-items:center;gap:var(--vdd-s3);text-decoration:none;min-width:0}
.vdd-brand img{height:clamp(44px,6vw,62px);width:auto;flex:none}
.vdd-brand__text{display:block;min-width:0}
.vdd-brand__sub{
  font-family:var(--vdd-font-body);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vdd-gold-deep);font-weight:700;margin:0;
}
.vdd-brand__name{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.1;letter-spacing:.01em;
  color:var(--vdd-gold);margin:0;
}

/* Dieu huong chinh - hien ngang tren may ban, gom lai tren dien thoai */
.vdd-mainnav{display:none}
.vdd-mainnav ul{display:flex;gap:var(--vdd-s5);list-style:none;margin:0;padding:0}
.vdd-mainnav a{
  color:#F0E4D2;text-decoration:none;font-size:var(--vdd-text-sm);font-weight:600;
  padding-block:.4em;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--vdd-dur) var(--vdd-ease),border-color var(--vdd-dur) var(--vdd-ease);
}
.vdd-mainnav a:hover,.vdd-mainnav .current-menu-item > a{color:var(--vdd-gold);border-color:var(--vdd-gold)}
@media (min-width:1024px){.vdd-mainnav{display:block}}

.vdd-burger{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  background:var(--vdd-gold);color:var(--vdd-brown);border:0;border-radius:var(--vdd-r-sm);cursor:pointer;
}
.vdd-burger svg{width:1.4rem;height:1.4rem;fill:currentColor}
@media (min-width:1024px){.vdd-burger{display:none}}

/* ---------- Thanh tim kiem vang ---------- */
/* Giu mau vang dac trung nhung giam chieu cao va bo vien cho gon */
.vdd-search{background:var(--vdd-brown);padding:0 var(--vdd-gutter) var(--vdd-s4)}
.vdd-search__form{
  max-width:var(--vdd-normal);margin-inline:auto;
  display:flex;background:var(--vdd-gold);border-radius:var(--vdd-r-sm);overflow:hidden;
}
.vdd-search__input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-base);
  padding:.85em 1em;color:#2B1A05;
}
.vdd-search__input::placeholder{color:rgba(43,26,5,.62)}
.vdd-search__input:focus{outline:0}
.vdd-search__form:focus-within{box-shadow:inset 0 0 0 2px var(--vdd-brown)}
.vdd-search__btn{
  border:0;background:var(--vdd-brown);color:var(--vdd-gold);
  padding-inline:1.1em;cursor:pointer;display:grid;place-items:center;
  transition:background var(--vdd-dur) var(--vdd-ease);
}
.vdd-search__btn:hover{background:#4A2208}
.vdd-search__btn svg{width:1.15rem;height:1.15rem;fill:currentColor}

/* ---------- Banner kem ---------- */
/* Thay cho anh banner co chu nuong san: chu la HTML that,
   doc duoc, dich duoc, khong vo khi doi khung man hinh. */
.vdd-banner{background:var(--vdd-cream);border-bottom:3px solid var(--vdd-gold)}
.vdd-banner__inner{
  max-width:var(--vdd-normal);margin-inline:auto;
  padding:clamp(2rem,5vw,3.5rem) var(--vdd-gutter);
}
/* Chia cot do khoi wp-block-columns ben trong lo, khong dat grid o day:
   long hai luoi vao nhau lam cot con bi bop con 221px o kho may ban. */
.vdd-banner .wp-block-columns{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin:0;
}
.vdd-banner .wp-block-column{flex:1 1 320px;min-width:0}
@media (min-width:880px){
  .vdd-banner .wp-block-column:first-child{flex:1 1 55%}
  .vdd-banner .wp-block-column:last-child{flex:1 1 38%}
}
.vdd-banner__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-4xl);line-height:1.1;letter-spacing:-.01em;
  color:var(--vdd-brown);margin:0 0 var(--vdd-s4);text-transform:uppercase;
  text-wrap:balance;
}
.vdd-banner__title em{font-style:normal;color:var(--vdd-gold-deep);display:block}
.vdd-banner__desc{color:var(--vdd-ink-2);font-size:var(--vdd-text-md);max-width:46ch;margin:0 0 var(--vdd-s5)}
.vdd-banner__actions{display:flex;flex-wrap:wrap;gap:var(--vdd-s3)}
.vdd-banner__media{position:relative}
.vdd-banner__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:4px solid var(--vdd-gold);border-radius:var(--vdd-r-sm);
}
.vdd-banner__tag{
  position:absolute;left:0;bottom:-.75rem;
  background:var(--vdd-brown);color:var(--vdd-gold);
  font-size:var(--vdd-text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.55em 1em;
}

/* ---------- Dau muc danh muc ---------- */
/* Gach vang duoi tieu de - lay y tu cach site hien tai nhan manh bang vang */
.vdd-cathead{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--vdd-s4);
  flex-wrap:wrap;margin-bottom:var(--vdd-s6);
  border-bottom:1px solid var(--vdd-line);padding-bottom:var(--vdd-s3);
}
.vdd-cathead__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-xl);color:var(--vdd-brown);margin:0;
  position:relative;padding-bottom:var(--vdd-s3);
}
.vdd-cathead__title::after{
  content:"";position:absolute;left:0;bottom:-1px;width:3.5rem;height:3px;background:var(--vdd-gold);
}
/* Dau muc la khoi Nhom: tieu de + doan van chua lien ket.
   Chon ca the <a> ben trong lan chinh no, de con dung neu khach go
   lien ket di hoac doi sang the khac. */
.vdd-cathead__link{margin:0}
.vdd-cathead__link,
.vdd-cathead__link a{
  font-size:var(--vdd-text-sm);font-weight:600;color:var(--vdd-brown);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4em;
}
.vdd-cathead__link a::after,
.vdd-cathead__link:not(:has(a))::after{content:"→";transition:transform var(--vdd-dur) var(--vdd-ease)}
.vdd-cathead__link a:hover{color:var(--vdd-gold-deep)}
.vdd-cathead__link a:hover::after{transform:translateX(3px)}

/* ---------- Nut lien he gom lai mot cho ---------- */
/* Site hien tai co 3 widget chong len nhau che gan nua man hinh.
   Gom thanh mot cot gon o canh TRAI: hotline va Zalo.
   Nut len dau trang van o phai cho dung cho quen thuoc. */
.vdd-contact{
  position:fixed;left:.75rem;bottom:.75rem;z-index:95;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
}
.vdd-contact__btn{
  display:flex;align-items:center;gap:0;
  height:3rem;padding:0;
  border-radius:999px;
  color:#fff;text-decoration:none;
  box-shadow:var(--vdd-shadow-md);
  transition:transform .2s var(--vdd-ease),box-shadow .2s var(--vdd-ease);
}
.vdd-contact__ico{
  flex:none;width:3rem;height:3rem;
  display:grid;place-items:center;
}
.vdd-contact__btn svg{width:1.45rem;height:1.45rem;fill:currentColor;display:block}
.vdd-contact__btn:hover{transform:translateY(-2px);color:#fff;box-shadow:var(--vdd-shadow-lg,0 14px 32px -12px rgba(0,0,0,.5))}
.vdd-contact__btn:focus-visible{outline:2px solid var(--vdd-gold);outline-offset:3px}

/* Nhan chu: an o khung hep, bung ra khi du cho */
.vdd-contact__nhan{
  font-size:var(--vdd-text-sm);font-weight:700;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .3s var(--vdd-ease),opacity .2s var(--vdd-ease),padding .3s var(--vdd-ease);
}
.vdd-contact__btn--phone{background:var(--vdd-goi)}
.vdd-contact__btn--zalo{background:var(--vdd-zalo)}

/* Vong sang nhip nhe quanh nut goi - huong mat den so hotline */
.vdd-contact__btn--phone .vdd-contact__ico{position:relative}
.vdd-contact__btn--phone .vdd-contact__ico::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(31,138,59,.55);
  animation:vdd-rung 2.4s var(--vdd-ease) infinite;
}
@keyframes vdd-rung{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .vdd-contact__btn--phone .vdd-contact__ico::before{animation:none;opacity:.5}
}

/* Nut len dau trang: cung nam ben trai. Goc phai da co popup ho tro
   cua site de len. */
.vdd-contact__btn--top{
  background:var(--vdd-brown);color:var(--vdd-gold);
  border:1px solid rgba(237,178,79,.4);
}
.vdd-contact__btn--top:hover{color:var(--vdd-gold)}

@media (min-width:768px){
  .vdd-contact{left:1.25rem;bottom:1.25rem}
  /* Truoc day mo san ca nhan chu, nhung cum nut nay dinh cung mot cho
     nen no de len the san pham o cot dau. Gio thu ve tron nhu mot nut,
     ro chuot vao moi bung chu ra. */
  .vdd-contact__btn:hover .vdd-contact__nhan,
  .vdd-contact__btn:focus-visible .vdd-contact__nhan{
    max-width:12rem;opacity:1;padding-right:1.1rem;
  }
  .vdd-contact__btn--phone .vdd-contact__nhan{font-variant-numeric:tabular-nums}
}

/* ---------- Fanpage Facebook o chan trang ---------- */
/* Khung fanpage: thu gon lai, chi lay phan dau trang + so nguoi theo
   doi, khong lay ca dong anh ban be - chan trang khong can cao the. */
.vdd-fanpage{
  border-radius:var(--vdd-r-sm);overflow:hidden;
  background:#fff;max-width:280px;
  border:1px solid rgba(237,178,79,.22);
}
.vdd-fanpage iframe{display:block;width:100%;height:130px;border:0}
.vdd-fanpage__link{
  display:inline-block;margin-top:var(--vdd-s3);
  font-size:var(--vdd-text-xs);color:var(--vdd-gold);text-decoration:none;
}
.vdd-fanpage__link:hover{text-decoration:underline}

/* Huy hieu DMCA */
.vdd-dmca{display:inline-flex;align-items:center;opacity:.85;transition:opacity var(--vdd-dur) var(--vdd-ease)}
.vdd-dmca:hover{opacity:1}
.vdd-dmca img{display:block;height:1.5rem;width:auto}

/* ---------- Chan trang nau ---------- */
.vdd-footer{background:var(--vdd-brown);color:#D9CBB8;padding-block:var(--vdd-s8) var(--vdd-s5)}
.vdd-footer a{color:#D9CBB8;text-decoration:none}
.vdd-footer a:hover{color:var(--vdd-gold)}
.vdd-footer__grid{display:grid;gap:var(--vdd-s7);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.vdd-footer__title{
  font-family:var(--vdd-font-display);font-size:var(--vdd-text-base);letter-spacing:.06em;
  text-transform:uppercase;color:var(--vdd-gold);margin:0 0 var(--vdd-s4);font-weight:700;
}
.vdd-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--vdd-s3);font-size:var(--vdd-text-sm);line-height:1.6}

/* Thong tin lien he: moi dong co icon dan dau cho de quet mat */
.vdd-footer__list--icon li{display:flex;gap:.6rem;align-items:flex-start}
.vdd-footer__ico{
  flex:none;display:grid;place-items:center;
  width:1.5rem;height:1.5rem;margin-top:.05rem;
  border-radius:50%;
  background:rgba(237,178,79,.12);
  color:var(--vdd-gold);
}
.vdd-footer__ico svg{width:.95rem;height:.95rem;fill:currentColor;display:block}
.vdd-footer__bottom{
  margin-top:var(--vdd-s7);padding-top:var(--vdd-s4);border-top:1px solid rgba(237,178,79,.22);
  font-size:var(--vdd-text-xs);color:rgba(217,203,184,.68);
  display:flex;flex-wrap:wrap;gap:var(--vdd-s4);justify-content:space-between;
}

/* Sua: icon trong so dien thoai phai co kich thuoc co dinh,
   neu khong SVG se gian het co va lam vo dong. */
.vdd-topbar__phone svg{width:1.05rem;height:1.05rem;fill:currentColor;flex:none}
.vdd-topbar__phone{white-space:nowrap}

/* =========================================================
   KHOP VOI GENERATEPRESS
   ========================================================= */

/* Logo: GeneratePress in anh o kich thuoc goc (768px) nen tran khoi
   header. Gioi han theo chieu cao, de chieu rong tu tinh. */
.site-logo img,
img.custom-logo,
.site-header .site-logo img{
  max-height:clamp(42px,6.5vw,64px);
  width:auto;
  height:auto;
}
.site-header .site-branding-container{min-width:0}

/* Nut: GeneratePress va WordPress deu dat nen cho .wp-element-button,
   do uu tien cao hon lop .vdd-btn nen nut bi xam. Chi ro hon de thang. */
.wp-block-button.vdd-btn > .wp-block-button__link,
.wp-block-button.vdd-btn > .wp-element-button,
.entry-content .wp-block-button.vdd-btn > .wp-block-button__link{
  background:var(--vdd-brown);
  border:1px solid var(--vdd-brown);
  color:#FFFFFF;
  border-radius:var(--vdd-r-sm);
  font-family:var(--vdd-font-body);
  font-size:var(--vdd-text-sm);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:1.05em 2em;
  line-height:1;
  text-decoration:none;
  transition:background var(--vdd-dur) var(--vdd-ease),border-color var(--vdd-dur) var(--vdd-ease),color var(--vdd-dur) var(--vdd-ease);
}
.wp-block-button.vdd-btn > .wp-block-button__link:hover,
.wp-block-button.vdd-btn > .wp-element-button:hover,
.entry-content .wp-block-button.vdd-btn > .wp-block-button__link:hover{
  background:var(--vdd-gold);
  border-color:var(--vdd-gold);
  color:var(--vdd-brown);
}
.wp-block-button.vdd-btn--ghost > .wp-block-button__link,
.wp-block-button.vdd-btn--ghost > .wp-element-button,
.entry-content .wp-block-button.vdd-btn--ghost > .wp-block-button__link{
  background:transparent;
  border-color:var(--vdd-line-2);
  color:var(--vdd-ink);
}
.wp-block-button.vdd-btn--ghost > .wp-block-button__link:hover,
.wp-block-button.vdd-btn--ghost > .wp-element-button:hover{
  background:var(--vdd-brown);
  border-color:var(--vdd-brown);
  color:#FFFFFF;
}

/* Le ngang do assets/css/layout.css quan ly - xem quy uoc trong do. */

/* Anh trong banner do khoi html chen vao - can bo vien vang nhu thiet ke */
.vdd-banner__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border:4px solid var(--vdd-gold);border-radius:var(--vdd-r-sm);
}


/* ---------- Chan trang: cot va danh sach showroom ---------- */
.vdd-footer__col{min-width:0}
.vdd-footer__col--info{grid-column:span 1}
@media (min-width:980px){
  /* Bon cot day du thi chia ty le bang tay cho dep: cot showroom can
     rong nhat vi co anh, cot "San pham" chi la danh sach chu nen hep.

     Nhung khach GO TRONG mot tieu de cot la cot do bien mat (xem
     inc/layout.php). Khi do chi con 2-3 cot, ma luat nay van chia
     thanh bon lan dat - cot cuoi se de lai mot khoang trong 1,6 phan
     ben phai. Vi the chi ap khi dung co BON cot; it hon thi roi
     xuong luat auto-fit o tren, tu chia deu, khong ho cho nao. */
  .vdd-footer__grid:has(> .vdd-footer__col:nth-child(4)){
    grid-template-columns:1fr .68fr .85fr 1.6fr;
  }
}

/* Trinh duyet cu khong hieu :has() thi van can bon cot deu dep.
   @supports long nguoc: chi khi KHONG ho tro :has() moi ap. */
@supports not selector(:has(*)){
  @media (min-width:980px){
    .vdd-footer__grid{grid-template-columns:1fr .68fr .85fr 1.6fr}
  }
}
/* Chan trang liet ke NHIEU hotline (nhap o Cai dat > Do Dong Dung
   Quang Ha). Xep mot cot doc, moi so mot dong.

   LOI DA SUA: so bi cat doi giua chung ("0944 58" / "1111") vi nhan
   dai day no xuong dong, lam bon so moi so bat dau mot cho. Gio:
   - so KHOA khong cho xuong dong (white-space:nowrap)
   - so dung truoc nen bon so thang mot hang doc
   - nhan xuong dong rieng ben duoi, chu nho, khong lan vao so        */
.vdd-footer__hotlines{display:flex;flex-direction:column;gap:.3rem}
.vdd-footer__phone{
  display:block;text-decoration:none;
  color:var(--vdd-gold);
}
.vdd-footer__phone b{
  display:block;
  font-weight:700;font-size:var(--vdd-text-md);line-height:1.3;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  /* Day la cho then chot: so dien thoai khong bao gio duoc gay dong. */
  white-space:nowrap;
}
.vdd-footer__phone:hover b{text-decoration:underline}
.vdd-footer__phone small{
  display:block;
  font-size:var(--vdd-text-xs);font-weight:500;letter-spacing:.02em;
  color:rgba(240,228,210,.55);line-height:1.3;
}
/* Showroom co anh that cua tung co so - phan tao uy tin o chan trang */
.vdd-footer__showroom{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--vdd-s4);
  grid-template-columns:repeat(2,minmax(0,1fr));
  font-size:var(--vdd-text-sm);line-height:1.45;
}
.vdd-showcard{
  display:flex;flex-direction:column;gap:.5rem;
  min-width:0;
}
.vdd-showcard__anh{
  width:100%;height:auto;display:block;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--vdd-r-sm);
  border:1px solid rgba(237,178,79,.28);
  background:rgba(255,255,255,.04);
}
.vdd-showcard__dc{
  display:flex;gap:.4rem;align-items:flex-start;
  font-size:var(--vdd-text-xs);line-height:1.5;
}
/* So dien thoai rieng cua tung co so (cot thu ba trong o cai dat).
   Khong gay dong - cung ly do nhu hotline o cot dau chan trang. */
.vdd-showcard__dt{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:-.15rem;
  font-size:var(--vdd-text-xs);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--vdd-gold);text-decoration:none;
}
.vdd-showcard__dt:hover{text-decoration:underline}
.vdd-showcard__ico{display:grid;place-items:center;flex:none}
.vdd-showcard__ico svg{width:.8rem;height:.8rem;fill:currentColor}
.vdd-footer__pin{
  flex:none;display:grid;place-items:center;
  width:1.1rem;height:1.1rem;margin-top:.1rem;
  color:var(--vdd-gold);
}
.vdd-footer__pin svg{width:1rem;height:1rem;fill:currentColor;display:block}

@media (min-width:980px){
  .vdd-footer__showroom{grid-template-columns:repeat(3,minmax(0,1fr))}
}