/* =========================================================
   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){
  .vdd-footer__grid{grid-template-columns:1fr .68fr .85fr 1.6fr}
}
.vdd-footer__phone{
  color:var(--vdd-gold);font-weight:700;font-size:var(--vdd-text-md);
  font-variant-numeric:tabular-nums;
}
/* 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;
}
.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))}
}