/* =========================================================
   QUY UOC BO CUC - BAN CHUAN DUNG CHUNG
   =========================================================

   Van de truoc do: le ngang bi cong don o BA tang
     .inside-article (GeneratePress)        40px
     .vdd-section (theme nay)               28px
     .wp-block-group__inner-container (WP)  40px
   Tong 108px moi ben -> luoi 4 san pham bi bop con 3 cot.

   Quy uoc tu day:
     1. CHI .vdd-section quan ly le ngang (--vdd-gutter).
     2. CHI .vdd-section gioi han be rong (--vdd-normal).
     3. Moi tang khac ben trong deu ve 0.
   ========================================================= */

/* ---------- 1. Go le cua theme cha va WordPress ---------- */

/* GeneratePress boc bai viet trong .inside-article co le rieng. */
.vdd .inside-article,
.vdd .site-content .content-area .inside-article{
  padding-inline:0;
}

/* WordPress them le cho khoi "constrained" nam trong group. */
.vdd .vdd-section > .wp-block-group__inner-container,
.vdd .vdd-section .wp-block-group__inner-container{
  padding-inline:0;
  max-width:none;
}

/* entry-content khong tu gioi han be rong - de section lo */
.vdd .entry-content{
  max-width:none;
  padding-inline:0;
}

/* Tru khi chinh no la khoi van ban: luc do do dai dong phai duoc gioi
   han cho de doc. Phai viet o DAY (sau luat tren) va du dam dac, neu
   khong "max-width:none" o tren se thang va dong van keo dai 1088px. */
.vdd .entry-content.vdd-prose{max-width:68ch}
.vdd .entry-content.vdd-prose > .wp-block-image,
.vdd .entry-content.vdd-prose > figure,
.vdd .entry-content.vdd-prose > .wp-block-gallery,
.vdd .entry-content.vdd-prose > .wp-block-columns,
.vdd .entry-content.vdd-prose > .wp-block-embed,
.vdd .entry-content.vdd-prose > table{max-width:none}

/* ---------- 2. Section la noi duy nhat quan ly le va be rong ---------- */

.vdd-section{
  padding-inline:var(--vdd-gutter);
}

/* Khoi noi tiep khoi phia tren (cung mot kieu noi dung) thi bo le tren,
   neu khong hai cai cach nhau gan 200px trong khong. */
.vdd-section--noi-tiep{padding-top:0!important}
/* Va khoi dung ngay truoc no cung thu le duoi lai */
.vdd-section:has(+ .vdd-section--noi-tiep){padding-bottom:var(--vdd-s5)}
.vdd-section:has(+ .vdd-section--noi-tiep) .wp-block-latest-posts{margin-bottom:0}

/* Noi dung ben trong section canh giua theo be rong chuan */
.vdd-section > *{
  max-width:var(--vdd-normal);
  margin-inline:auto;
}

/* ---------- 2b. TRAI HET MAN HINH (full-bleed) ----------

   Khung .site cua GeneratePress rong 1200px va canh giua, nen moi thu
   ben trong deu bi chan o 1200px. Truoc day comment ghi "nen trai het
   man hinh" nhung thuc te section mau van dung o 1200px.

   Cach lam: keo le am ra hai ben dung bang khoang trong con lai.
   --vdd-vw do main.js dat = documentElement.clientWidth (da tru thanh
   cuon). Khong co JS thi 100vw van chay, chi lech dung be rong thanh
   cuon.                                                             */

.vdd-bleed,
.vdd .vdd-slider,
.vdd .vdd-section--sand,
.vdd .vdd-section--brown,
.vdd .vdd-testi-wrap{
  width:var(--vdd-vw,100vw);
  max-width:var(--vdd-vw,100vw);
  margin-inline:calc(50% - var(--vdd-vw,100vw) / 2);
}

/* Section nen day mau: nen trai het man hinh, noi dung van canh giua */
.vdd-section--sand,
.vdd-section--brown{
  padding-inline:var(--vdd-gutter);
}

/* Noi dung ben trong khoi trai het man hinh phai thang hang voi
   section thuong: section thuong rong 1200px, tru le con 1144px.
   Chan o 1200px se lech ra 28px moi ben. */
