/* =========================================================
   BAI VIET & TRANG DANH SACH
   Dung chung cho: chuyen muc, the, tim kiem, chi tiet bai viet,
   va dau trang cua danh muc san pham.
   ========================================================= */

/* ---------- Duong dan phan cap ---------- */
.vdd-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:var(--vdd-text-xs);color:var(--vdd-muted);
  margin-bottom:var(--vdd-s5);
}
.vdd-breadcrumb a{color:var(--vdd-muted);text-decoration:none}
.vdd-breadcrumb a:hover{color:var(--vdd-gold-text);text-decoration:underline}
.vdd-breadcrumb__sep{color:var(--vdd-line-2)}

/* ---------- Dau trang ---------- */
.vdd-pagehead{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.vdd-pagehead .vdd-eyebrow{margin:0 0 var(--vdd-s2)}
.vdd-pagehead__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-3xl);line-height:1.18;
  color:var(--vdd-brown);margin:0;
  position:relative;padding-bottom:var(--vdd-s4);
  text-wrap:balance;
}
.vdd-pagehead__title::after{
  content:"";position:absolute;left:0;bottom:0;
  width:3.5rem;height:3px;background:var(--vdd-gold);
}
.vdd-pagehead__desc{
  margin-top:var(--vdd-s4);max-width:68ch;
  color:var(--vdd-ink-2);font-size:var(--vdd-text-md);line-height:1.7;
}
.vdd-pagehead__desc p:last-child{margin-bottom:0}

/* ---------- Thanh so ket qua + sap xep ---------- */
.vdd-shopbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--vdd-s4);
  margin-bottom:var(--vdd-s5);padding-bottom:var(--vdd-s3);
  border-bottom:1px solid var(--vdd-line);
}
.vdd-shopbar .woocommerce-result-count{
  margin:0;font-size:var(--vdd-text-sm);color:var(--vdd-muted);
}
.vdd-shopbar .woocommerce-ordering{margin:0}
.vdd-shopbar select{
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);
  padding:.55em 2.2em .55em .9em;
  border:1px solid var(--vdd-line-2);border-radius:var(--vdd-r-sm);
  background-color:var(--vdd-page);color:var(--vdd-ink);
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A6B5C'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5em center;background-size:1.2em;
  cursor:pointer;
}
.vdd-shopbar select:focus-visible{outline:2px solid var(--vdd-gold-text);outline-offset:1px}

/* ---------- Mo ta danh muc, thu gon duoc ----------
   Mo ta cua danh muc o site nay dai toi 20.000 ky tu. De nguyen thi
   khach phai cuon rat lau moi het. Gap lai con mot doan, bam moi mo. */
.vdd-mota{position:relative}
/* Mo ta danh muc va mo ta san pham KHONG gioi han do dai dong.

   68ch la do dai dong de doc thoai mai, dung cho BAI VIET. Nhung mo ta
   o day khong phai bai doc: no la ca mot trang gioi thieu, co tieu de
   muc, anh minh hoa, bang so lieu. Bo vao khung 770px thi anh nho lai
   va bo cuc chat, khac han ban cu von trai het be rong.

   LOI DA SUA: truoc day con bop rieng doan van ve 86ch (867px) trong
   khi tieu de, bang va danh sach deu chay het 1144px. Ba be rong lech
   nhau, va moi doan van de lai mot mang trang 277px ben phai - nhin
   nhu trang bi loi chu khong phai nhu co y. Gio moi thu trong khoi mo
   ta deu rong bang khung chua no. */
