/* =========================================================
   THANH PHAN GIAO DIEN
   ========================================================= */

/* ---------- Khung & nhip khoi ---------- */
.vdd-container{width:100%;max-width:var(--vdd-normal);margin-inline:auto;padding-inline:var(--vdd-gutter)}
.vdd-container--wide{max-width:var(--vdd-wide)}
.vdd-container--narrow{max-width:var(--vdd-narrow)}

.vdd-section{padding-block:clamp(3rem,7vw,6rem)}
.vdd-section--tight{padding-block:clamp(2rem,4vw,3.5rem)}
.vdd-section--sand{background:var(--vdd-sand)}
.vdd-section--brown{background:var(--vdd-brown);color:#EFE3D2}
.vdd-section--brown h1,.vdd-section--brown h2,.vdd-section--brown h3{color:var(--vdd-gold)}
.vdd-section--brown .vdd-eyebrow{color:var(--vdd-gold)}

/* Dau muc khoi: gach vang mong, khong phai the bo goc */
.vdd-section-head{margin-bottom:clamp(2rem,4vw,3rem)}
.vdd-section-head__title{margin:0 0 var(--vdd-s3)}
.vdd-section-head__desc{color:var(--vdd-muted);max-width:60ch;margin:0}
.vdd-section-head--center{text-align:center}
.vdd-section-head--center .vdd-section-head__desc{margin-inline:auto}

/* Duong ke trang tri mang y nghia: ngan cach, khong vien vo */
.vdd-rule{height:1px;background:linear-gradient(90deg,var(--vdd-line-2),transparent);border:0;margin:0}

/* ---------- Nut ---------- */
.vdd-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link{
  --_bg:var(--vdd-brown);
  --_fg:#FFFFFF;
  --_bd:var(--vdd-brown);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--vdd-s2);
  font-family:var(--vdd-font-body);
  font-size:var(--vdd-text-sm);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  padding:1.05em 2em;
  border:1px solid var(--_bd);
  border-radius:var(--vdd-r-sm);
  background:var(--_bg);
  color:var(--_fg);
  text-decoration:none;
  cursor:pointer;
  transition:background var(--vdd-dur) var(--vdd-ease),
             color var(--vdd-dur) var(--vdd-ease),
             border-color var(--vdd-dur) var(--vdd-ease),
             transform .18s var(--vdd-ease);
}
.vdd-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover{
  --_bg:var(--vdd-gold);
  --_bd:var(--vdd-gold);
  --_fg:var(--vdd-brown);
  color:var(--vdd-brown);
}
.vdd-btn:active{transform:translateY(1px)}

.vdd-btn--gold{--_bg:var(--vdd-gold);--_bd:var(--vdd-gold);--_fg:var(--vdd-brown)}
.vdd-btn--ghost{--_bg:transparent;--_bd:var(--vdd-line-2);--_fg:var(--vdd-ink)}
.vdd-btn--ghost:hover{--_bg:var(--vdd-brown);--_bd:var(--vdd-brown);--_fg:#FFFFFF;color:#FFFFFF}
.vdd-btn--lg{padding:1.2em 2.6em;font-size:var(--vdd-text-base)}

/* Lien ket dang mui ten - dung thay nut phu */
.vdd-link{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--vdd-text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vdd-ink);text-decoration:none;
  border-bottom:1px solid var(--vdd-line-2);padding-bottom:.35em;
  transition:color var(--vdd-dur) var(--vdd-ease),border-color var(--vdd-dur) var(--vdd-ease);
}
.vdd-link::after{content:"→";transition:transform var(--vdd-dur) var(--vdd-ease)}
.vdd-link:hover{color:var(--vdd-gold-text);border-color:var(--vdd-gold-text)}
.vdd-link:hover::after{transform:translateX(4px)}

/* ---------- Luoi ---------- */
.vdd-grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.vdd-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.vdd-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.vdd-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

/* ---------- Khoi cam ket ----------

   Moi muc la mot the: dau muc (con so that hoac bieu tuong) nam tren,
   roi den tieu de va mot dong giai thich. Khong dung so dem 01/02/03 -
   no khong noi len dieu gi.                                          */