.vdd .vdd-section--sand > *,
.vdd .vdd-section--brown > *,
.vdd .vdd-testi-wrap > *,
.vdd .vdd-bleed > *,
.vdd .vdd-section--sand > .wp-block-group__inner-container,
.vdd .vdd-section--brown > .wp-block-group__inner-container,
.vdd .vdd-testi-wrap > .wp-block-group__inner-container,
.vdd .vdd-bleed > .wp-block-group__inner-container{
  max-width:var(--vdd-content);
  margin-inline:auto;
}

/* ---------- 2c. Slider dau trang sat mep header ----------
   GeneratePress chen .site-main{margin:20px 0} va
   .inside-article{padding:40px 0} -> 60px trong giua header va slider. */
.vdd .site-main:has(> article > .inside-article > .entry-content > .vdd-slider:first-child){
  margin-top:0;
}
.vdd .inside-article:has(> .entry-content > .vdd-slider:first-child){
  padding-top:0;
}
/* Du phong cho trinh duyet chua ho tro :has() */
.vdd.home .site-main{margin-top:0}
.vdd.home .inside-article{padding-top:0}

/* Cac trang con lai: GeneratePress cong 20px (site-main) + 40px
   (inside-article), roi khoi DAU TIEN cua trang lai cong them ~51px le
   tren cua .vdd-section nua - thanh ra gan 120px trang tron truoc
   duong dan. Go het le cua cac lop boc, chi de khoi dau tu giu mot
   khoang vua phai. */
.vdd:not(.home) .site-main{margin-top:0;margin-bottom:0}
.vdd:not(.home) .inside-article{padding-top:0;padding-bottom:0}

/* Khoi cuoi trang tu lo le duoi cua no. Truoc day .site-main con cong
   them 20px margin-bottom, nen giua khoi nen mau cuoi cung va chan
   trang ho ra mot dai trang. */
.vdd .vdd-khoitrang > .vdd-section:last-child,
.vdd .entry-content > .vdd-section:last-child,
.vdd .entry-content > .wp-block-group.vdd-section:last-child{
  margin-bottom:0;
}

.vdd .vdd-khoitrang > .vdd-section:first-child,
.vdd .entry-content > .vdd-section:first-child,
.vdd .entry-content > .wp-block-group.vdd-section:first-child,
.vdd .vdd-article > .vdd-section:first-child,
.vdd .site-main > .vdd-section:first-child{
  padding-top:var(--vdd-s5);
}

/* GeneratePress dat margin-top:32px cho .entry-content. Khoi dau trang
   da tu giu 24px le tren roi, cong them 32px nua thanh 56px - nhieu
   hon han cac trang khac. */
.vdd:not(.home) .entry-content{margin-top:0}

/* Banner tu quan ly le ben trong (vdd-banner__inner) */
.vdd-banner{padding-inline:0}
.vdd-banner > *{max-width:none;margin-inline:0}

/* ---------- 2d. Go lop boc thua cua khoi Nhom ----------

   WordPress tu chen mot <div class="wp-block-group__inner-container">
   vao trong moi khoi Nhom luc hien trang, du ta khong viet no.

   Voi .vdd-section thi tot: chinh lop do giu noi dung o 1144px.
   Nhung voi nhung khoi lam LUOI thi hong: con that tut xuong mot tang,
   luoi chi con dung mot o - anh va san pham chong len nhau thay vi nam
   canh nhau.

   display:contents go lop boc ra khoi bo cuc ma van giu nguyen DOM,
   nen con that len lai dung tang.                                   */
.vdd .vdd-catrow > .wp-block-group__inner-container,
.vdd .vdd-catrow__products > .wp-block-group__inner-container,
.vdd .vdd-cathead > .wp-block-group__inner-container,
.vdd .vdd-values > .wp-block-group__inner-container,
.vdd .vdd-values__item > .wp-block-group__inner-container,
.vdd .vdd-testi-grid > .wp-block-group__inner-container,
.vdd .vdd-testi > .wp-block-group__inner-container,
.vdd .vdd-testi__by > .wp-block-group__inner-container,
.vdd .vdd-section-head > .wp-block-group__inner-container{
  display:contents;
}

/* ---------- 3. Luoi san pham: so cot xac dinh, khong doan ---------- */
/* auto-fill voi minmax de ket qua phu thuoc be rong con lai - de ra
   3 cot khi chi thieu vai chuc pixel. Dinh so cot theo diem gay. */