.vdd-mota__noi{
  font-size:var(--vdd-text-base);line-height:1.75;color:var(--vdd-ink-2);
  max-width:none;
}
.vdd-mota__noi > p,
.vdd-mota__noi > ul,
.vdd-mota__noi > ol,
.vdd-mota__noi > blockquote,
.vdd-mota__noi > h2,
.vdd-mota__noi > h3,
.vdd-mota__noi > h4{max-width:none}
.vdd-mota__noi figure,
.vdd-mota__noi img,
.vdd-mota__noi table,
.vdd-mota__noi iframe{max-width:100%}
.vdd-mota__noi h2,
.vdd-mota__noi h3{margin-top:var(--vdd-s6)}
.vdd-mota__noi h2:first-child,
.vdd-mota__noi h3:first-child{margin-top:0}
.vdd-mota__noi img{height:auto;border-radius:var(--vdd-r-sm)}
.vdd-mota__noi table{width:100%;border-collapse:collapse;font-size:var(--vdd-text-sm)}
.vdd-mota__noi table td,
.vdd-mota__noi table th{border:1px solid var(--vdd-line);padding:.6em .8em}

.vdd-mota--thugon .vdd-mota__noi{
  max-height:22rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);
  mask-image:linear-gradient(#000 60%,transparent);
}
.vdd-mota.is-mo .vdd-mota__noi{
  max-height:none;
  -webkit-mask-image:none;mask-image:none;
}
/* Nut nam giua, dang vien bau - truoc day la mot hop chu nhat tron,
   nhin nhu nut thu nghiem chua lam xong. */
.vdd-mota__nut{
  display:inline-flex;align-items:center;gap:.5em;
  margin:var(--vdd-s5) auto 0;
  padding:.8em 1.8em;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);font-weight:700;
  letter-spacing:.02em;
  color:var(--vdd-brown);background:var(--vdd-page);
  border:1px solid var(--vdd-gold);border-radius:999px;
  box-shadow:0 2px 10px -4px rgba(43,33,25,.18);
  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),
             box-shadow var(--vdd-dur) var(--vdd-ease);
}
/* Nut nam giua khoi chu */
.vdd-mota{display:flex;flex-direction:column}
.vdd-mota__nut:hover{
  background:var(--vdd-gold);border-color:var(--vdd-gold);
  color:var(--vdd-brown);
  box-shadow:0 6px 18px -6px rgba(237,178,79,.6);
}
.vdd-mota__nut:focus-visible{outline:2px solid var(--vdd-gold-text);outline-offset:3px}

/* Mui ten ve bang CSS, khong dung ky tu ▾ (moi phong chu ve mot kieu) */
.vdd-mota__nut::after{
  content:"";width:.5em;height:.5em;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);
  transition:transform var(--vdd-dur) var(--vdd-ease);
}
.vdd-mota.is-mo .vdd-mota__nut::after{transform:translateY(.1em) rotate(225deg)}
.vdd-mota__chu-dong{display:none}
.vdd-mota.is-mo .vdd-mota__chu-mo{display:none}
.vdd-mota.is-mo .vdd-mota__chu-dong{display:inline}

/* ---------- The bam (danh muc con, the bai viet) ---------- */
.vdd-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--vdd-s3);
}
.vdd-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.6em 1.1em;
  font-size:var(--vdd-text-sm);font-weight:600;line-height:1.3;
  color:var(--vdd-brown);text-decoration:none;
  background:var(--vdd-page);
  border:1px solid var(--vdd-line-2);border-radius:999px;
  transition:background var(--vdd-dur) var(--vdd-ease),
             border-color var(--vdd-dur) var(--vdd-ease),
             color var(--vdd-dur) var(--vdd-ease);
}
.vdd-chip:hover{background:var(--vdd-brown);border-color:var(--vdd-brown);color:var(--vdd-gold)}
.vdd-chip__so{
  font-size:var(--vdd-text-xs);font-weight:500;
  color:var(--vdd-muted);font-variant-numeric:tabular-nums;
}
.vdd-chip:hover .vdd-chip__so{color:rgba(237,178,79,.75)}
.vdd-chips--the{margin-top:var(--vdd-s6)}