.vdd-values{display:grid;gap:clamp(1rem,2.2vw,1.5rem);border:0}

.vdd-values__item{
  position:relative;height:100%;
  display:flex;flex-direction:column;gap:var(--vdd-s3);
  padding:clamp(1.5rem,2.8vw,2rem) clamp(1.25rem,2.4vw,1.75rem);
  background:var(--vdd-page);
  border:1px solid var(--vdd-line);
  border-radius:var(--vdd-r-md);
  transition:border-color var(--vdd-dur) var(--vdd-ease),
             box-shadow var(--vdd-dur) var(--vdd-ease),
             transform var(--vdd-dur) var(--vdd-ease);
}
.vdd-values__item:hover{
  border-color:var(--vdd-gold);
  box-shadow:var(--vdd-shadow-md);
  transform:translateY(-2px);
}

/* Hang dau (bieu tuong HOAC con so) cao bang nhau o moi the, de tieu
   de ben duoi thang hang - so "120" cao hon vong tron bieu tuong. */
.vdd-values__ico,
.vdd-values__num{
  display:flex;align-items:center;
  min-height:3.25rem;
}

/* Bieu tuong trong vong tron vang nhat */
.vdd-values__ico{
  width:3.25rem;flex:none;
  justify-content:center;
  border-radius:50%;
  background:var(--vdd-gold-soft);
  color:var(--vdd-gold-text);
}
.vdd-values__ico svg{width:1.6rem;height:1.6rem;fill:currentColor;display:block}

/* Con so THAT (900, 120, 7) - to va vang */
.vdd-values__num{
  margin:0;
  font-family:var(--vdd-font-display);
  font-size:clamp(2.25rem,4.4vw,3rem);
  font-weight:700;line-height:.95;
  color:var(--vdd-gold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.vdd-values__title{
  margin:0;font-size:var(--vdd-text-md);
  color:var(--vdd-brown);line-height:1.35;
}
.vdd-values__desc{
  margin:0 0 auto;color:var(--vdd-ink-2);
  font-size:var(--vdd-text-sm);line-height:1.65;max-width:52ch;
}

/* Gach vang mong o canh tren - dau nhan dien, nhe hon vach ben trai */
.vdd-values__item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--vdd-gold);
  border-radius:var(--vdd-r-md) var(--vdd-r-md) 0 0;
}

@media (min-width:600px) and (max-width:899px){
  .vdd-values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vdd-values__item:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:900px){
  .vdd-values{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Tren nen nau thi dao mau cho doc duoc */
.vdd-section--brown .vdd-values__item{
  background:rgba(255,255,255,.05);
  border-color:rgba(237,178,79,.28);
}
.vdd-section--brown .vdd-values__title{color:var(--vdd-gold)}
.vdd-section--brown .vdd-values__desc{color:rgba(240,228,210,.84)}

/* ---------- Trich dan / cam ket ---------- */
.vdd-quote{
  font-family:var(--vdd-font-display);
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.38;
  color:var(--vdd-ink);
  margin:0;
  padding-left:clamp(1rem,3vw,2rem);
  border-left:2px solid var(--vdd-gold);
  text-wrap:pretty;
}
.vdd-quote__by{
  display:block;margin-top:var(--vdd-s4);
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--vdd-muted);font-weight:600;
}

/* ---------- Dai so lieu ---------- */
.vdd-stats{
  display:grid;gap:1px;background:var(--vdd-line);
  /* Luon chia het hang - khong dung auto-fit vi no de lai o mo coi */
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:780px){ .vdd-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.vdd-stats__item{background:var(--vdd-page);padding:var(--vdd-s6) var(--vdd-s5);min-width:0}
.vdd-stats__num{
  display:block;font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-2xl);line-height:1.05;color:var(--vdd-brown);
  font-variant-numeric:tabular-nums;margin-bottom:var(--vdd-s2);
  overflow-wrap:break-word;
}
/* Gia tri bang chu (vi du "Tron doi") khong the dung co chu cua con so */
.vdd-stats__num--text{font-size:var(--vdd-text-lg);letter-spacing:-.01em}
.vdd-stats__label{font-size:var(--vdd-text-sm);color:var(--vdd-muted);margin:0}
.vdd-section--brown .vdd-stats__label{color:rgba(239,227,210,.72)}

/* =========================================================
   LUOI BAI VIET
   Truoc day nam trong home.css nen chi co o trang chu; cac trang
   chuyen muc, tim kiem, danh muc san pham deu dung chung the nay
   nen phai nam o day moi dung.
   ========================================================= */

.vdd-postgrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){
  .vdd-postgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.vdd-postcard{display:flex;flex-direction:column;gap:var(--vdd-s3);min-width:0}
.vdd-postcard__anh{display:block;overflow:hidden;border-radius:var(--vdd-r-sm);background:var(--vdd-sand)}
.vdd-postcard__anh img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .6s var(--vdd-ease);
}
.vdd-postcard__anh:hover img{transform:scale(1.05)}
.vdd-postcard__title{
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);font-weight:500;
  line-height:1.5;color:var(--vdd-ink);text-decoration:none;
}
.vdd-postcard__title:hover{color:var(--vdd-gold-text)}
.vdd-postcard__date{font-size:var(--vdd-text-xs);color:var(--vdd-muted);margin-top:auto}