.vdd-products,
.vdd .woocommerce ul.products,
.vdd ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Trong khoi danh muc o trang chu luoi la 2 cot - dat o home.css */
@media (min-width:640px){
  .vdd-products,
  .vdd .woocommerce ul.products,
  .vdd ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .vdd-products,
  .vdd .woocommerce ul.products,
  .vdd ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* WooCommerce tu dat width theo class columns-N - go het */
.vdd ul.products.columns-1 li.product,
.vdd ul.products.columns-2 li.product,
.vdd ul.products.columns-3 li.product,
.vdd ul.products.columns-4 li.product,
.vdd ul.products.columns-5 li.product,
.vdd ul.products.columns-6 li.product{
  width:auto;
  margin:0;
  float:none;
}

/* ---------- 4. Luoi bai viet (khoi Latest Posts) ---------- */

.vdd .wp-block-latest-posts.is-grid{
  display:grid;
  gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:0;margin:0;list-style:none;
}
@media (min-width:900px){
  .vdd .wp-block-latest-posts.is-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.vdd .wp-block-latest-posts.is-grid li{margin:0;width:auto}
.vdd .wp-block-latest-posts__featured-image img{
  width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:var(--vdd-s3);
}
.vdd .wp-block-latest-posts__post-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;display:block;
}
.vdd .wp-block-latest-posts__post-title:hover{color:var(--vdd-gold-text)}
.vdd .wp-block-latest-posts__post-date{
  font-size:var(--vdd-text-xs);color:var(--vdd-muted);margin-top:var(--vdd-s2);display:block;
}

/* ---------- 5. Khoi cot cua WordPress ---------- */
/* Khong de cot co min-width mac dinh lam vo bo cuc tren dien thoai */
.vdd .wp-block-columns{gap:clamp(1.25rem,3vw,2.5rem)}
.vdd .wp-block-column{min-width:0}

/* ---------- 6. Chan tran ngang o moi cap ---------- */
.vdd .wp-block-group,
.vdd .wp-block-columns,
.vdd .entry-content{min-width:0}

/* ---------- 7. Trang tu chia khoi ----------

   Mot so trang (Lien he, Gioi thieu, cac trang dich vu) da tu chia
   noi dung thanh cac khoi .vdd-section. page.php khong boc them lop
   nao nua - xem chu thich trong page.php.

   O day chi lo hai viec: dau trang khong de thua le duoi, va khoi
   dau tien cua noi dung khong cong them le tren.                   */
.vdd-section--dau{padding-bottom:0}
.vdd-tu-chia{max-width:none;padding:0}
.vdd-tu-chia > .vdd-section:first-child,
.vdd-tu-chia > .wp-block-group.vdd-section:first-child{padding-top:var(--vdd-s5)}

/* Gach vang CHI dat duoi tieu de muc (h2) - truoc day dat cho ca h3 va
   h4 nen so dien thoai, dia chi email deu bi gach mot net vang ben
   duoi, nhin nhu loi. */
.vdd-tu-chia .vdd-section > h2,
.vdd-tu-chia .vdd-section > .wp-block-group__inner-container > h2{
  position:relative;
  padding-bottom:var(--vdd-s3);
  margin-bottom:var(--vdd-s5);
}
.vdd-tu-chia .vdd-section > h2::after,
.vdd-tu-chia .vdd-section > .wp-block-group__inner-container > h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:3.5rem;height:3px;background:var(--vdd-gold);
}
/* h3/h4 trong cac trang nay thuong la gia tri (so dien thoai, email)
   chu khong phai tieu de muc - giu phang. */
.vdd-tu-chia .vdd-section h3,
.vdd-tu-chia .vdd-section h4{margin:0 0 var(--vdd-s4)}

/* Anh bieu tuong trong cac khoi nay von la icon nho, khong phai anh
   lon - khong de no gian het be rong. */
.vdd-tu-chia .vdd-section figure.wp-block-image{margin:0 0 var(--vdd-s4)}
.vdd-tu-chia .vdd-section figure.wp-block-image img{height:auto}
.vdd-tu-chia .vdd-section figure.wp-block-image img[src*="icon"],
.vdd-tu-chia .vdd-section figure.wp-block-image img[width][height]{max-width:100%}