/* ---------- Phan trang ----------

   Mot bo luat cho CA HAI cho: .vdd-pagination (bai viet, theme in ra)
   va .woocommerce-pagination (danh muc san pham, WooCommerce in ra).

   LOI DA SUA (1): truoc day moi cho mot kieu, nen trang danh muc
   khong an luat nao cua theme - ra mot day o vuong xam, vien mo, so
   hien tai to den, nhin nhu chua ai dung toi.

   LOI DA SUA (2): WooCommerce co san luat
   ".woocommerce nav.woocommerce-pagination ul li a" dat
   display:block, min-width:1em, padding:.5em. Luat do dam dac hon
   ".woocommerce-pagination a" nen o so chi rong 28px chu khong phai
   44px. Vi vay o day phai viet du dam dac: them .vdd (lop tren the
   body) la du thang.

   Nham vao .page-numbers chu khong phai "a, span": ben trong nut
   Truoc/Sau con hai the <span> nua (mui ten va chu), neu nham ca
   <span> thi moi cai do cung bi bien thanh mot o 44px.

   Va phai co "ul li" o giua: paginate_links( type = list ) dat chinh
   lop .page-numbers len ca the <ul> bao ngoai, nham thang vao
   .page-numbers thi ca cai <ul> cung thanh mot o nut.             */
.vdd-pagination,
.woocommerce-pagination{
  margin-top:clamp(2rem,4vw,3rem);
  text-align:center;
}
.vdd-pagination ul,
.woocommerce-pagination ul{
  list-style:none;margin:0;padding:0;border:0;
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
}
.vdd .woocommerce-pagination ul li,
.vdd .vdd-pagination ul li{border:0;margin:0;overflow:visible}

.vdd .vdd-pagination ul li .page-numbers,
.vdd nav.woocommerce-pagination ul li .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-width:2.75rem;height:2.75rem;padding:0 .8em;
  font-family:var(--vdd-font-body);
  font-size:var(--vdd-text-sm);font-weight:600;line-height:1;
  color:var(--vdd-brown);text-decoration:none;
  background:var(--vdd-page);
  border:1px solid var(--vdd-line-2);border-radius:var(--vdd-r-md);
  font-variant-numeric:tabular-nums;
  transition:background var(--vdd-dur) var(--vdd-ease),
             border-color var(--vdd-dur) var(--vdd-ease),
             color var(--vdd-dur) var(--vdd-ease);
}

.vdd .vdd-pagination ul li a.page-numbers:hover,
.vdd nav.woocommerce-pagination ul li a.page-numbers:hover{
  background:var(--vdd-sand);
  border-color:var(--vdd-gold);
  color:var(--vdd-brown);
}

/* Trang dang xem: nen nau chu vang, them mot vanh vang mong ben
   trong cho no noi han len giua day so. */
.vdd .vdd-pagination ul li .page-numbers.current,
.vdd nav.woocommerce-pagination ul li .page-numbers.current{
  background:var(--vdd-brown);
  border-color:var(--vdd-brown);
  color:var(--vdd-gold);
  box-shadow:inset 0 0 0 1px rgba(201,162,77,.45);
}

/* Dau ba cham khong phai mot nut - bo khung di. */
.vdd .vdd-pagination ul li .page-numbers.dots,
.vdd nav.woocommerce-pagination ul li .page-numbers.dots{
  background:none;border-color:transparent;
  color:var(--vdd-muted);
  min-width:1.5rem;padding:0 .25em;
}

/* Hai nut Truoc / Sau rong hon mot chut vi co ca chu. */
.vdd .vdd-pagination ul li .page-numbers.prev,
.vdd .vdd-pagination ul li .page-numbers.next,
.vdd nav.woocommerce-pagination ul li .page-numbers.prev,
.vdd nav.woocommerce-pagination ul li .page-numbers.next{padding:0 1em}

/* Mui ten ve bang CSS - khong phu thuoc phong chu bieu tuong. */
.vdd-pg__mui{
  width:.45rem;height:.45rem;flex:none;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}