/* ---------- Khoi chua co noi dung (chi thay o trang sua) ---------- */
.vdd-trong{
  margin:var(--vdd-s5) auto;max-width:var(--vdd-content);
  padding:var(--vdd-s6);border:1px dashed var(--vdd-line);
  border-radius:var(--vdd-r-sm);background:var(--vdd-sand);
  color:var(--vdd-muted);font-size:var(--vdd-text-sm);text-align:center;
}

/* =========================================================
   DAI KEU GOI LIEN HE
   ========================================================= */
.vdd-cta-band{
  background:var(--vdd-brown);color:#EFE3D2;
  padding-block:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--vdd-s5);
}
.vdd-cta-band__chu{min-width:0;flex:1 1 20rem}
.vdd-cta-band__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-xl);color:var(--vdd-gold);
  margin:0 0 var(--vdd-s2);text-wrap:balance;
}
.vdd-cta-band__desc{margin:0;color:rgba(240,228,210,.84);font-size:var(--vdd-text-base);line-height:1.6}
.vdd-cta-band__nut{display:flex;flex-wrap:wrap;gap:var(--vdd-s3);flex:none}
.vdd-cta-band__nut .vdd-btn{text-transform:none;letter-spacing:0}
.vdd-cta-band__nut .vdd-btn svg{width:1.2rem;height:1.2rem;fill:currentColor;flex:none}

/* =========================================================
   FORM LIEN HE
   ========================================================= */
.vdd-form{max-width:38rem}
.vdd-form__title{
  font-family:var(--vdd-font-display);font-size:var(--vdd-text-xl);
  color:var(--vdd-brown);margin:0 0 var(--vdd-s3);
}
.vdd-form__desc{margin:0 0 var(--vdd-s5);color:var(--vdd-muted);font-size:var(--vdd-text-sm)}

/* O moi nhu - phai an khoi mat nhung van nam trong DOM de may gui rac
   nhin thay va dien vao. Khong dung left:-9999px: phan tu do van nam
   ngoai mep trai vung nhin nen cac phep do bo cuc bao la "tran". */
.vdd-form__moi{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  opacity:0;pointer-events:none;
}

.vdd-form__hang{display:grid;gap:var(--vdd-s4)}
@media (min-width:520px){.vdd-form__hang{grid-template-columns:repeat(2,minmax(0,1fr))}}

