/* =========================================================
   TRANG CHU
   ========================================================= */

/* ---------- Slider banner dau trang ---------- */
.vdd-slider{
  position:relative;background:var(--vdd-brown);overflow:hidden;
}
.vdd-slider__track{
  display:flex;list-style:none;margin:0;padding:0;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.vdd-slider__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion: reduce){
  .vdd-slider__track{scroll-behavior:auto}
}

.vdd-slider__slide{
  flex:0 0 100%;min-width:0;scroll-snap-align:center;line-height:0;
}
/* --- Slide: banner ngang, trai het khung --- */
/* Ban goc la 5 anh 1920x753 (rieng anh dau 1280x483). CSS cu cua widget
   dat height:39.2vw, dung bang 753/1920 - nen giu dung ty le nay o moi
   be rong, khong cat theo khung khac. */
.vdd-slide--anh{display:block;line-height:0}
.vdd-slide--anh img{
  width:100%;height:auto;display:block;
  aspect-ratio:1920/753;object-fit:cover;object-position:center;
}

/* ---------- Nut qua lai ----------
   Hai nut vuong bo goc nhe, dat sat mep trai/phai, nen nau sau trong
   mo. Mui ten do inc/slider.php ve luc hien trang, khong nam trong
   noi dung bai - vi WordPress loc bo the <svg> khi luu bai nen truoc
   day nut hien ra rong khong.                                      */