/* ---------- Trang thong tin: mot cot van ban dong deu ----------

   Trang chinh sach / huong dan la van ban thuan. Truoc day o day chi
   bop rieng <p> va <ul> ve 68ch (685px) roi neo margin-inline:0 cho
   thang hang voi tieu de. Ca hai dieu do deu khong chay:

   - WordPress in san mot luat trong trang cho khoi "constrained":
     ".is-layout-constrained > :where(...){margin-left:auto!important}".
     Co !important nen margin-inline:0 cua minh thua, doan van bi keo
     vao giua.
   - Tieu de khong bi bop nen van chay het 1144px.

   Ket qua: cot chu 685px lo lung giua trang, tieu de thi rong gap doi
   - dung nhu nhan xet "hep han o giua, khong can doi".

   Gio ca phan van ban dung chung mot cot --vdd-doc: breadcrumb, H1,
   H2, doan van, danh sach, anh deu rong bang nhau va cung can giua.

   CHI nham vao khoi group cua lo (.wp-block-group.vdd-section) - do la
   phan van ban chuyen tu Elementor. Cac khoi VUA DO DONG o cuoi trang
   (day lien ket, luoi bai viet, luoi san pham) in ra <section
   class="vdd-section"> KHONG co .wp-block-group, nen van giu nguyen
   1144px; neu bop ca chung thi luoi bon san pham bi dep con 860px. */
.vdd-tai-lieu .wp-block-group.vdd-section > *,
.vdd-tai-lieu .wp-block-group.vdd-section > .wp-block-group__inner-container > *,
.vdd-section--tai-lieu > *{
  max-width:var(--vdd-doc);
  /* Phai co !important de thang luat in san cua WordPress o tren. */
  margin-inline:auto!important;
}

/* Bang bieu trong phan van ban van duoc rong het khung. */
.vdd-tai-lieu .wp-block-group.vdd-section > table,
.vdd-tai-lieu .wp-block-group.vdd-section > .wp-block-table,
.vdd-tai-lieu .wp-block-group.vdd-section > .wp-block-group__inner-container > table,
.vdd-tai-lieu .wp-block-group.vdd-section > .wp-block-group__inner-container > .wp-block-table{
  max-width:var(--vdd-normal);
}

/* Trang co khoi bo cuc (Gioi thieu, Lien he): doan van thuan van can
   do dai dong de doc, nhung KHONG ap cho <ul> la bo cuc (the lien he,
   showroom, the bam, luoi bai viet, luoi san pham) - chung can trai
   het be rong, neu khong ba the lien he bi bop con 685px. */
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > p,
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > .wp-block-group__inner-container > p,
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > ul:not([class]),
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > .wp-block-group__inner-container > ul:not([class]),
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > ul.wp-block-list,
.vdd-tu-chia:not(.vdd-tai-lieu) .vdd-section > .wp-block-group__inner-container > ul.wp-block-list{
  max-width:var(--vdd-doc);
}

/* ---------- 8. Gach vang duoi tieu de phai bam theo chu ----------

   Gach ve bang ::after neo o left:0. Khi tieu de duoc can giua thi chu
   chay vao giua con gach van nam tit ben trai - nhin nhu loi.

   WordPress gan lop .has-text-align-center cho khoi can giua; noi dung
   cu tu Elementor thi dung style="text-align:center" viet thang tren
   the. Bat ca hai.                                                   */
.vdd-cathead__title.has-text-align-center::after,
.vdd-pagehead__title.has-text-align-center::after,
.vdd-tu-chia .vdd-section h2.has-text-align-center::after,
.vdd-cathead__title[style*="text-align:center"]::after,
.vdd-cathead__title[style*="text-align: center"]::after,
.vdd-pagehead__title[style*="text-align:center"]::after,
.vdd-pagehead__title[style*="text-align: center"]::after,
.vdd-tu-chia .vdd-section h2[style*="text-align:center"]::after,
.vdd-tu-chia .vdd-section h2[style*="text-align: center"]::after{
  left:50%;
  transform:translateX(-50%);
}

.vdd-cathead__title.has-text-align-right::after,
.vdd-pagehead__title.has-text-align-right::after,
.vdd-tu-chia .vdd-section h2.has-text-align-right::after,
.vdd-cathead__title[style*="text-align:right"]::after,
.vdd-cathead__title[style*="text-align: right"]::after,
.vdd-tu-chia .vdd-section h2[style*="text-align:right"]::after,
.vdd-tu-chia .vdd-section h2[style*="text-align: right"]::after{
  left:auto;right:0;
}