.vdd-form__o{display:flex;flex-direction:column;gap:var(--vdd-s2);margin:0 0 var(--vdd-s4)}
.vdd-form__hang .vdd-form__o{margin-bottom:0}
.vdd-form__hang + .vdd-form__o{margin-top:var(--vdd-s4)}
.vdd-form__o label{font-size:var(--vdd-text-sm);font-weight:600;color:var(--vdd-ink)}
.vdd-form__o label span{color:var(--vdd-sale)}
.vdd-form__o input,
.vdd-form__o textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-base);line-height:1.5;
  padding:.75em .9em;color:var(--vdd-ink);background:var(--vdd-page);
  border:1px solid var(--vdd-line-2);border-radius:var(--vdd-r-sm);
  transition:border-color var(--vdd-dur) var(--vdd-ease),box-shadow var(--vdd-dur) var(--vdd-ease);
}
.vdd-form__o textarea{resize:vertical;min-height:7rem}
.vdd-form__o input:focus,
.vdd-form__o textarea:focus{
  outline:0;border-color:var(--vdd-gold-text);
  box-shadow:0 0 0 3px rgba(237,178,79,.22);
}
.vdd-form__nut{margin:var(--vdd-s5) 0 0}
.vdd-form__nut .vdd-btn{width:100%;justify-content:center}
@media (min-width:520px){.vdd-form__nut .vdd-btn{width:auto}}
.vdd-form__ghi{margin:var(--vdd-s4) 0 0;font-size:var(--vdd-text-sm);color:var(--vdd-muted)}
.vdd-form__ghi strong{color:var(--vdd-gold-text);font-variant-numeric:tabular-nums}

.vdd-form__bao{
  margin:0 0 var(--vdd-s5);padding:var(--vdd-s4) var(--vdd-s5);
  border-radius:var(--vdd-r-sm);font-size:var(--vdd-text-sm);font-weight:600;
  border-left:3px solid var(--vdd-stock);background:#EDF5EF;color:#1F4D2E;
}
.vdd-form__bao--loi{border-left-color:var(--vdd-sale);background:var(--vdd-sale-soft);color:#7A1F12}

/* =========================================================
   THE LIEN HE (dien thoai / email / dia chi)
   ========================================================= */
.vdd-lhcards{
  display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:1fr;
  list-style:none;margin:0;padding:0;
}
@media (min-width:720px){.vdd-lhcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vdd-lhcard{
  display:flex;flex-direction:column;gap:var(--vdd-s3);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:var(--vdd-page);
  border:1px solid var(--vdd-line);border-radius:var(--vdd-r-md);
  transition:border-color var(--vdd-dur) var(--vdd-ease),box-shadow var(--vdd-dur) var(--vdd-ease);
}
.vdd-lhcard:hover{border-color:var(--vdd-gold);box-shadow:var(--vdd-shadow-md)}
.vdd-lhcard__ico{
  width:3rem;height:3rem;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--vdd-gold-soft);color:var(--vdd-gold-text);
}
.vdd-lhcard__ico svg{width:1.5rem;height:1.5rem;fill:currentColor;display:block}
.vdd-lhcard__nhan{
  font-size:var(--vdd-text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vdd-muted);margin:0;
}
.vdd-lhcard__gt{margin:0;font-size:var(--vdd-text-md);font-weight:700;color:var(--vdd-brown);line-height:1.45}
.vdd-lhcard__gt a{color:inherit;text-decoration:none}
.vdd-lhcard__gt a:hover{color:var(--vdd-gold-text);text-decoration:underline}
.vdd-lhcard ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--vdd-s2)}
.vdd-lhcard li{font-size:var(--vdd-text-sm);color:var(--vdd-ink-2);line-height:1.6}

/* ---------- Ban do ---------- */
.vdd-map{
  border-radius:var(--vdd-r-md);overflow:hidden;
  border:1px solid var(--vdd-line);background:var(--vdd-sand);
  line-height:0;
}
.vdd-map iframe{width:100%;height:clamp(18rem,42vh,26rem);border:0;display:block}