.vdd-slider__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:clamp(2.5rem,3.6vw,3.25rem);
  height:clamp(3.5rem,5.4vw,4.75rem);
  display:grid;place-items:center;
  padding:0;cursor:pointer;
  border:0;
  background:rgba(50,19,1,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#F3E4CC;
  transition:background var(--vdd-dur) var(--vdd-ease),
             color var(--vdd-dur) var(--vdd-ease),
             width var(--vdd-dur) var(--vdd-ease);
}
.vdd-slider__nav--prev{left:0;border-radius:0 var(--vdd-r-sm) var(--vdd-r-sm) 0}
.vdd-slider__nav--next{right:0;border-radius:var(--vdd-r-sm) 0 0 var(--vdd-r-sm)}
.vdd-slider__nav:hover{
  background:var(--vdd-gold);color:var(--vdd-brown);
  width:clamp(2.9rem,4.2vw,3.75rem);
}
.vdd-slider__nav:active{background:var(--vdd-gold-deep,#B8822F)}
.vdd-slider__nav:focus-visible{
  outline:2px solid var(--vdd-gold);outline-offset:-4px;
}
.vdd-slider__nav svg{
  width:1.5rem;height:1.5rem;display:block;
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* Cham chi so */
.vdd-slider__dots{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(.6rem,1.6vw,1.1rem);z-index:3;
  display:flex;gap:.45rem;padding:.4rem .6rem;border-radius:999px;
  background:rgba(50,19,1,.42);
}
.vdd-slider__dot{
  width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(237,178,79,.45);
  transition:background var(--vdd-dur) var(--vdd-ease),width var(--vdd-dur) var(--vdd-ease);
}
.vdd-slider__dot.is-active{background:var(--vdd-gold);width:1.4rem;border-radius:999px}
.vdd-slider__dot:focus-visible{outline:2px solid var(--vdd-gold);outline-offset:2px}

/* Dien thoai: banner thap nen nut phai nho lai cho khoi che mat anh */
@media (max-width:640px){
  .vdd-slider__nav{width:2.1rem;height:3rem}
  .vdd-slider__nav svg{width:1.1rem;height:1.1rem}
  .vdd-slider__nav:hover{width:2.1rem}
}

/* ---------- Banner tung danh muc ---------- */
/* ---------- Khoi danh muc: anh mot ben, san pham mot ben ---------- */
/* Poster doc 700x1080 dung canh luoi 2x2 san pham - dung dung bo cuc
   cua ban goc (hai mau section "img left" / "img right"). */
.vdd-catrow{
  display:grid;gap:clamp(1.25rem,2.5vw,2.25rem);
  align-items:start;
}
@media (min-width:860px){
  /* Anh luon o cot HEP, san pham o cot RONG - du anh ben nao.
     Doi order thoi thi khong du: kich thuoc cot van giu nguyen,
     anh se roi vao cot rong va bop san pham xuong con 182px. */
  .vdd-catrow--anh-trai{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .vdd-catrow--anh-phai{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .vdd-catrow--anh-phai .vdd-catrow__media{order:2}
  .vdd-catrow--anh-phai .vdd-catrow__products{order:1}
}

.vdd-catrow__media{
  display:block;line-height:0;align-self:stretch;margin:0;
  border-radius:var(--vdd-r-sm);overflow:hidden;
  background:var(--vdd-sand);
  box-shadow:var(--vdd-shadow-md);
}
.vdd-catrow__media a{display:block;height:100%}
.vdd-catrow__media img{
  width:100%;display:block;
  /* Ty le poster goc 700x1080 lo chieu cao tu nhien; height:100% keo
     not phan con thieu cho bang dung luoi 2x2 san pham ben canh.
     Khong dat max-height nua - truoc day chan o 620px nen anh lun
     hon cot san pham (812px) gan 200px. */
  aspect-ratio:700/1080;
  height:100%;
  object-fit:cover;object-position:center top;
  transition:transform .7s var(--vdd-ease);
}
.vdd-catrow__media:hover img{transform:scale(1.04)}

/* Tren dien thoai anh dung cao vua phai, khong chiem het man hinh */
@media (max-width:859px){
  .vdd-catrow__media img{
    max-height:clamp(260px,46vh,420px);
    width:auto;margin-inline:auto;height:auto;object-fit:contain;
  }
  .vdd-catrow__media{align-self:start}
  .vdd-catrow__media{display:flex;justify-content:center;background:transparent;box-shadow:none}
}

.vdd-catrow__products{min-width:0}

/* Trong khoi nay luoi san pham la 2 cot, khong phai 4 */
.vdd-catrow__products ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* ---------- Hinh anh thuc te ---------- */
/* Khoi rieng vuadodong/thu-vien tu dung the nen khong phai danh nhau
   voi CSS cua khoi Thu vien anh cua WordPress (no dung flex va tu dat
   width:auto cho tung anh, lam anh co lai con 63px). */
.vdd-gallery{
  display:grid;gap:clamp(.5rem,1.2vw,1rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:640px){
  .vdd-gallery{
    grid-template-columns:repeat(var(--vdd-gallery-cot,4),minmax(0,1fr));
  }
}
.vdd-gallery__item{
  margin:0;overflow:hidden;
  background:var(--vdd-sand);border-radius:var(--vdd-r-sm);
}
.vdd-gallery__item img{
  width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .6s var(--vdd-ease);
}
.vdd-gallery__item:hover img{transform:scale(1.06)}

/* =========================================================
   PHAN HOI CUA KHACH HANG
   Day la khoi khach xem nhieu nhat nen dau tu rieng:
   nen nau tron, dau ngoac kep vang lon lam nen, anh khach
   that co vong vang, the noi tren nen.
   ========================================================= */

.vdd-testi-wrap{
  background:var(--vdd-brown);
  position:relative;overflow:hidden;
  padding-block:clamp(3rem,6vw,5rem);
}

/* Hoa van mo lam nen - khong lam roi chu */
.vdd-testi-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(237,178,79,.16), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(237,178,79,.12), transparent 46%);
}
.vdd-testi-wrap > *{position:relative}

.vdd-testi-wrap .vdd-section-head__title{color:var(--vdd-gold)}
.vdd-testi-wrap .vdd-eyebrow{color:rgba(237,178,79,.78)}

.vdd-testi-grid{
  display:grid;gap:clamp(1rem,2.2vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  align-items:stretch;
}

.vdd-testi{
  position:relative;margin:0;
  display:flex;flex-direction:column;gap:var(--vdd-s4);
  background:var(--vdd-page);
  border-radius:var(--vdd-r-md);
  padding:clamp(1.5rem,2.5vw,2rem) clamp(1.25rem,2vw,1.75rem) clamp(1.25rem,2vw,1.5rem);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.55);
  border-top:3px solid var(--vdd-gold);
}

/* Dau ngoac kep lam dau khoi.
   Truoc day la the <svg> trong noi dung trang, nhung WordPress loc bo
   <svg> khi luu bai nen no bien mat. Ve bang CSS thi khong mat. */
.vdd-testi__quote::before{
  content:"\201C";
  display:block;
  font-family:var(--vdd-font-display);
  font-size:3.4rem;line-height:.6;
  color:var(--vdd-gold);opacity:.9;
  margin-bottom:var(--vdd-s3);
}

.vdd-testi__quote{
  margin:0 0 auto;border:0;padding:0;
  font-family:var(--vdd-font-body);
  font-size:var(--vdd-text-base);
  line-height:1.7;color:var(--vdd-ink-2);
  flex:1 1 auto;
}

.vdd-testi__by{
  display:flex;align-items:center;gap:.75rem;
  margin-top:var(--vdd-s4);
  padding-top:var(--vdd-s4);
  border-top:1px solid var(--vdd-line);
}
/* Anh dai dien la khoi Anh nen phai go le cua figure */
.vdd-testi__avatar{margin:0;flex:none;line-height:0}
.vdd-testi__avatar img,
img.vdd-testi__avatar{
  width:3rem;height:3rem;flex:none;border-radius:50%;
  object-fit:cover;display:block;
  box-shadow:0 0 0 2px var(--vdd-page), 0 0 0 4px var(--vdd-gold);
}
.vdd-testi__avatar--chu{
  display:grid;place-items:center;
  background:var(--vdd-brown);color:var(--vdd-gold);
  font-family:var(--vdd-font-display);font-weight:700;font-size:var(--vdd-text-lg);
}
.vdd-testi__name{
  margin:0;
  font-weight:700;color:var(--vdd-brown);font-size:var(--vdd-text-sm);
  line-height:1.3;
}

/* Khung hep: cuon ngang thay vi bop het 3 the */
@media (max-width:560px){
  .vdd-testi-grid{
    grid-auto-flow:column;grid-auto-columns:82%;
    grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--vdd-s3);
  }
  .vdd-testi{scroll-snap-align:center}
}

/* ---------- Tinh chinh nhip trang ---------- */

/* Khoi cam ket co 3 muc - chia 3 cot cho khong con o trong mo coi */
/* So cot cua khoi cam ket da chuyen sang components.css de moi trang
   deu dung chung, khong rieng trang chu. */

/* Tieu de khoi: them gach vang ngan de buoc vao nhan dien */
.vdd-section-head--center .vdd-section-head__title{
  position:relative;padding-bottom:var(--vdd-s4);
}
.vdd-section-head--center .vdd-section-head__title::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:0;
  width:3.5rem;height:3px;background:var(--vdd-gold);
}
.vdd-section--brown .vdd-section-head__desc{color:rgba(240,228,210,.82);max-width:68ch;margin-inline:auto}

/* Video trong khoi nau: bo goc va do bong cho khop the con lai */
.vdd-section--brown .wp-block-embed{
  max-width:var(--vdd-normal);margin-inline:auto;
}
.vdd-section--brown .wp-block-embed iframe{
  border-radius:var(--vdd-r-sm);box-shadow:0 18px 44px -20px rgba(0,0,0,.6);
}