.vdd-pg__mui--truoc{transform:rotate(-135deg);margin-left:.1em}
.vdd-pg__mui--sau{transform:rotate(45deg);margin-right:.1em}

/* Dong "Trang 3 / 41" */
.vdd-pg__dem{
  margin:var(--vdd-s3) 0 0;
  text-align:center;
  font-size:var(--vdd-text-xs);
  letter-spacing:.06em;
  color:var(--vdd-muted);
  font-variant-numeric:tabular-nums;
}

/* Man hinh hep: bo bot so o giua, chi giu trang dang xem cong hai
   nut Truoc/Sau. Dong dem ngay duoi da noi ro dang o trang nao. */
@media (max-width:560px){
  .vdd .woocommerce-pagination ul li:has(.page-numbers:not(.current):not(.prev):not(.next)),
  .vdd .vdd-pagination ul li:has(.page-numbers:not(.current):not(.prev):not(.next)){
    display:none;
  }
  .vdd .vdd-pagination ul li .page-numbers,
  .vdd nav.woocommerce-pagination ul li .page-numbers{
    min-width:2.5rem;height:2.5rem;
  }
}

/* ---------- Chi tiet bai viet ---------- */
.vdd-article__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.vdd-article__head .vdd-eyebrow{margin:0 0 var(--vdd-s3)}
.vdd-article__head .vdd-eyebrow a{color:inherit;text-decoration:none}
.vdd-article__head .vdd-eyebrow a:hover{text-decoration:underline}
.vdd-article__title{
  font-family:var(--vdd-font-display);font-weight:700;
  font-size:var(--vdd-text-3xl);line-height:1.2;
  color:var(--vdd-brown);margin:0 0 var(--vdd-s4);
  max-width:30ch;text-wrap:balance;
}
.vdd-article__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0;font-size:var(--vdd-text-sm);color:var(--vdd-muted);
}
.vdd-article__anh{
  margin:0 0 clamp(1.75rem,3.5vw,2.75rem);
  border-radius:var(--vdd-r-md);overflow:hidden;background:var(--vdd-sand);
}
.vdd-article__anh img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
}

/* Trong cot tai lieu, chinh cai cot da la do dai dong roi: breadcrumb,
   tieu de, anh, than bai, the bam deu rong --vdd-doc. Than bai va tung
   doan van khong duoc tu bop them 68ch nua, neu khong doan van lai
   ngan hon tieu de ngay phia tren no.
   Can .vdd o dau de thang luat ".vdd .vdd-prose{max-width:68ch}". */
.vdd .vdd-section--tai-lieu .vdd-prose,
.vdd .vdd-section--tai-lieu .vdd-prose > p,
.vdd .vdd-section--tai-lieu .vdd-prose > ul,
.vdd .vdd-section--tai-lieu .vdd-prose > ol,
.vdd .vdd-section--tai-lieu .vdd-prose > blockquote{max-width:var(--vdd-doc)}

/* Than bai: do dai dong do cot tai lieu lo, o day lo nhip doc */
.vdd-article__body{font-size:var(--vdd-text-md);line-height:1.8;color:var(--vdd-ink-2)}
.vdd-article__body > h2{margin:var(--vdd-s7) 0 var(--vdd-s4)}
.vdd-article__body > h3{margin:var(--vdd-s6) 0 var(--vdd-s3)}
.vdd-article__body > h2:first-child,
.vdd-article__body > h3:first-child{margin-top:0}
.vdd-article__body img{height:auto;border-radius:var(--vdd-r-sm)}
.vdd-article__body figure{margin:var(--vdd-s6) 0}
.vdd-article__body figcaption{
  margin-top:var(--vdd-s2);font-size:var(--vdd-text-xs);
  color:var(--vdd-muted);text-align:center;
}
.vdd-article__body blockquote{
  margin:var(--vdd-s6) 0;padding-left:var(--vdd-s5);
  border-left:3px solid var(--vdd-gold);
  color:var(--vdd-ink);font-style:italic;
}
.vdd-article__body table{
  width:100%;border-collapse:collapse;
  font-size:var(--vdd-text-sm);margin:var(--vdd-s6) 0;
}
.vdd-article__body table td,
.vdd-article__body table th{border:1px solid var(--vdd-line);padding:.7em .9em;text-align:left}
.vdd-article__body table th{background:var(--vdd-sand);font-weight:700;color:var(--vdd-brown)}
/* Bang rong thi cuon trong khung cua no, khong lam vo trang */
.vdd-article__body > table{display:block;overflow-x:auto}