/* Luoi showroom co anh - dung o trang Lien he */
.vdd-showgrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1rem,2.2vw,1.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:720px){.vdd-showgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vdd-showgrid .vdd-showcard__dc{color:var(--vdd-ink-2)}
.vdd-chip__pin{display:inline-grid;place-items:center;width:1rem;height:1rem;color:var(--vdd-gold-text)}
.vdd-chip__pin svg{width:.9rem;height:.9rem;fill:currentColor;display:block}

/* =========================================================
   KHOI CHU (co the kem anh hoac video mot ben)
   ========================================================= */
.vdd-khoichu{display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
@media (min-width:860px){
  .vdd-khoichu--phai{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .vdd-khoichu--trai{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .vdd-khoichu--trai .vdd-khoichu__chu{order:2}
  .vdd-khoichu--trai .vdd-khoichu__phu{order:1}
}
/* Khoi chu khong co anh hay video thi chi co MOT cot. Neu van bop
   72ch va neo trai thi nua ben phai bo trong, nhin nhu thieu mat anh.
   Cho ca khoi trai het be rong, rieng doan van giu do dai dong de
   doc, con danh sach chia doi thanh hai cot cho day. */
.vdd-khoichu--mot .vdd-khoichu__chu{max-width:none}
.vdd-khoichu--mot .vdd-khoichu__chu > p{max-width:72ch}
@media (min-width:860px){
  .vdd-khoichu--mot .vdd-khoichu__y{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,5vw,4rem);
  }
}
.vdd-khoichu__chu{min-width:0}
.vdd-khoichu__chu .vdd-eyebrow{margin:0 0 var(--vdd-s3)}
.vdd-khoichu__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-xl);line-height:1.25;
  color:var(--vdd-brown);margin:0 0 var(--vdd-s4);
  position:relative;padding-bottom:var(--vdd-s3);text-wrap:balance;
}
.vdd-khoichu__title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:3.5rem;height:3px;background:var(--vdd-gold);
}
.vdd-khoichu__chu p{
  margin:0 0 var(--vdd-s4);color:var(--vdd-ink-2);
  font-size:var(--vdd-text-base);line-height:1.75;
}
.vdd-khoichu__chu p:last-child{margin-bottom:0}
.vdd-khoichu__y{
  list-style:none;margin:var(--vdd-s4) 0 0;padding:0;
  display:grid;gap:var(--vdd-s3);
}
.vdd-khoichu__y li{
  position:relative;padding-left:1.75rem;
  color:var(--vdd-ink-2);font-size:var(--vdd-text-base);line-height:1.6;
}
/* Dau tich ve bang CSS - khong dung ky tu, moi phong chu ve mot kieu */
.vdd-khoichu__y li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:.5rem;height:.85rem;
  border-right:2px solid var(--vdd-gold);
  border-bottom:2px solid var(--vdd-gold);
  transform:rotate(45deg);
}
.vdd-khoichu__phu{min-width:0}
/* Anh ben canh chu: ep cung mot ty le o moi khoi, neu khong moi khoi
   mot chieu cao khac nhau va ca trang nhin so le. */
.vdd-khoichu__anh{
  margin:0;border-radius:var(--vdd-r-md);overflow:hidden;
  background:var(--vdd-sand);
  box-shadow:var(--vdd-shadow-md);
}
.vdd-khoichu__anh img{
  width:100%;height:100%;display:block;
  aspect-ratio:4/3;object-fit:cover;object-position:center;
}
/* Video giu ty le 16:9 cua no, khong ep 4:3 */
.vdd-khoichu__phu .wp-block-embed{border-radius:var(--vdd-r-md);overflow:hidden}
.vdd-khoichu__phu .wp-block-embed{margin:0}
.vdd-section--brown .vdd-khoichu__title{color:var(--vdd-gold)}
.vdd-section--brown .vdd-khoichu__chu p,
.vdd-section--brown .vdd-khoichu__y li{color:rgba(240,228,210,.86)}

/* =========================================================
   THU VIEN KIEU KHAM
   Mot anh lon dan dau roi den cac anh nho - co nhip hon la tam anh
   vuong y het nhau.
   ========================================================= */
@media (min-width:760px){
  .vdd-gallery--kham{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:1fr;
  }
  .vdd-gallery--kham > .vdd-gallery__item:first-child{
    grid-column:span 2;grid-row:span 2;
  }
  .vdd-gallery--kham > .vdd-gallery__item:first-child img{aspect-ratio:1/1}
}