/* ---------- O tim o trang ket qua ---------- */
.vdd-searchform--trang{
  display:flex;gap:var(--vdd-s3);
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);max-width:34rem;
  /* .vdd-section > * co margin-inline:auto nen o tim bi day ra giua,
     lech han voi tieu de va cac the ben duoi. */
  margin-inline:0;
}
.vdd-searchform--trang input[type="search"]{
  flex:1 1 auto;min-width:0;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-base);
  padding:.75em 1em;
  border:1px solid var(--vdd-line-2);border-radius:var(--vdd-r-sm);
  background:var(--vdd-page);color:var(--vdd-ink);
}
.vdd-searchform--trang button{
  flex:none;padding:.75em 1.6em;
  font-family:var(--vdd-font-body);font-size:var(--vdd-text-sm);font-weight:700;
  color:var(--vdd-brown);background:var(--vdd-gold);
  border:1px solid var(--vdd-gold);border-radius:var(--vdd-r-sm);cursor:pointer;
  transition:background var(--vdd-dur) var(--vdd-ease),color var(--vdd-dur) var(--vdd-ease);
}
.vdd-searchform--trang button:hover{background:var(--vdd-brown);border-color:var(--vdd-brown);color:var(--vdd-gold)}

/* ---------- Noi dung cu tu trinh soan thao Classic ----------

   Bai viet cu luu san style="width: 1910px" tren <figure class="wp-caption">.
   Le thuong khong thang duoc style viet thang tren the, nen phai dung
   !important. Khong co luat nay thi anh trong bai no ra 1910px trong
   khung 1144px.                                                      */
.vdd-prose .wp-caption,
.vdd-prose figure[style*="width"],
.vdd-mota__noi .wp-caption,
.vdd-mota__noi figure[style*="width"],
.woocommerce-tabs .panel .wp-caption,
.woocommerce-tabs .panel figure[style*="width"]{
  width:auto!important;max-width:100%!important;
}
/* KHONG dat width:100% o day: no danh nhau voi luat gioi han chieu cao
   ben duoi, ket qua la anh bi keo bep (rong 1144 ma cao chi 702 trong
   khi ty le that la 3:4). De width:auto cho trinh duyet tu tinh. */
.vdd-prose .wp-caption img,
.vdd-mota__noi .wp-caption img,
.woocommerce-tabs .panel .wp-caption img{max-width:100%;height:auto}

.wp-caption-text,
.vdd-prose figcaption{
  margin-top:var(--vdd-s2);
  font-size:var(--vdd-text-xs);color:var(--vdd-muted);
  text-align:center;line-height:1.5;
}

/* Anh dung trong bai: cao qua mot man hinh thi khong ai xem het duoc.
   Gioi han chieu cao, giu nguyen ty le. */
.vdd-article__body img,
.vdd-mota__noi img,
.woocommerce-tabs .panel img{
  max-height:min(78vh,760px);
  width:auto;max-width:100%;height:auto;
  margin-inline:auto;display:block;
}
/* Anh ngang thi van duoc trai het be rong */
.vdd-article__body img[width][height]{height:auto}

/* Bang va khoi rong trong bai thi cuon trong khung cua no */
.vdd-prose iframe,
.vdd-prose embed,
.vdd-prose object{max-width:100%}
.vdd-prose > .wp-block-table,
.vdd-prose > table{display:block;overflow-x:auto;max-width:100%}