/*
Theme Name: Babyro
Theme URI: https://babyro.vn
Description: Giao dien Babyro - do dung me va be. Child theme cua Storefront, mau sac & noi dung sinh tu brand.json.
Author: SepcuaAI
Template: storefront
Version: 1.0.0
Text Domain: babyro
*/

/* ============================================================
   BO CUC & THANH PHAN
   Mau sac / phong chu nam trong brand.css (sinh tu brand.json)
   ============================================================ */

body,
button, input, select, textarea,
.site-header, .widget, p, li, td {
  font-family: var(--bd-font-body), system-ui, sans-serif;
  color: var(--bd-chu);
}
h1, h2, h3, h4, h5, .bd-h {
  font-family: var(--bd-font-head), system-ui, sans-serif;
  font-weight: 700;
  color: var(--bd-chinh);
  letter-spacing: -0.01em;
}
a { color: var(--bd-chinh); }
a:hover { color: var(--bd-gradient-dau); }

.bd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* pha container cua Storefront: cac khoi Babyro tu lo be ngang bang .bd-wrap */
.site-content > .col-full,
.site-footer > .col-full,
.site-header > .col-full {
  max-width: 100% !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important;
}
.site-footer { background: transparent !important; padding: 0 !important; }
body.home .site-content { padding-top: 0; }
.site-content { margin-bottom: 0 !important; }
/* nhung trang con lai (shop, san pham, gio hang...) van can khung */
body:not(.home) .site-content > .col-full > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
body:not(.home) .site-content { padding-top: 34px; }

/* ---------- HEADER ---------- */
.site-header {
  background: #fff !important;
  border-bottom: 1px solid #e8f1f8;
  padding: 0 !important;
  margin-bottom: 0 !important;   /* Storefront mac dinh chen ~68px */
  box-shadow: 0 2px 12px rgba(54,78,162,.05);
}
.bd-topbar {
  background: var(--bd-chinh);
  color: #fff;
  font-size: 13px;
}
.bd-topbar .bd-wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap;
}
.bd-topbar span { display: inline-flex; align-items: center; gap: 6px; }
.bd-topbar b { color: var(--bd-nen-nhat); font-weight: 700; }

.bd-head { padding: 14px 0; }
.bd-head .bd-wrap { display: flex; align-items: center; gap: 24px; }
.bd-logo img { height: 54px; width: auto; display: block; }
.bd-nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.bd-nav a {
  font-weight: 600; font-size: 15px; color: var(--bd-chu);
  text-decoration: none; padding: 8px 0; position: relative;
}
.bd-nav a:hover { color: var(--bd-chinh); }
.bd-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 2px; background: var(--bd-phu); transition: right .25s;
}
.bd-nav a:hover::after { right: 0; }
.bd-cart {
  background: var(--bd-chinh); color: #fff !important; border-radius: 999px;
  padding: 10px 20px !important; font-weight: 700;
}
.bd-cart:hover { background: var(--bd-gradient-dau); }
.bd-cart::after { display: none; }

/* nut menu 3 gach - chi hien tren man hinh nho */
.bd-menu-nut {
  display: none; margin-left: auto; flex-direction: column; gap: 5px;
  background: var(--bd-nen-phu); border: 1px solid #e8f1f8; border-radius: 12px;
  padding: 12px 11px; cursor: pointer;
}
.bd-menu-nut span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--bd-chinh); transition: transform .25s, opacity .2s; }
.bd-menu-nut.dang-mo span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.bd-menu-nut.dang-mo span:nth-child(2) { opacity: 0; }
.bd-menu-nut.dang-mo span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* bo khoang trong thua cua Storefront tren trang chu */
body.home .site-content, body.home #content { padding-top: 0 !important; margin-top: 0 !important; }
body.home .site-content > .col-full > *:first-child { margin-top: 0 !important; }

/* ---------- HERO ---------- */
.bd-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--bd-gradient-dau), var(--bd-gradient-cuoi));
  color: #fff; padding: 74px 0 84px;
}
.bd-hero .bd-wrap { position: relative; z-index: 2; max-width: 1200px; }
.bd-hero-in { max-width: 620px; }
.bd-kicker {
  display: inline-block; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 18px;
}
.bd-hero h1 {
  color: #fff; font-size: clamp(32px, 5vw, 52px); line-height: 1.12; margin: 0 0 16px;
}
.bd-hero p { color: rgba(255,255,255,.94); font-size: 17px; line-height: 1.65; margin: 0 0 28px; }
.bd-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.bd-btn {
  display: inline-block; border-radius: 999px; padding: 14px 30px;
  font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .18s, box-shadow .18s;
  font-family: var(--bd-font-head), sans-serif;
}
.bd-btn:hover { transform: translateY(-2px); }
.bd-btn-1 { background: var(--bd-nhan-cam); color: #fff !important; box-shadow: 0 8px 22px rgba(255,156,0,.35); }
.bd-btn-2 { background: rgba(255,255,255,.16); color: #fff !important; border: 1.5px solid rgba(255,255,255,.6); }

/* trai tim - element trong brand guideline */
.bd-tim {
  /* !important: hoa tiet luon phai nam ngoai luong, khong duoc day chu xuong */
  position: absolute !important; opacity: .16; pointer-events: none;
  background: #fff;
  -webkit-mask: var(--bd-tim-mask) center/contain no-repeat;
          mask: var(--bd-tim-mask) center/contain no-repeat;
}
.bd-tim-1 { width: 300px; height: 300px; right: -40px;  top: -50px; }
.bd-tim-2 { width: 180px; height: 180px; right: 250px;  bottom: -60px; opacity: .1; }
.bd-tim-3 { width: 120px; height: 120px; right: 420px;  top: 40px;     opacity: .12; }

/* ---------- CAM KET ---------- */
.bd-cam-ket { background: var(--bd-nen-phu); padding: 34px 0; }
.bd-ck-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bd-ck {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 4px 18px rgba(54,78,162,.06);
}
.bd-ck-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--bd-nen-nhat); color: var(--bd-chinh);
  display: grid; place-items: center;
}
.bd-ck-ico svg { width: 23px; height: 23px; }
.bd-ck b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 15px; color: var(--bd-chinh); margin-bottom: 3px; }
.bd-ck span { font-size: 13px; color: var(--bd-chu-nhat); line-height: 1.45; }

/* ---------- TIEU DE KHOI ---------- */
.bd-sec { padding: 54px 0; }
.bd-sec-alt { background: var(--bd-nen-phu); }
.bd-sec-h { text-align: center; margin-bottom: 32px; }
.bd-sec-h .k {
  color: var(--bd-phu); font-weight: 800; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; display: block; margin-bottom: 7px;
}
.bd-sec-h h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; }
.bd-sec-h p { color: var(--bd-chu-nhat); margin: 0; font-size: 15.5px; }

/* ---------- DANH MUC ---------- */
.bd-dm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bd-dm {
  text-align: center; text-decoration: none; display: block;
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px;
  padding: 22px 12px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bd-dm:hover { transform: translateY(-4px); border-color: var(--bd-phu); box-shadow: 0 12px 28px rgba(54,78,162,.1); }
.bd-dm-ico {
  width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bd-nen-nhat), #fff);
  display: grid; place-items: center; color: var(--bd-chinh);
}
.bd-dm-ico svg { width: 30px; height: 30px; }
.bd-dm b { font-family: var(--bd-font-head), sans-serif; font-size: 14px; color: var(--bd-chu); font-weight: 700; line-height: 1.35; display: block; }

/* ---------- SAN PHAM ---------- */
.bd-sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.bd-sp-head h2 { font-size: 25px; margin: 0; display: flex; align-items: center; gap: 11px; }
.bd-sp-head h2::before {
  content: ''; width: 8px; height: 26px; border-radius: 4px;
  background: linear-gradient(180deg, var(--bd-phu), var(--bd-chinh));
}
.bd-xem-them {
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--bd-chinh);
  border: 1.5px solid var(--bd-phu); border-radius: 999px; padding: 8px 18px; white-space: nowrap;
}
.bd-xem-them:hover { background: var(--bd-chinh); color: #fff !important; border-color: var(--bd-chinh); }

ul.products { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0 !important; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px;
  padding: 12px; transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
  /* deu chieu cao: gia va nut luon thang hang */
  display: flex; flex-direction: column;
}
ul.products li.product > a:first-of-type { display: block; }
ul.products li.product .price { margin-top: auto !important; padding-top: 6px; }
ul.products li.product .button { margin-top: 10px !important; }
ul.products li.product:hover { transform: translateY(-4px); border-color: var(--bd-phu); box-shadow: 0 14px 30px rgba(54,78,162,.12); }
ul.products li.product img { border-radius: 12px; margin-bottom: 10px !important; }
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--bd-font-body), sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important; color: var(--bd-chu) !important;
  line-height: 1.45 !important; min-height: 40px; padding: 0 !important;
}
ul.products li.product .price {
  color: var(--bd-nhan-cam) !important; font-weight: 800 !important;
  font-size: 17px !important; font-family: var(--bd-font-head), sans-serif;
}
ul.products li.product .price del { color: var(--bd-chu-nhat) !important; font-size: 13px !important; font-weight: 500 !important; opacity: .8; }
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .button {
  background: var(--bd-chinh) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 700 !important; font-size: 13px !important;
  padding: 9px 18px !important; width: 100%; text-align: center;
}
ul.products li.product .button:hover { background: var(--bd-gradient-dau) !important; }
ul.products li.product { position: relative; }
ul.products li.product span.onsale,
.woocommerce span.onsale {
  position: absolute !important; z-index: 5;
  background: var(--bd-nhan-hong) !important; color: #7a2f3d !important;
  border-radius: 999px !important; font-weight: 800; font-size: 12px; line-height: 1.4;
  min-height: auto !important; min-width: auto !important; padding: 5px 13px !important;
  top: 20px !important; left: 20px !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; font-family: var(--bd-font-head), sans-serif;
}

/* ---------- BANG BAO ---------- */
.bd-banner {
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau));
  border-radius: 24px; padding: 40px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  position: relative; overflow: hidden; flex-wrap: wrap;
}
.bd-banner h2 { color: #fff; font-size: 30px; margin: 0 0 8px; }
.bd-banner p { margin: 0; color: rgba(255,255,255,.9); font-size: 16px; }

/* ---------- BAI VIET ---------- */
.bd-bv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bd-bv { background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.bd-bv:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(54,78,162,.1); }
.bd-bv-img { height: 168px; background: linear-gradient(135deg, var(--bd-nen-nhat), var(--bd-phu)); }
.bd-bv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-bv-body { padding: 16px 18px 20px; }
.bd-bv-body time { font-size: 12.5px; color: var(--bd-chu-nhat); font-weight: 600; }
.bd-bv-body h3 { font-size: 16.5px; margin: 6px 0 8px; line-height: 1.4; }
.bd-bv-body h3 a { text-decoration: none; color: var(--bd-chu); }
.bd-bv-body h3 a:hover { color: var(--bd-chinh); }
.bd-bv-body p { font-size: 14px; color: var(--bd-chu-nhat); margin: 0; line-height: 1.55; }

/* ---------- FOOTER ---------- */
.bd-footer { background: var(--bd-chinh); color: rgba(255,255,255,.82); padding: 46px 0 0; margin-top: 40px; }
.bd-ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 34px; }
.bd-footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; letter-spacing: .04em; text-transform: uppercase; }
.bd-footer a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; }
.bd-footer a:hover { color: var(--bd-nen-nhat); }
.bd-footer ul { list-style: none; margin: 0; padding: 0; }
.bd-footer li { margin-bottom: 9px; }
.bd-footer p { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.65; }
.bd-ft-logo img { height: 52px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.bd-ft-bottom { border-top: 1px solid rgba(255,255,255,.16); padding: 18px 0; font-size: 13px; text-align: center; }

/* ---------- WOO TRANG TRONG ---------- */
/* an nut chuyen san pham cua Storefront (nam ngoai mep, gay roi mat) */
.storefront-product-pagination { display: none !important; }
/* trang san pham don */
.single-product div.product .product_title { font-size: 30px; }
.single-product div.product .price { color: var(--bd-nhan-cam) !important; font-family: var(--bd-font-head), sans-serif; }
.single-product div.product .price del { color: var(--bd-chu-nhat) !important; font-weight: 500; }
.single-product .woocommerce-tabs ul.tabs li a { font-weight: 700; }
.single-product div.product .images img { border-radius: 18px; }
.related.products h2, .upsells.products h2 { font-size: 24px; margin-bottom: 18px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--bd-phu) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--bd-phu) !important; }
.button.alt, button.alt, .woocommerce #respond input#submit.alt {
  background: var(--bd-chinh) !important; border-radius: 999px !important; font-weight: 700 !important;
}
.button.alt:hover { background: var(--bd-gradient-dau) !important; }

/* nut cua khoi Gio hang / Thanh toan (WooCommerce Blocks) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link) {
  background: var(--bd-chinh) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 700 !important;
  font-family: var(--bd-font-head), sans-serif !important; border: 0 !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--bd-gradient-dau) !important; }
.wc-block-components-totals-item__value,
.wc-block-components-product-price { color: var(--bd-nhan-cam) !important; font-weight: 800 !important; }
.wc-block-cart-items__header, .wc-block-components-title { font-family: var(--bd-font-head), sans-serif !important; color: var(--bd-chinh) !important; }
.wc-block-components-checkout-step__title { color: var(--bd-chinh) !important; }
.entry-title, .page-title { color: var(--bd-chinh); }

/* ---------- MEGA MENU 2 CỘT ---------- */
/* mo neo mega menu vao khung .bd-wrap cua header, khong neo vao chu "San pham"
   -> bang menu luon nam gon trong khung, khong bao gio tran ra mep */
.bd-head .bd-wrap { position: relative; }
.bd-mega-boc { position: static; display: inline-flex; align-items: center; }
.bd-mega-mo i { font-style: normal; font-size: 10px; opacity: .6; transition: transform .25s; display: inline-block; }
.bd-mega-boc:hover .bd-mega-mo i { transform: rotate(180deg); }
.bd-mega {
  position: absolute; top: calc(100% + 14px); left: 24px; right: 24px; transform: translateY(10px);
  background: #fff; border: 1px solid #e8f1f8; border-radius: 20px;
  box-shadow: 0 30px 70px rgba(54,78,162,.18); z-index: 900; overflow: hidden;
  display: grid; grid-template-columns: 264px 1fr; min-height: 386px;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.bd-mega-boc:hover .bd-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.bd-mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }

/* cot trai: danh sach nhom cha */
.bd-mega-trai { background: var(--bd-nen-phu); border-right: 1px solid #e8f1f8; padding: 10px 0; }
.bd-mega-cha {
  display: flex !important; align-items: center; gap: 12px; position: relative;
  padding: 12px 18px !important; font-size: 14px !important; font-weight: 600 !important;
  color: var(--bd-chu) !important; transition: background .18s, color .18s;
}
.bd-mega-cha::after { display: none !important; }
.bd-mega-cha b { font-family: var(--bd-font-head), sans-serif; font-weight: 700; flex: 1; }
.bd-mega-ico {
  width: 36px; height: 36px; border-radius: 11px; background: #fff; border: 1px solid #e3eef7;
  display: grid; place-items: center; flex-shrink: 0; color: var(--bd-chinh);
  transition: transform .25s, background .18s, border-color .18s;
}
.bd-mega-ico svg { width: 19px; height: 19px; }
.bd-mui { font-style: normal; font-size: 17px; color: #b9c7d8; transition: transform .22s, color .18s; }
.bd-mega-cha:hover, .bd-mega-cha.chon { background: #fff; color: var(--bd-chinh) !important; }
.bd-mega-cha:hover .bd-mega-ico, .bd-mega-cha.chon .bd-mega-ico {
  background: var(--bd-chinh); border-color: var(--bd-chinh); color: #fff; transform: scale(1.08);
}
.bd-mega-cha:hover .bd-mui, .bd-mega-cha.chon .bd-mui { transform: translateX(4px); color: var(--bd-chinh); }
.bd-mega-cha.chon::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--bd-chinh);
}

/* cot phai: danh muc con + goi y san pham */
.bd-mega-phai { padding: 22px 26px; position: relative; }
.bd-mega-bang { display: none; grid-template-columns: repeat(4, 1fr); gap: 6px 24px; }
.bd-mega-bang.hien { display: grid; animation: bd-mega-vao .28s ease; }
@keyframes bd-mega-vao { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.bd-mega-nhom { padding-bottom: 8px; }
.bd-mega-con {
  display: block !important; font-family: var(--bd-font-head), sans-serif;
  font-weight: 700 !important; font-size: 14px !important; color: var(--bd-chinh) !important;
  padding: 4px 0 8px !important; position: relative;
}
.bd-mega-con::after { display: none !important; }
.bd-mega-con:hover { color: var(--bd-gradient-dau) !important; }
.bd-mega-sp {
  display: flex !important; align-items: flex-start; gap: 6px; font-size: 13px !important;
  font-weight: 500 !important; color: var(--bd-chu-nhat) !important; padding: 4px 0 !important;
  transition: color .16s, transform .16s;
}
.bd-mega-sp::after { display: none !important; }
.bd-mega-sp i { font-style: normal; color: var(--bd-phu); font-size: 10px; margin-top: 3px; transition: transform .16s; }
.bd-mega-sp:hover { color: var(--bd-chinh) !important; transform: translateX(3px); }
.bd-mega-sp:hover i { transform: translateX(2px); }

/* ---------- SLIDER ---------- */
.bd-hero { min-height: 430px; display: flex; align-items: center; }
.bd-slide { display: none; align-items: center; gap: 40px; }
.bd-slide.hien { display: flex; animation: bd-vao .5s ease; }
@keyframes bd-vao { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: none; } }
.bd-hero-ico { flex-shrink: 0; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.32); display: grid; place-items: center; color: #fff; }
.bd-hero-ico svg { width: 92px; height: 92px; stroke-width: 1.3; }
.bd-cham { display: flex; gap: 9px; margin-top: 24px; }
.bd-cham button { width: 32px; height: 5px; border-radius: 3px; border: 0; cursor: pointer; background: rgba(255,255,255,.4); transition: background .2s, width .2s; }
.bd-cham button.chon { background: #fff; width: 46px; }

/* ---------- DANH MUC: moi the mot mau trong bang mau thuong hieu ---------- */
.bd-dm-grid { grid-template-columns: repeat(4, 1fr); }
.bd-dm { --c: var(--bd-chinh); --c-nen: #eaeffb; }
.bd-dm:nth-child(4n+2) { --c: var(--bd-gradient-dau); --c-nen: #e2f2fc; }
.bd-dm:nth-child(4n+3) { --c: var(--bd-nhan-cam);     --c-nen: #fff2de; }
.bd-dm:nth-child(4n+4) { --c: #dd7f92;                --c-nen: #fceaee; }

.bd-dm { border-color: var(--c-nen); background: #fff; overflow: hidden; position: relative; }
.bd-dm::before {
  content: ''; position: absolute; inset: 0; background: var(--c-nen);
  transform: scaleY(0); transform-origin: bottom; transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bd-dm > * { position: relative; z-index: 2; }
.bd-dm:hover { border-color: var(--c); box-shadow: 0 16px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.bd-dm:hover::before { transform: scaleY(1); }
.bd-dm-ico {
  background: var(--c) !important; color: #fff !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 34%, transparent);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.bd-dm:hover .bd-dm-ico { transform: translateY(-4px) scale(1.1) rotate(-6deg); }
.bd-dm b { transition: color .2s; }
.bd-dm:hover b { color: var(--c); }
.bd-dm em { display: block; font-style: normal; font-size: 12px; color: var(--bd-chu-nhat); margin-top: 5px; transition: color .2s; }
.bd-dm:hover em { color: color-mix(in srgb, var(--c) 78%, #000); }

/* mua theo do tuoi - dung cung cach to mau */
.bd-tuoi { --c: var(--bd-chinh); --c-nen: #eaeffb; position: relative; overflow: hidden; }
.bd-tuoi:nth-child(4n+2) { --c: var(--bd-gradient-dau); --c-nen: #e2f2fc; }
.bd-tuoi:nth-child(4n+3) { --c: var(--bd-nhan-cam);     --c-nen: #fff2de; }
.bd-tuoi:nth-child(4n+4) { --c: #dd7f92;                --c-nen: #fceaee; }
.bd-tuoi::before { content: ''; position: absolute; inset: 0; background: var(--c-nen); transform: scaleY(0); transform-origin: bottom; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.bd-tuoi > * { position: relative; z-index: 2; }
.bd-tuoi:hover::before { transform: scaleY(1); }
.bd-tuoi:hover { border-color: var(--c); box-shadow: 0 16px 34px color-mix(in srgb, var(--c) 22%, transparent); }
.bd-tuoi-ico { background: var(--c) !important; color: #fff !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 34%, transparent); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.bd-tuoi:hover .bd-tuoi-ico { transform: translateY(-4px) scale(1.1) rotate(-6deg); }
.bd-tuoi:hover b { color: var(--c); }

/* ---------- THANH DAU TRANG DINH KHI CUON ---------- */
/* Storefront dat overflow-x:hidden tren body va .site -> pha vo position:sticky.
   Bo di duoc vi bo cuc Babyro da khong con tran ngang. */
/* overflow-x:clip cat phan tran NHUNG khong tao vung cuon -> sticky van chay
   (khac han overflow-x:hidden cua Storefront) */
html, body, .hfeed.site { overflow: visible !important; }
body { overflow-x: clip !important; }
.site-header { position: sticky; top: 0; z-index: 800; transition: box-shadow .25s; }
.bd-topbar { max-height: 60px; overflow: hidden; transition: max-height .3s ease, opacity .25s; }
body.bd-cuon .bd-topbar { max-height: 0; opacity: 0; }
body.bd-cuon .site-header { box-shadow: 0 6px 26px rgba(54,78,162,.13); }
body.bd-cuon .bd-head { padding: 8px 0; }
body.bd-cuon .bd-logo img { height: 42px; }
.bd-head, .bd-logo img { transition: padding .25s, height .25s; }

/* ---------- HIEU UNG HIEN DAN KHI CUON TOI ---------- */
.bd-hien-dan { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
/* huong bay vao - do JS gan theo vi tri / canh le cua tung phan tu */
.bd-tu-tren { transform: translateY(-38px); }
.bd-tu-duoi { transform: translateY(38px); }
.bd-tu-trai { transform: translateX(-60px); }
.bd-tu-phai { transform: translateX(60px); }
.bd-hien-dan.vao { opacity: 1; transform: none; }

/* May bat "giam chuyen dong" (Windows: Cai dat > Tro nang > Hieu ung hinh anh).
   TRUOC DAY tat sach hieu ung -> chu dung im, Sep tuong bi hong.
   Nay chi bo phan TRUOT, van giu phan chu HIEN DAN (mo dan khong gay chong mat). */
@media (prefers-reduced-motion: reduce) {
  .bd-hien-dan { transform: none !important; transition: opacity .5s ease !important; }
  .bd-hien-dan.vao { opacity: 1 !important; }
}

/* ---------- HIEU UNG THE SAN PHAM ---------- */
ul.products li.product > a:first-of-type { overflow: hidden; border-radius: 12px; }
ul.products li.product img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
ul.products li.product:hover img { transform: scale(1.07); }
ul.products li.product .button { transform: translateY(4px); opacity: .92; transition: all .25s; }
ul.products li.product:hover .button { transform: translateY(0); opacity: 1; box-shadow: 0 8px 18px rgba(54,78,162,.28); }
ul.products li.product .woocommerce-loop-product__title { transition: color .2s; }
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--bd-chinh) !important; }
span.onsale { animation: bd-nhip 2.4s ease-in-out infinite; }
@keyframes bd-nhip { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* nut co hieu ung loe sang */
.bd-btn { position: relative; overflow: hidden; }
.bd-btn::after {
  /* display PHAI co: Storefront co "button::after{display:none}" nen o 4 nut
     <button type=submit> (dang ky dai ly, lien he...) hieu ung nay tung chet
     im lang. Cong soi_css.py bat duoc. */
  content: ''; display: block; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.bd-btn:hover::after { left: 140%; }

/* the bai viet, cam nhan, cua hang: nhac len khi tro vao */
.bd-bv-img { overflow: hidden; display: block; }
.bd-bv-img img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.bd-bv:hover .bd-bv-img img { transform: scale(1.06); }
.bd-cn, .bd-ch { transition: transform .25s, box-shadow .25s, border-color .25s; }
.bd-cn:hover, .bd-ch:hover { transform: translateY(-4px); border-color: var(--bd-phu); box-shadow: 0 14px 30px rgba(54,78,162,.1); }
.bd-ch:hover .bd-ch-ico { background: var(--bd-chinh); color: #fff; transition: background .2s, color .2s; }
.bd-ck { transition: transform .22s, box-shadow .22s; }
.bd-ck:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(54,78,162,.12); }
.bd-ck:hover .bd-ck-ico { background: var(--bd-chinh); color: #fff; transition: .2s; }

/* ---------- FLASH SALE ---------- */
.bd-flash { background: linear-gradient(180deg, #fff6e8, var(--bd-nen)); }
.bd-flash-head { align-items: flex-start; }
.bd-flash-t { color: var(--bd-nhan-cam) !important; }
.bd-flash-head h2::before { background: linear-gradient(180deg, #ffc46b, var(--bd-nhan-cam)) !important; }
.bd-flash-head p { margin: 4px 0 0 19px; color: var(--bd-chu-nhat); font-size: 14px; }
.bd-dem { display: flex; gap: 8px; }
.bd-dem-o { background: var(--bd-nhan-cam); color: #fff; border-radius: 12px; padding: 8px 12px; text-align: center; min-width: 58px; }
.bd-dem-o b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 19px; line-height: 1.1; }
.bd-dem-o i { font-style: normal; font-size: 10.5px; opacity: .9; }

/* ---------- TAB DANH MUC CON ---------- */
.bd-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 auto; }
.bd-tabs button {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 600; color: var(--bd-chu-nhat); cursor: pointer;
  font-family: var(--bd-font-body), sans-serif; transition: all .18s;
}
.bd-tabs button:hover { border-color: var(--bd-phu); color: var(--bd-chinh); }
.bd-tabs button.chon { background: var(--bd-chinh); border-color: var(--bd-chinh); color: #fff; }
.bd-tab-noi.dang-tai { opacity: .4; transition: opacity .2s; }

/* ---------- MUA THEO DO TUOI ---------- */
.bd-tuoi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bd-tuoi {
  text-decoration: none; text-align: center; background: #fff; border: 1.5px solid #e8f1f8;
  border-radius: 20px; padding: 26px 16px; transition: transform .2s, box-shadow .2s, border-color .2s; display: block;
}
.bd-tuoi:hover { transform: translateY(-4px); border-color: var(--bd-phu); box-shadow: 0 14px 30px rgba(54,78,162,.1); }
.bd-tuoi-ico { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, var(--bd-nen-nhat), #fff); display: grid; place-items: center; color: var(--bd-chinh); }
.bd-tuoi-ico svg { width: 32px; height: 32px; }
.bd-tuoi b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 17px; color: var(--bd-chinh); margin-bottom: 4px; }
.bd-tuoi span { font-size: 13.5px; color: var(--bd-chu-nhat); }

/* ---------- BANNER DOI ---------- */
.bd-banner2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bd-bn {
  position: relative; overflow: hidden; border-radius: 22px; padding: 32px 34px; text-decoration: none;
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau)); color: #fff; display: block;
  transition: transform .2s, box-shadow .2s;
}
.bd-bn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(54,78,162,.22); }
.bd-bn-cam { background: linear-gradient(120deg, #ff9c00, #ffbe55); }
.bd-bn b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 24px; color: #fff; margin-bottom: 7px; position: relative; z-index: 2; }
.bd-bn > span:not(.bd-tim) { display: block; color: rgba(255,255,255,.92); font-size: 15px; margin-bottom: 16px; position: relative; z-index: 2; }
.bd-bn em { font-style: normal; font-weight: 800; font-size: 14px; background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: 9px 20px; display: inline-block; position: relative; z-index: 2; font-family: var(--bd-font-head), sans-serif; }
.bd-bn .bd-tim { right: -30px; top: -40px; width: 220px; height: 220px; }

/* ---------- DAI CON SO ---------- */
.bd-conso { background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau)); padding: 40px 0; }
.bd-cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bd-cs { text-align: center; color: #fff; }
.bd-cs b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 34px; line-height: 1.1; }
.bd-cs span { font-size: 14px; color: rgba(255,255,255,.86); }

/* ---------- CAM NHAN ---------- */
.bd-cn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bd-cn { background: #fff; border: 1.5px solid #e8f1f8; border-radius: 20px; padding: 24px; }
.bd-sao { color: var(--bd-nhan-cam); font-size: 17px; letter-spacing: 2px; margin-bottom: 10px; }
.bd-cn p { font-size: 14.5px; line-height: 1.65; color: var(--bd-chu); font-style: italic; margin-bottom: 16px; }
.bd-cn-ai { display: flex; align-items: center; gap: 12px; }
.bd-cn-av { width: 42px; height: 42px; border-radius: 50%; background: var(--bd-nen-nhat); color: var(--bd-chinh); display: grid; place-items: center; font-family: var(--bd-font-head), sans-serif; font-weight: 800; font-size: 17px; }
.bd-cn-ai b { display: block; font-size: 14px; color: var(--bd-chinh); font-family: var(--bd-font-head), sans-serif; }
.bd-cn-ai i { font-style: normal; font-size: 12.5px; color: var(--bd-chu-nhat); }

/* ---------- CUA HANG ---------- */
.bd-ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bd-ch { background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px; padding: 22px; }
.bd-ch-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--bd-nen-nhat); color: var(--bd-chinh); display: grid; place-items: center; margin-bottom: 12px; }
.bd-ch-ico svg { width: 22px; height: 22px; }
.bd-ch b { display: block; font-family: var(--bd-font-head), sans-serif; font-size: 15.5px; color: var(--bd-chinh); margin-bottom: 6px; }
.bd-ch span { display: block; font-size: 13.5px; color: var(--bd-chu-nhat); line-height: 1.5; margin-bottom: 8px; }
.bd-ch em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--bd-nhan-cam); }

/* ---------- DANG KY NHAN TIN ---------- */
.bd-dangky {
  position: relative; overflow: hidden; border-radius: 24px; padding: 38px 40px;
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau)); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.bd-dangky h2 { color: #fff; font-size: 27px; margin: 0 0 7px; }
.bd-dangky p { color: rgba(255,255,255,.9); margin: 0; font-size: 15px; max-width: 480px; }
.bd-form { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.bd-form input {
  border: 0; border-radius: 999px; padding: 14px 22px; font-size: 15px; min-width: 260px;
  font-family: var(--bd-font-body), sans-serif;
}
.bd-form .bd-xong { flex-basis: 100%; font-size: 13.5px; color: #fff; font-weight: 600; }
.bd-giua { text-align: center; margin-top: 26px; }

/* ---------- TRANG DANH MUC ---------- */
.bd-dm-banner {
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau)); color: #fff;
  border-radius: 0; padding: 40px 0; position: relative; overflow: hidden; margin-bottom: 28px;
}
.bd-dm-banner h1 { color: #fff !important; font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; }
.bd-dm-banner p { color: rgba(255,255,255,.9); margin: 0; font-size: 15px; max-width: 620px; }
.bd-duong { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.bd-duong a { color: rgba(255,255,255,.9); text-decoration: none; }
.bd-con-chip { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
.bd-con-chip a {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 999px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--bd-chu); text-decoration: none; transition: all .18s;
}
.bd-con-chip a:hover, .bd-con-chip a.chon { background: var(--bd-chinh); border-color: var(--bd-chinh); color: #fff !important; }

/* ---------- MAN HINH NHO ---------- */
@media (max-width: 1024px) {
  .bd-dm-grid { grid-template-columns: repeat(3, 1fr); }
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
  .bd-ck-grid, .bd-bv-grid, .bd-ft-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-tuoi-grid, .bd-ch-grid, .bd-cs-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-cn-grid { grid-template-columns: 1fr; }
  .bd-hero-ico { display: none; }
  .bd-sp-head { flex-wrap: wrap; }
  .bd-tabs { order: 3; width: 100%; margin: 4px 0 0; }
}
@media (max-width: 860px) {
  .bd-menu-nut { display: flex !important; }
  .bd-head .bd-wrap { justify-content: space-between; position: relative; }
  .bd-nav {
    display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    background: #fff; border: 1px solid #e8f1f8; border-radius: 16px;
    box-shadow: 0 18px 40px rgba(54,78,162,.16); padding: 10px;
    flex-direction: column; align-items: stretch; gap: 0; z-index: 999;
  }
  .bd-nav.mo { display: flex; }
  .bd-nav a { padding: 13px 14px; border-radius: 10px; font-size: 16px; }
  .bd-nav a:hover { background: var(--bd-nen-phu); }
  .bd-nav a::after { display: none; }
  .bd-cart { text-align: center; margin-top: 6px; }
  .bd-topbar .bd-wrap { justify-content: center; font-size: 12px; gap: 10px; }
}
@media (max-width: 640px) {
  .bd-dm-grid { grid-template-columns: repeat(2, 1fr); }
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .bd-ck-grid { grid-template-columns: 1fr; }
  .bd-bv-grid { grid-template-columns: 1fr; }
  .bd-ft-grid { grid-template-columns: 1fr; }
  .bd-hero { padding: 46px 0 54px; min-height: auto; }
  .bd-sec { padding: 38px 0; }
  .bd-tim-1 { width: 190px; height: 190px; }
  .bd-banner, .bd-dangky { padding: 26px; }
  .bd-banner2, .bd-tuoi-grid, .bd-ch-grid { grid-template-columns: 1fr; }
  .bd-cs-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .bd-cs b { font-size: 26px; }
  .bd-dem-o { min-width: 48px; padding: 6px 9px; }
  .bd-dem-o b { font-size: 16px; }
  .bd-form input { min-width: 0; flex: 1; }
  .bd-dangky h2 { font-size: 22px; }
  .bd-mega { display: none; }
}

/* ==========================================================================
   CAC KHOI MOI - dung theo suon trang chu sube (khach yeu cau du section)
   Moi khoi deu nam trong .bd-wrap nen tu dong an trong vung an toan.
   ========================================================================== */

/* tien ich dung chung */
.bd-vien{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:99px;
  border:1.6px solid var(--bd-chinh);color:var(--bd-chinh);font-weight:700;font-size:14px;
  background:#fff;transition:.22s}
.bd-vien:hover{background:var(--bd-chinh);color:#fff;transform:translateY(-2px)}
.bd-rong{max-width:900px;margin-left:auto;margin-right:auto}

/* ---------- 1. CHAO MUNG + TUYEN DAI LY / CTV ---------- */
.bd-chaomung{position:relative;overflow:hidden;padding:66px 0 74px;
  background:var(--bd-chinh);color:#fff;text-align:center}
.bd-chaomung .bd-tim{width:340px;height:340px;right:-80px;top:-90px;background:#fff}
.bd-cm-nho{font:700 16px/1.4 var(--bd-font-body);letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin:0}
.bd-cm-to{font:800 clamp(30px,4.4vw,54px)/1.15 var(--bd-font-head);margin:6px 0 40px;color:#fff}
.bd-cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bd-cm-the{position:relative;display:block;border-radius:22px;overflow:hidden;
  background:#2c3f83;box-shadow:0 18px 44px rgba(0,0,0,.22);transition:.28s}
.bd-cm-the:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.3)}
.bd-cm-the>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.bd-cm-noi{position:relative;padding:30px 30px 32px;text-align:left;max-width:62%}
.bd-cm-k{display:block;font:700 13px/1 var(--bd-font-body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bd-nhan-cam)}
.bd-cm-noi b{display:block;font:800 clamp(24px,2.6vw,34px)/1.15 var(--bd-font-head);
  color:#fff;margin:6px 0 16px}
.bd-cm-noi ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.bd-cm-noi li{position:relative;padding-left:26px;font:600 14px/1.4 var(--bd-font-body);color:#fff}
.bd-cm-noi li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;
  border-radius:50%;border:2px solid var(--bd-nhan-cam)}
.bd-cm-noi li::after{content:"";position:absolute;left:4.5px;top:7.5px;width:6px;height:3px;
  border-left:2px solid var(--bd-nhan-cam);border-bottom:2px solid var(--bd-nhan-cam);
  transform:rotate(-45deg)}
.bd-cm-nut{display:inline-block;padding:12px 30px;border-radius:99px;
  background:#ffe9a8;color:var(--bd-chinh);font:800 15px/1 var(--bd-font-head)}

/* ---------- 2. VIDEO GIOI THIEU ---------- */
.bd-video{background:var(--bd-nen-phu)}
.bd-vd-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.bd-vd-k{display:inline-block;padding:9px 20px;border-radius:99px;background:#fff;
  color:var(--bd-chinh);font:700 12px/1 var(--bd-font-body);letter-spacing:.14em;
  text-transform:uppercase;box-shadow:0 4px 14px rgba(54,78,162,.12)}
.bd-vd-chu h2{font:800 clamp(26px,3.4vw,40px)/1.2 var(--bd-font-head);color:var(--bd-chinh);margin:16px 0 18px}
.bd-vd-chu p{color:var(--bd-chu-nhat);margin:0 0 12px;line-height:1.75}
.bd-vd-anh{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 20px 46px rgba(54,78,162,.16)}
.bd-vd-anh img{display:block;width:100%;height:auto}
.bd-vd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;background:var(--bd-chinh);color:#fff;
  display:grid;place-items:center;transition:.25s;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.bd-vd-play svg{width:34px;height:34px;margin-left:4px}
.bd-vd-anh:hover .bd-vd-play{transform:translate(-50%,-50%) scale(1.12)}

/* ---------- 3. THUONG HIEU PHAN PHOI ---------- */
.bd-th-logo{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap;margin-bottom:44px}
.bd-th-mot{display:flex;align-items:center;gap:22px}
.bd-th-mot img{height:58px;width:auto}
.bd-th-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.bd-th-the{display:block;position:relative;border-radius:22px;overflow:hidden;
  background:var(--bd-nen-nhat);padding:30px 30px 0;text-align:center;transition:.28s}
.bd-th-the.cam{background:#fff3e0}
.bd-th-the:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(54,78,162,.16)}
.bd-th-nhan{display:inline-block;padding:10px 24px;border-radius:99px;background:var(--bd-chinh);
  color:#fff;font:700 14px/1 var(--bd-font-body)}
.bd-th-the.cam .bd-th-nhan{background:var(--bd-nhan-cam)}
.bd-th-the em{display:block;margin:14px 0 18px;font:600 17px/1.4 var(--bd-font-body);
  font-style:normal;color:var(--bd-chinh)}
.bd-th-the img{display:block;width:100%;height:auto;border-radius:16px 16px 0 0}

/* ---------- 4. BAN DO NPP / DAI LY / CTV ---------- */
/* Cot ban do phai du rong: Viet Nam von hep be ngang, bo hep qua thi
   nhin thanh mot cuc, khong ra hinh dat nuoc. */
/* Ba cot: ban do - danh sach tinh - anh san pham.
   Truoc day chi khai 2 cot nen anh bi day xuong hang duoi, nam chong chenh
   giua trang. Ba con thi phai khai du ba cot. */
.bd-bd-grid{display:grid;grid-template-columns:270px 1fr 330px;gap:40px;align-items:center}
.bd-bd-map{color:var(--bd-chinh)}
.bd-bd-svg{width:100%;height:auto;max-height:560px}
.bd-bd-diem{display:grid;gap:26px;padding-top:20px}
.bd-bd-mot{display:flex;gap:16px;align-items:flex-start}
.bd-bd-cham{flex:none;width:14px;height:14px;margin-top:6px;border-radius:50%;
  border:3px solid var(--bd-chinh);background:#fff}
.bd-bd-chu i{display:block;font-style:normal;color:var(--bd-chu-nhat);font-size:14px}
.bd-bd-chu b{display:block;font:700 17px/1.4 var(--bd-font-body);color:var(--bd-chinh);
  border-bottom:2px solid var(--bd-phu);padding-bottom:8px}
.bd-bd-anh img{display:block;width:100%;height:auto;border-radius:20px}

/* ---------- 5. CHIA SE TU DOI TAC ---------- */
/* tu dan: 2 the thi 2 cot, 3 the thi 3 cot - khoi the le loi nam mot minh */
.bd-cs2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.bd-cs2{background:#fff;border:1.5px solid #e6eefc;border-radius:20px;padding:26px;text-align:center;
  transition:.25s}
.bd-cs2:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(54,78,162,.12)}
.bd-cs2-logo{display:grid;place-items:center;height:150px;border-radius:14px;background:var(--bd-nen-phu)}
.bd-cs2-logo img{max-height:110px;width:auto}
.bd-cs2 b{display:block;margin:18px 0 10px;font:800 20px/1.3 var(--bd-font-head);color:var(--bd-chinh)}
.bd-cs2 p{margin:0;color:var(--bd-chu-nhat);line-height:1.75;font-size:15px}

/* ---------- 6. BAO CHI ---------- */
.bd-bc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bd-bc{display:block;transition:.25s}
.bd-bc:hover{transform:translateY(-5px)}
.bd-bc-anh{position:relative;display:block;border-radius:16px;overflow:hidden}
.bd-bc-anh img{display:block;width:100%;height:auto}
.bd-bc-anh em{position:absolute;left:12px;bottom:12px;padding:5px 13px;border-radius:8px;
  background:#fff;color:var(--bd-chinh);font:800 12px/1 var(--bd-font-body);font-style:normal}
.bd-bc b{display:block;margin-top:14px;font:700 15px/1.5 var(--bd-font-body);color:var(--bd-chu)}
.bd-bc:hover b{color:var(--bd-chinh)}

/* ---------- 7. CONG DONG (luoi anh) ---------- */
.bd-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:18px}
.bd-cd{margin:0;position:relative;border-radius:16px;overflow:hidden}
.bd-cd img{display:block;width:100%;height:100%;object-fit:cover;transition:.4s}
.bd-cd:hover img{transform:scale(1.06)}
.bd-cd figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;
  font:700 13px/1.3 var(--bd-font-body)}
.bd-cd-1{grid-column:span 2;grid-row:span 2}
.bd-cd-4{grid-column:span 2}

/* ---------- 8. DOI NGU NHAN SU ---------- */
.bd-dn-dau{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}
.bd-dn-dau h2{font:800 clamp(26px,3.4vw,40px)/1.15 var(--bd-font-head);color:var(--bd-chinh);margin:0}
.bd-dn-k{display:flex;align-items:center;gap:14px;font:800 13px/1 var(--bd-font-body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--bd-chinh)}
.bd-dn-k i{display:block;width:70px;height:3px;border-radius:2px;background:var(--bd-nhan-cam)}
.bd-dn-k::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--bd-chinh)}
.bd-dn-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:46px;align-items:center}
.bd-dn-chu h3{font:700 clamp(21px,2.4vw,28px)/1.35 var(--bd-font-head);color:var(--bd-chinh);margin:0 0 18px}
.bd-dn-chu p{color:var(--bd-chu-nhat);line-height:1.8;margin:0 0 12px}
.bd-dn-chu .bd-btns{margin-top:24px}
.bd-dn-anh img{display:block;width:100%;height:auto;border-radius:20px;
  box-shadow:0 20px 46px rgba(54,78,162,.18)}

/* ---------- 9. KHACH HANG DOANH NGHIEP ---------- */
.bd-kh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bd-kh{display:grid;place-items:center;background:#fff;border-radius:14px;padding:26px;
  min-height:130px;box-shadow:0 4px 18px rgba(54,78,162,.08);transition:.25s}
.bd-kh:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(54,78,162,.14)}
.bd-kh img{max-width:80%;height:auto}

/* ---------- 10. DANG KY DAI LY / NPP / CTV ---------- */
.bd-dk-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.bd-dkdl h2{font:800 clamp(25px,3.2vw,38px)/1.2 var(--bd-font-head);color:var(--bd-chinh);margin:0 0 14px}
.bd-dkdl p{color:var(--bd-chu-nhat);line-height:1.7;margin:0 0 24px}
.bd-dk-form{display:grid;gap:14px;max-width:440px}
.bd-dk-form input{width:100%;padding:15px 22px;border-radius:99px;border:1.5px solid #dbe6f7;
  font:500 15px/1 var(--bd-font-body);background:#fff}
.bd-dk-form input:focus{outline:none;border-color:var(--bd-chinh)}
.bd-dk-form button{justify-self:start;margin-top:4px}
.bd-dk-anh img{display:block;width:100%;height:auto;border-radius:20px}

/* ---------- MAN HINH NHO ---------- */
@media(max-width:980px){
  .bd-cm-grid,.bd-th-grid,.bd-cs2-grid,.bd-dk-grid,.bd-vd-grid,.bd-dn-grid{grid-template-columns:1fr}
  .bd-cm-noi{max-width:100%}
  .bd-bc-grid,.bd-kh-grid{grid-template-columns:1fr 1fr}
  .bd-cd-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
  .bd-cd-1,.bd-cd-4{grid-column:span 2;grid-row:auto}
  .bd-bd-grid{grid-template-columns:1fr}
  .bd-bd-map{max-width:190px;margin:0 auto}
  .bd-dn-dau{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   FOOTER KIEU DAY DU (5 cot) + KHUON TRANG CON
   ========================================================================== */

/* ---------- FOOTER ---------- */
.bd-ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr 1fr;gap:34px}
.bd-ft-cty .bd-ft-logo img{max-width:200px;height:auto}
.bd-ft-ten{display:block;margin:14px 0 16px;font:700 16px/1.4 var(--bd-font-body);color:#fff}
.bd-ft-tt{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bd-ft-tt li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;opacity:.92}
.bd-ft-tt li>span{flex:none;width:19px;height:19px;margin-top:1px;opacity:.85}
.bd-ft-tt li>span svg{width:19px;height:19px}
.bd-ft-huy{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
/* Huy hieu chinh thuc Bo Cong Thuong.
   NGUON: ban SVG cua fptshop (cdn2.fptshop.com.vn/svg/da_thong_bao_bo_cong_thuong_icon_*.svg),
   dung lai thanh PNG 360px cho nhe (5,1 KB).
   KHONG dung ban cua nhathuoclongchau: SVG do co mot lop <mask> xen mat mep
   phai -> hop xanh vuong canh, chu "BAO" sat mep, goc duoi phai cut. Nhin o
   co that (158px) thi khong ro, phong to moi lo (khach bat 23/08).
   Bo hoan toan bo huy hieu ve tay cu (.bd-huy / .bd-huy-1 / .bd-huy-2): chu
   trang nam duoi luat ".bd-footer a{color:...}" nen bien thanh o trang tinh. */
.bd-huy-bct{display:inline-block;line-height:0;transition:opacity .2s,transform .2s}
.bd-huy-bct img{display:block;width:158px;height:auto}
.bd-huy-bct:hover{opacity:.88;transform:translateY(-2px)}

/* Zalo o hang mang xa hoi: logo that phu kin o tron, khong nen, khong dem */
.bd-ft-mxh a.bd-mxh-zalo{background:none;padding:0;overflow:hidden}
.bd-ft-mxh a.bd-mxh-zalo img{width:38px;height:38px;display:block;border-radius:9px}
.bd-ft-mxh a.bd-mxh-zalo:hover{background:none}
.bd-ft-qr{background:#fff;border-radius:10px;padding:10px;width:max-content}
.bd-ft-qr img{display:block;width:132px;height:132px}
.bd-ft-mxh{display:flex;gap:11px}
.bd-ft-mxh a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;transition:.22s}
.bd-ft-mxh a svg{width:19px;height:19px}
.bd-ft-mxh a:hover{background:var(--bd-nhan-cam);transform:translateY(-3px)}

/* ---------- DAU TRANG CON ---------- */
.bd-trang-dau{position:relative;overflow:hidden;padding:52px 0 56px;
  background:var(--bd-chinh);color:#fff}
.bd-trang-dau .bd-tim{width:300px;height:300px;right:-60px;top:-70px;background:#fff}
.bd-duongdan{position:relative;display:flex;gap:9px;align-items:center;font-size:14px;opacity:.9;margin-bottom:12px}
.bd-duongdan a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bd-duongdan b{font-weight:600}
.bd-trang-dau h1{position:relative;margin:0;color:#fff;
  font:800 clamp(27px,3.8vw,44px)/1.2 var(--bd-font-head)}
.bd-trang-tom{position:relative;margin:14px 0 0;max-width:760px;line-height:1.7;opacity:.94}

/* ---------- NOI DUNG TRANG CON ---------- */
.bd-noidung{max-width:960px;margin:0 auto;color:var(--bd-chu);font-size:16px;line-height:1.8}
.bd-noidung h2{margin:38px 0 16px;font:800 clamp(21px,2.6vw,29px)/1.3 var(--bd-font-head);color:var(--bd-chinh)}
.bd-noidung h2:first-child{margin-top:0}
.bd-noidung h3{margin:28px 0 12px;font:700 19px/1.4 var(--bd-font-head);color:var(--bd-chu)}
.bd-noidung p{margin:0 0 14px}
.bd-noidung a{color:var(--bd-chinh);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bd-noidung ul{margin:0 0 18px;padding-left:0;list-style:none}
.bd-noidung li{position:relative;padding-left:28px;margin-bottom:10px}
.bd-noidung li::before{content:"";position:absolute;left:6px;top:11px;width:8px;height:8px;
  border-radius:50%;background:var(--bd-nhan-cam)}
.bd-noidung table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;
  border-radius:12px;overflow:hidden;box-shadow:0 4px 18px rgba(54,78,162,.09)}
.bd-noidung th{background:var(--bd-chinh);color:#fff;text-align:left;padding:13px 16px;
  font:700 14px/1.4 var(--bd-font-body)}
.bd-noidung td{padding:12px 16px;border-bottom:1px solid #e8eefb;background:#fff}
.bd-noidung tr:last-child td{border-bottom:0}
.bd-noidung tr:nth-child(even) td{background:var(--bd-nen-phu)}
.bd-luu-y{margin-top:26px;padding:15px 20px;border-radius:12px;background:#fff6e5;
  border-left:4px solid var(--bd-nhan-cam);font-size:14px;color:#7a5200}

/* the nho dung trong noi dung trang con */
.bd-luoi3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 22px}
.bd-the-nho{background:var(--bd-nen-phu);border-radius:16px;padding:22px;transition:.24s}
.bd-the-nho:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(54,78,162,.12)}
.bd-the-nho b{display:block;margin-bottom:8px;font:700 17px/1.35 var(--bd-font-head);color:var(--bd-chinh)}
.bd-the-nho span{display:block;font-size:14.5px;line-height:1.65;color:var(--bd-chu-nhat)}

@media(max-width:980px){
  .bd-ft-grid{grid-template-columns:1fr 1fr}
  .bd-luoi3{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bd-ft-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   CHINH THEO GOP Y: chu footer noi hon + canh cheo noi 2 khoi dau
   ========================================================================== */

/* ---------- 1. CHU FOOTER NOI HON ---------- */
/* truoc day chu de o .82 do mo -> chim tren nen xanh, nay keo len gan trang han */
/* Storefront co luat .site-footer a:not(.button):not(.components-button) manh hon
   -> link footer bi keo ve #333 xam den, nhin chim tren nen xanh.
   Phai danh dau !important moi thang duoc (giong cach da lam voi .col-full). */
.bd-footer{color:rgba(255,255,255,.96) !important}
.bd-footer p{color:rgba(255,255,255,.96) !important;font-size:14.5px;line-height:1.7}
.bd-footer a{color:rgba(255,255,255,.96) !important;font-size:14.5px;line-height:1.7}
.bd-footer a:hover{color:var(--bd-nhan-cam) !important}
.bd-footer li{margin-bottom:11px}

/* tieu de cot: trang dam + gach cam ben duoi cho ro dau muc */
.bd-footer h4{position:relative;color:#fff;font-weight:800;font-size:15px;
  padding-bottom:11px;margin-bottom:17px}
.bd-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;
  border-radius:2px;background:var(--bd-nhan-cam)}

/* cot thong tin cong ty */
.bd-ft-ten{color:#fff !important;font-size:16.5px}
.bd-ft-tt li{opacity:1;color:rgba(255,255,255,.96) !important;font-size:14.5px}
.bd-ft-tt li>span{opacity:1;color:var(--bd-nhan-cam)}
.bd-ft-bottom{color:rgba(255,255,255,.9) !important}
.bd-footer h4{color:#fff !important}

/* ---------- 2. CANH CHEO NOI ANH BIA VOI KHOI CHAO MUNG ---------- */
/* khoi chao mung an len day anh bia mot khoang, roi cat cheo -> thanh hinh
   tam giac giong trang mau. Trai cao, phai thap dan. */
/* Dinh nhon o CHINH GIUA, hai ben doc deu xuong -> hinh MUI TEN chia len,
   mau anh bia lo ra o ca hai goc tren. Dung kieu trang mau.
   Hai luot truoc lam sai: (1) be goc lech o 48% -> gay khuc, nhin meo;
   (2) mot duong thang suot -> chi la cat vat goc, khong ra mui ten. */
:root{ --bd-cheo:110px }
.bd-chaomung{
  --cheo:var(--bd-cheo);
  margin-top:calc(var(--cheo) * -1);
  padding-top:calc(52px + var(--cheo));
  clip-path:polygon(0 var(--cheo), 50% 0, 100% var(--cheo), 100% 100%, 0 100%);
  z-index:2;
}
/* Mui ten an len day anh bia, nen anh bia phai chua san cho o duoi,
   neu khong nut bam se dinh vao duong cat (Sep da bat loi nay). */
.bd-hero{ padding-bottom:calc(var(--bd-cheo) + 54px) !important }
/* khoi trang ngay sau cung cat cheo nguoc lai cho lien mach */
.bd-chaomung + .bd-cam-ket{position:relative;z-index:1}

@media(max-width:980px){ :root{ --bd-cheo:54px } }

/* ---------- 4. LUOI ANH CONG DONG: cho deu, khong so le lech ---------- */
/* truoc day o dau to gap 4 lan cac o khac -> nhin lech va vo bo cuc */
.bd-cd-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:20px}
.bd-cd{aspect-ratio:4/3}
.bd-cd-1,.bd-cd-4{grid-column:auto;grid-row:auto}
.bd-cd figcaption{padding:30px 16px 14px;font-size:14px}
@media(max-width:980px){ .bd-cd-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .bd-cd-grid{grid-template-columns:1fr} }

/* ---------- 5. CAN CHU CHO NGAY NGAN ---------- */
.bd-sec-h{text-align:center}
.bd-sec-h p{max-width:720px;margin-left:auto;margin-right:auto}
.bd-rong{text-align:center}
.bd-bc b{min-height:3em}          /* 4 tieu de bao chi bang nhau, khong so le */
.bd-cs2 p{min-height:5.5em}
.bd-the-nho span{min-height:3.4em}

/* ---------- 3. HIEN DAN: cho chu dai muot hon mot chut ---------- */
.bd-noidung > .bd-hien-dan{transform:translateY(18px)}
.bd-cm-to.bd-hien-dan,.bd-cm-nho.bd-hien-dan{transform:translateY(20px)}

/* ============================================================
   BON KHOI GIA TRI (cong nghe Duc / chuan Chau Au / kiem dinh / y khoa)
   Anh va chu doi ben nhau moi khoi - giong trang goc babyro.eu.
   ============================================================ */
.bd-gtri .bd-gt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  margin-top: 46px;
}
.bd-gtri .bd-gt:first-of-type { margin-top: 34px; }
.bd-gt-doi .bd-gt-anh { order: 2; }

.bd-gt-anh {
  border-radius: 20px;
  overflow: hidden;
  background: var(--bd-nen-phu);
  /* Truoc ep khung 4:3 + object-fit cover -> anh doc (em be, ghe lab) bi
     chat ngang dau/chan (khach bat 13/08). De anh theo chieu tu nhien. */
}
.bd-gt-anh img { width: 100%; height: auto; display: block; }

.bd-gt-nhan {
  display: inline-block;
  font-family: var(--bd-font-head), system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  color: var(--bd-nhan-cam);
  background: rgba(255, 156, 0, .1);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 12px;
}
.bd-gt-chu h3 {
  font-size: clamp(21px, 2.4vw, 29px);
  margin: 0 0 12px;
  color: var(--bd-chinh);
}
.bd-gt-chu p { color: var(--bd-chu-nhat); line-height: 1.8; margin: 0; }

.bd-gt-y { margin: 16px 0 0; padding-left: 0; list-style: none; counter-reset: gt; }
.bd-gt-y li {
  counter-increment: gt;
  position: relative;
  padding-left: 38px;
  margin-bottom: 9px;
  color: var(--bd-chu);
  font-weight: 600;
}
.bd-gt-y li::before {
  content: counter(gt);
  position: absolute;
  left: 0; top: -1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bd-chinh);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

@media (max-width: 900px) {
  .bd-gtri .bd-gt { grid-template-columns: 1fr; gap: 22px; }
  .bd-gt-doi .bd-gt-anh { order: 0; }
}

/* ============================================================
   O CHO SAN PHAM - hien khi chua nap du lieu san pham that.
   ============================================================ */
.bd-cho-sp {
  border: 2px dashed rgba(54, 78, 162, .28);
  border-radius: 20px;
  background: var(--bd-nen-phu);
  padding: 52px 28px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.bd-cho-sp .bd-cho-ico { color: var(--bd-chinh); opacity: .55 }
.bd-cho-sp .bd-cho-ico svg { width: 46px; height: 46px }
.bd-cho-sp b { font-family: var(--bd-font-head), system-ui, sans-serif; font-size: 19px; color: var(--bd-chinh) }
.bd-cho-sp span { color: var(--bd-chu-nhat); max-width: 560px; line-height: 1.7 }

/* ============================================================
   MENU THA XUONG DON GIAN (dung cho nhom "Bao hanh")
   Khac mega menu o cho: chi mot cot link, khong keo anh san pham.
   ============================================================ */
.bd-thangan-boc { position: relative; display: inline-block; }
.bd-thangan-mo i { font-size: 11px; margin-left: 3px; }
.bd-thangan {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 268px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(31, 42, 68, .16);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.bd-thangan-boc:hover .bd-thangan,
.bd-thangan-boc:focus-within .bd-thangan {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bd-thangan a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--bd-chu);
  white-space: nowrap;
}
.bd-thangan a:hover { background: var(--bd-nen-phu); color: var(--bd-chinh); }

/* tren dien thoai menu xo doc - bo tha xuong, hien thang ra */
@media (max-width: 980px) {
  .bd-thangan-boc { display: block; }
  .bd-thangan {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .bd-thangan a { white-space: normal; }
}

/* ===== Khoi ban do: 2 poster he thong khach thiet ke san (kho doc 1080x1920).
   Poster tu mang du danh sach tinh nen chi can bay canh nhau, khong ve lai. */
.bd-sec-mota { margin: 10px auto 0; max-width: 660px; text-align: center; color: var(--bd-chu-nhat, #5a6a7a); }
.bd-bd-poster { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 920px; margin: 0 auto; }
.bd-bd-poster figure { margin: 0; }
.bd-bd-poster img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 14px 36px rgba(15, 40, 80, .14); }
.bd-bd-poster figcaption { text-align: center; margin-top: 12px; font-weight: 700; color: var(--bd-chinh); }
@media (max-width: 760px) { .bd-bd-poster { grid-template-columns: 1fr; max-width: 460px; } }

/* ===== SUA CHU TOI TREN NEN TOI (khach bat 13/08): kicker khoi chao mung
   truoc la trang mo 90% -> nhin thanh xam chim tren nen xanh dam.
   Doi sang cam nhan, dong bo voi kicker trong hai the ben duoi. */
.bd-cm-nho { color: var(--bd-nhan-cam); opacity: 1; }

/* ===== ICON DIA DIEM LECH TRONG O (khach bat 13/08): hieu ung bay vao gan
   transform len chinh cai span icon lam no xo lech luc chua chay xong.
   Ep can giua moi truong hop + mien transform cho icon. */
.bd-ch-ico { display: grid !important; place-items: center !important; transform: none !important; }
.bd-ch-ico svg { display: block; margin: auto; }

/* ===== TRANG SAN PHAM: gia noi bat + hang mua hang can giua (khach y/c 13/08) */
.single-product div.product .summary .price { font-size: 38px; font-weight: 800; margin: 10px 0 4px; }
.single-product div.product .summary .price .amount { color: var(--bd-nhan-cam); }
.single-product div.product .summary .woocommerce-variation-price .price { font-size: 32px; }
/* dong ton kho thanh nhan xanh gon */
.single-product .stock.in-stock {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e8f8ee; color: #1c7c3f; font-weight: 700;
  padding: 7px 16px; border-radius: 99px; font-size: 13.5px;
}
/* hang so luong + nut them gio: cung chieu cao, can giua doc */
.single-product .summary form.cart:not(.variations_form),
.single-product .summary .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; gap: 14px; margin: 20px 0 10px;
}
.single-product .summary form.cart .quantity { margin: 0; float: none; }
.single-product .summary form.cart .qty {
  height: 54px; width: 78px; text-align: center; font-size: 16px; font-weight: 700;
  border: 1.5px solid #dbe6f7; border-radius: 14px; background: #fff;
}
.single-product .summary .single_add_to_cart_button {
  height: 54px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 38px; border-radius: 99px; font-size: 16.5px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(54, 78, 162, .25);
}
/* chon mau (san pham bien the) cho ra hon */
.single-product table.variations { margin-bottom: 4px; }
.single-product table.variations th.label { padding-right: 14px; font-weight: 700; }
.single-product table.variations select {
  padding: 11px 40px 11px 18px; border-radius: 12px; border: 1.5px solid #dbe6f7;
  font-size: 15px; background-color: #fff;
}
.single-product .reset_variations { font-size: 12.5px; color: var(--bd-chu-nhat); }

/* ===== HERO + BANNER DOI dung anh AI-gen tu anh san pham that (13/08).
   Anh da chua san khoang trong ben trai -> chu do vao do.
   Tren man hinh hep thi bo anh nen (chu se tran vao vung san pham). */
.bd-slide.co-anh {
  background-size: cover; background-position: right center;
  border-radius: 26px; padding: 56px 54px; min-height: 470px;
  box-shadow: 0 20px 50px rgba(15, 40, 84, .25);
}
.bd-slide.co-anh .bd-hero-in { max-width: 52%; }
.bd-bn.co-anh {
  background-size: cover; background-position: right center;
}
.bd-bn.co-anh b, .bd-bn.co-anh > span:not(.bd-tim) { max-width: 58%; }
@media (max-width: 860px) {
  /* 23/08: DA BO "background-image: none !important".
     Dong do tat anh nen tren mobile (vong 13/08) roi hien anh thanh mot the
     bo goc rieng -> chinh la cai "dong khung" Sep bat. Gio anh nen chay lai
     tran het be ngang, chu dat len tren anh; luat moi o cuoi file
     (muc "HERO MOBILE: ANH FULL"). Anh dat inline trong front-page.php nen
     chi can KHONG chan no nua la tu hien. */
  .bd-slide.co-anh { border-radius: 0; padding: 0; min-height: 0; box-shadow: none; }
  .bd-slide.co-anh .bd-hero-in { max-width: none; }
  /* banner doi tren mobile: GIU anh nen (khach bat 15/08 "mobile chua co hinh"),
     chu doc duoc nho lop phu navy o vong 15/08 cuoi file */
  .bd-bn.co-anh b, .bd-bn.co-anh > span:not(.bd-tim) { max-width: none; }
}

/* ===== VONG CHINH 13/08 (dot 2) ============================== */

/* 1. HERO FULL KHONG DONG KHUNG: banner keo tran het chieu ngang man hinh,
   chu van thang hang voi luoi noi dung 1200px */
.bd-hero:has(.bd-slide.co-anh) { padding: 0 !important; }
.bd-slide.co-anh {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border-radius: 0; box-shadow: none;
  padding: 78px max(24px, calc(50vw - 576px)) calc(var(--bd-cheo) + 70px);
  min-height: 580px;
}

/* 2. THE CHUONG TRINH / BAO HANH VANG: chu to hon mot chut, the cao hon
   de anh hanh dong (cover) tho ra */
.bd-cm-the { min-height: 360px; display: flex; align-items: center; }
.bd-cm-noi { padding: 40px 36px; max-width: 58%; }
.bd-cm-k { font-size: 14.5px; }
.bd-cm-noi b { font: 800 clamp(27px, 2.9vw, 38px)/1.15 var(--bd-font-head); }
.bd-cm-noi li { font-size: 15.5px; line-height: 1.45; }
.bd-cm-nut { font-size: 16px; padding: 13px 32px; }

/* dai minh hoa to duoi 2 the */
.bd-cm-deco { display: block; width: 100%; margin: 46px auto 0; border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .25); }

/* 3. GALLERY SAN PHAM: anh nen trang, khong ep width/display de khoi pha
   flexslider (lan dau ep !important lam gallery trang tron - da go).
   Viec can giua xu tan goc bang cach chuan hoa anh vuong khi nhap. */
.single-product .woocommerce-product-gallery__image { background: #fff; }
.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; }

@media (max-width: 860px) {
  .bd-slide.co-anh { margin: 0; }
  .bd-cm-the { min-height: 0; display: block; }
  .bd-cm-noi { max-width: none; }
}

/* ===== VONG CHINH 13/08 (dot 3) ============================== */

/* 1. HERO KHONG CAT VAO SAN PHAM: slide giu dung ti le anh goc 2:1
   -> background cover khop khit, khong bi xen doc ngang o man hinh rong */
.bd-slide.co-anh {
  aspect-ratio: 2 / 1;
  min-height: 0;
  max-height: none;
  padding-top: 0; padding-bottom: var(--bd-cheo);
  align-items: center;
}

/* 2. TRANH LINE-ART lam NEN section chao mung (thay vi anh roi to ben duoi),
   section tra ve kich thuoc cu. Phu mot lop navy dam dan ve phia tren de
   chu va 2 the van noi ro tren nen tranh. */
.bd-chaomung {
  background:
    linear-gradient(180deg, var(--bd-chinh) 0%, rgba(44, 63, 131, .92) 45%, rgba(44, 63, 131, .55) 100%),
    url('img/khoi/cm_deco.jpg') center bottom / cover no-repeat,
    var(--bd-chinh);
}
.bd-cm-deco { display: none; }

/* 3. HAI THE CHUONG TRINH: neo anh ve mep PHAI - ben trai anh chi la nen
   navy tron nen cat bot khong mat gi, con ghe thi thay TRON VEN */
.bd-cm-the > img { object-fit: cover; object-position: right center; }

/* 4. TRANG SAN PHAM 3 COT kieu trang mau khach gui:
   gallery | thong tin (giua) | cot uu diem chinh sach */
@media (min-width: 981px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 40fr) minmax(0, 24fr);
    gap: 40px;
    align-items: start;
  }
  .single-product div.product .images  { width: 100% !important; float: none !important; grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
  .single-product div.product .summary { width: 100% !important; float: none !important; grid-column: 2; grid-row: 1; margin-bottom: 0 !important; }
  .bd-sp-cs { grid-column: 3; grid-row: 1; }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .up-sells,
  .single-product div.product > .onsale { grid-column: 1 / -1; }
}
.bd-sp-cs {
  border: 1.5px solid #e8f1f8; border-radius: 20px; padding: 24px 20px;
  background: #fff;
}
.bd-sp-cs h3 {
  margin: 0 0 18px; text-align: center;
  font: 800 16.5px/1.35 var(--bd-font-head); color: var(--bd-chinh);
  text-transform: uppercase; letter-spacing: .02em;
}
.bd-sp-cs-o {
  display: flex; gap: 13px; align-items: center;
  border-radius: 15px; padding: 14px; margin-bottom: 11px;
}
.bd-sp-cs-o:last-child { margin-bottom: 0; }
.bd-sp-cs-o:nth-child(2) { background: #fff7e4; }
.bd-sp-cs-o:nth-child(3) { background: #e9f2ff; }
.bd-sp-cs-o:nth-child(4) { background: #e6f8f2; }
.bd-sp-cs-o:nth-child(5) { background: #fdeef3; }
.bd-sp-cs-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--bd-chinh); display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(54, 78, 162, .12);
}
.bd-sp-cs-ico svg { width: 22px; height: 22px; }
.bd-sp-cs-o b { display: block; font: 700 14px/1.3 var(--bd-font-head); color: var(--bd-chu); }
.bd-sp-cs-o span { font-size: 12.5px; color: var(--bd-chu-nhat); line-height: 1.4; }
/* nut goi tu van duoi nut them gio */
.bd-sp-goi {
  display: block; text-align: center; margin-top: 14px; padding: 13px 20px;
  border: 1.5px solid var(--bd-chinh); border-radius: 99px;
  font: 800 15px/1 var(--bd-font-head); color: var(--bd-chinh);
}
.bd-sp-goi:hover { background: var(--bd-chinh); color: #fff; }
@media (max-width: 860px) {
  /* mobile da bo anh nen hero -> bo luon ti le 2:1 keo khoi rong ra */
  .bd-slide.co-anh { aspect-ratio: auto; padding-top: 46px; padding-bottom: 54px; }
}

/* ===== VONG CHINH 13/08 (dot 4) ============================== */

/* Trang san pham "don trai": khung Storefront goc chi 1063px nen tren man
   hinh rong nhin lech lac. Noi khung rieng cho trang san pham, van can giua. */
.single-product .col-full { max-width: 1360px; }

/* The chuong trinh dung anh NEN SANG -> chu trong the chuyen sang mau dam */
.bd-cm-sang .bd-cm-k { color: var(--bd-nhan-cam); }
.bd-cm-sang .bd-cm-noi b { color: var(--bd-chinh); }
.bd-cm-sang .bd-cm-noi li { color: var(--bd-chu); }
.bd-cm-sang .bd-cm-nut { background: var(--bd-chinh); color: #fff; }

/* The "sang": doi ket cau ANH TREN - CHU DUOI de chu khong bao gio de len
   hinh (cach cu de chu len anh cover, cu keo man hinh la de nhau). */
.bd-cm-the.bd-cm-sang { background: #f2f8ff; min-height: 0; display: block; }
.bd-cm-the.bd-cm-sang > img { position: static; width: 100%; height: auto; object-fit: unset; }
.bd-cm-sang .bd-cm-noi { max-width: none; padding: 24px 32px 32px; }

/* Storefront mac dinh chua 26% ben phai cho sidebar (khong dung den) ->
   trang san pham nhin nhu bi don het sang trai. Cho noi dung an het khung. */
.single-product .content-area { width: 100% !important; float: none !important; margin-right: 0 !important; }

/* SUA DUT DIEM trang san pham lech (13/08): Storefront con mot lop boc
   giu max-width 66.5em va day noi dung lech ve mot ben. De het ca cum
   ve giua voi do uu tien cao nhat. */
body.single-product .site-content .col-full,
body.single-product .content-area,
body.single-product .site-main {
  max-width: 1360px !important;
  width: auto !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero anh NEN SANG (canh that trong xe): chu chuyen mau dam cho doc ro */
.bd-slide-sang h1 { color: var(--bd-chinh); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.bd-slide-sang p { color: var(--bd-chu); }
.bd-slide-sang .bd-kicker { background: rgba(54, 78, 162, .08); border-color: var(--bd-chinh); color: var(--bd-chinh); }
.bd-slide-sang .bd-btn-2 { background: #fff; border-color: var(--bd-chinh); color: var(--bd-chinh) !important; }

/* Section dang ky dai ly: anh hop tac lam nen full, form ben trai */
.bd-dkdl-nen {
  background-size: cover; background-position: right center;
  padding: 84px 0; min-height: 520px; display: flex; align-items: center;
}
.bd-dkdl-nen .bd-wrap { width: 100%; }
.bd-dkdl-nen .bd-dk-grid { grid-template-columns: 1fr; }
.bd-dkdl-nen .bd-dk-chu { max-width: 560px; }
@media (max-width: 860px) {
  /* man hep: bo anh nen de form khong de len hinh */
  .bd-dkdl-nen { background-image: none !important; padding: 54px 0; min-height: 0; }
}

/* ===== VONG CHINH 15/08 ============================== */

/* 1. THE CHUONG TRINH / BAO HANH: tieu de DE LEN khoang trong ben TRAI cua anh
   (anh gen da chua san vung sang ben trai), phan tick + nut van nam ben duoi.
   Chu CAN GIUA THEO CHIEU DOC cho can voi ghe ben phai (khach y/c 15/08 -
   truoc day ghim sat mep tren nen nhin lech, dinh dau khung). */
.bd-cm-hinh { position: relative; display: block; }
.bd-cm-hinh img { display: block; width: 100%; height: auto; }
.bd-cm-tren {
  position: absolute; left: 30px; right: 42%; top: 50%;
  transform: translateY(-50%); text-align: left;
}
.bd-cm-tren b {
  display: block; margin-top: 7px;
  font: 800 clamp(19px, 1.9vw, 30px)/1.16 var(--bd-font-head);
  color: var(--bd-chinh);
}
.bd-cm-sang .bd-cm-noi { padding: 20px 32px 30px; }

/* 2. TRANG SAN PHAM: dong thong so thanh DAY NHAN co ten */
.bd-chip-day { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bd-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  background: var(--bd-nen-phu); border: 1.5px solid #e3edf9;
  border-radius: 13px; padding: 8px 14px;
}
.bd-chip i {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--bd-chu-nhat);
}
.bd-chip b { font: 700 13.5px/1.25 var(--bd-font-head); color: var(--bd-chinh); }

/* 3. CHON MAU BANG O MAU: select goc van con (JS bien the can no) nhung an di */
.bd-select-an { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bd-swatch-day { display: inline-flex; gap: 9px; flex-wrap: wrap; vertical-align: middle; }
.bd-swatch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 15px 7px 8px; border-radius: 99px;
  border: 1.6px solid #dbe6f7; background: #fff;
  font: 600 13.5px/1.3 var(--bd-font-body); color: var(--bd-chu);
  transition: border-color .18s, background .18s;
}
.bd-swatch i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}
.bd-swatch:hover { border-color: var(--bd-phu); }
.bd-swatch.chon {
  border-color: var(--bd-chinh); background: var(--bd-nen-nhat);
  color: var(--bd-chinh); font-weight: 800;
  box-shadow: 0 0 0 1px var(--bd-chinh) inset;
}

/* 4. MOBILE CO HINH: hero hien anh thanh khoi rieng tren chu;
   banner doi giu anh nen + lop phu navy cho chu trang doc ro */
.bd-slide-anh { display: none; }
@media (max-width: 860px) {
  .bd-slide.co-anh { flex-direction: column; align-items: stretch; gap: 16px;
    padding-bottom: calc(var(--bd-cheo) + 40px); }
  .bd-slide-anh { display: block; width: 100%; height: auto; border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 40, 84, .25); }
  /* nen anh da bo -> slide "sang" tra chu ve mau trang cho noi tren nen xanh */
  .bd-slide-sang h1 { color: #fff; text-shadow: none; }
  .bd-slide-sang p { color: rgba(255, 255, 255, .94); }
  .bd-slide-sang .bd-kicker { background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35); color: #fff; }
  .bd-slide-sang .bd-btn-2 { background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6); color: #fff !important; }
  .bd-bn.co-anh::before { content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(24, 38, 88, .88) 30%, rgba(24, 38, 88, .45)); }
}

/* 5. MOBILE GON GANG (khach bat 15/08: section to, luot lau):
   rut khoang trang + chu tieu de nho lai, noi dung giu nguyen */
@media (max-width: 640px) {
  .bd-sec { padding: 30px 0; }
  .bd-sec-h { margin-bottom: 20px; }
  .bd-sec-h h2 { font-size: 23px; }
  .bd-chaomung { padding-top: calc(30px + var(--bd-cheo)); padding-bottom: 42px; }
  .bd-cm-to { margin-bottom: 22px; }
  .bd-cm-grid { gap: 16px; }
  .bd-cm-tren { left: 16px; top: 12px; right: 40%; }
  .bd-cm-sang .bd-cm-noi { padding: 14px 18px 22px; }
  .bd-cm-noi li { font-size: 14px; }
  .bd-cm-noi ul { margin-bottom: 14px; gap: 7px; }
  .bd-gtri .bd-gt { margin-top: 22px; gap: 14px; }
  .bd-gtri .bd-gt:first-of-type { margin-top: 16px; }
  .bd-vd-grid { gap: 20px; }
  .bd-dn-grid, .bd-dk-grid { gap: 20px; }
  .bd-conso { padding: 26px 0; }
  .bd-bd-poster { gap: 18px; }
  .bd-dkdl-nen { padding: 40px 0; }
  .bd-dangky { padding: 22px; }
  .bd-footer { padding: 32px 0 0; margin-top: 24px; }
  .bd-ft-grid { gap: 22px; padding-bottom: 22px; }
  /* chon theo do tuoi: 2 cot cho ngan trang (1 cot phai luot 4 man) */
  .bd-tuoi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bd-tuoi { padding: 18px 12px; }
  .bd-tuoi-ico { width: 50px; height: 50px; margin-bottom: 10px; }
  .bd-tuoi-ico svg { width: 25px; height: 25px; }
  .bd-tuoi b { font-size: 15px; }
}

/* ===== VONG CHINH 15/08 (dot 2) ============================== */

/* 1. SECTION DAI LY: anh that phu FULL, form nam trong MOT KHOI KINH
   (truoc phai chua mang trang trong anh - khach bat 15/08) */
/* neo len phia tren: anh 16:9 phu vao dai 520px thi neo giua se cat mat
   hai nguoi, chi con thay bat tay (bat bang anh chup) */
.bd-dkdl-nen { background-position: center 18%; }
.bd-dk-hop {
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px; padding: 34px 34px 36px;
  box-shadow: 0 22px 54px rgba(15, 40, 84, .22);
}
.bd-dk-hop h2 { margin-top: 0; }
.bd-dk-hop p { color: var(--bd-chu); }
.bd-dkdl-nen .bd-dk-hop { max-width: 520px; }

/* 2. BON KHOI GIA TRI: icon khop headline dat ngay truoc tieu de */
.bd-gt-h { display: flex; align-items: center; gap: 14px; }
.bd-gt-ico {
  flex: none; width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--bd-nen-nhat); color: var(--bd-chinh);
  box-shadow: 0 6px 16px rgba(54, 78, 162, .14);
}
.bd-gt-ico svg { width: 27px; height: 27px; }
/* co Duc la khoi mau dac -> nen trang, bo dem cho la co noi vien */
.bd-gt-ico-co { background: #fff; border: 1.5px solid #e8f1f8; }
.bd-gt-ico-co svg { width: 30px; height: 30px; }

/* 3. THE Y KIEN CHUYEN GIA co ANH that (lay tu babyro.eu) */
.bd-cn-anh { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* CHIEU CAO CO DINH, khong dung aspect-ratio: 3 anh goc khac ti le (4:3, 16:9,
   vuong) va trong flex column thi aspect-ratio bi chieu cao anh de bep ->
   3 the cao thap so le (da nhin anh chup moi bat duoc). */
.bd-cn-hinh { flex: none; display: block; height: 210px; background: var(--bd-nen-phu); }
.bd-cn-hinh img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.bd-cn-anh .bd-sao { margin: 20px 24px 10px; }
.bd-cn-anh p { margin: 0 24px 16px; }
.bd-cn-anh .bd-cn-ai { margin: auto 24px 24px; }

@media (max-width: 860px) {
  /* man hep: chu ra khoi anh cho de doc. column-reverse de tieu de van nam
     TREN anh dung thu tu doc, du trong HTML no viet sau the <img>. */
  .bd-cm-hinh { display: flex; flex-direction: column-reverse; }
  .bd-cm-tren { position: static; transform: none; right: auto; left: auto;
    padding: 20px 22px 12px; }
  .bd-dk-hop { padding: 22px 20px 24px; border-radius: 18px; }
}

/* ===== VONG CHINH 15/08 (dot 3) ============================== */

/* 1. BON KHOI GIA TRI: icon TO thanh huy hieu, kicker nam canh icon,
   tieu de xuong hang duoi va to han (khach y/c - theo anh mau) */
.bd-gt-dau { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.bd-gt-dau .bd-gt-nhan { margin-bottom: 0; font-size: 13.5px; }
.bd-gt-ico {
  flex: none; width: 76px; height: 76px; border-radius: 22px;
  display: grid; place-items: center;
  background: var(--bd-nen-nhat); color: var(--bd-chinh);
  box-shadow: 0 10px 24px rgba(54, 78, 162, .16);
}
.bd-gt-ico svg { width: 40px; height: 40px; }
/* co Duc: huy hieu TRON, mau tran vien (icon coduc da ve tran khung 24x24) */
.bd-gt-ico-co { border-radius: 50%; overflow: hidden; background: #fff; padding: 0; }
.bd-gt-ico-co svg { width: 100%; height: 100%; }
.bd-gt-chu h3 { font-size: clamp(25px, 3vw, 37px); line-height: 1.18; margin: 0 0 14px; }
/* tieu de cac khoi khac cung nhinh len mot bac */
.bd-sec-h h2 { font-size: clamp(28px, 3.8vw, 41px); }
.bd-sp-head h2 { font-size: clamp(24px, 2.6vw, 31px); }

/* 2. DAY SAN PHAM CUON NGANG + HAI MUI TEN (kieu trang goc babyro.eu):
   anh to, deu nhau, khung vuong nen trang */
.bd-sp-cuon { position: relative; }
.bd-sp-cuon ul.products {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 1fr);
  grid-template-columns: none !important;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  gap: 20px; padding: 6px 2px 14px; scrollbar-width: none;
}
.bd-sp-cuon ul.products::-webkit-scrollbar { display: none; }
.bd-sp-cuon ul.products li.product { scroll-snap-align: start; padding: 16px 16px 18px; }
/* KHUNG ANH VUONG: anh goc cao thap khac nhau, ep khung vuong + contain thi
   ca day nhin bang nhau (khong cat mat ghe) */
.bd-sp-cuon ul.products li.product img {
  aspect-ratio: 1 / 1; width: 100% !important; height: auto;
  object-fit: contain; background: #fff; margin-bottom: 14px !important;
}
.bd-sp-cuon ul.products li.product .woocommerce-loop-product__title {
  text-align: center; font-size: 15.5px !important; font-weight: 700 !important;
  color: var(--bd-chinh) !important; text-transform: uppercase; min-height: 0;
  letter-spacing: .01em;
}
.bd-loop-ts {
  display: block; text-align: center; font-size: 13px; color: var(--bd-chu-nhat);
  margin: 5px 0 2px;
}
.bd-sp-cuon ul.products li.product .price { text-align: center; }
/* hai mui ten */
.bd-mui-ten {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid #e3edf9; background: #fff; color: var(--bd-chinh);
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(54, 78, 162, .16);
  transition: background .18s, color .18s, opacity .2s;
}
.bd-mui-ten svg { width: 21px; height: 21px; }
.bd-mui-ten:hover { background: var(--bd-chinh); color: #fff; }
.bd-mui-trai { left: -14px; }
.bd-mui-phai { right: -14px; }
.bd-mui-ten[hidden] { display: none; }

/* 3. TRANG CUA HANG / DANH MUC: Storefront chua 26% ben phai cho sidebar
   khong dung den -> hang hoa don het sang trai, thua mot mang trong ben phai.
   Cho ca cum ve giua giong trang san pham (khach bat 15/08). */
body.woocommerce-page:not(.single-product) .site-content .col-full,
body.woocommerce-page:not(.single-product) .content-area,
body.woocommerce-page:not(.single-product) .site-main,
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area {
  max-width: 1240px !important; width: auto !important; float: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.woocommerce-page .woocommerce-products-header,
body.woocommerce-page .woocommerce-result-count,
body.woocommerce-page .woocommerce-ordering { position: relative; z-index: 2; }
.woocommerce-products-header__title, .woocommerce-products-header { text-align: center; }
.woocommerce-result-count { color: var(--bd-chu-nhat); }
.woocommerce-ordering select {
  padding: 10px 16px; border-radius: 12px; border: 1.5px solid #dbe6f7; background: #fff;
}

@media (max-width: 640px) {
  .bd-gt-ico { width: 60px; height: 60px; border-radius: 18px; }
  .bd-gt-ico svg { width: 32px; height: 32px; }
  .bd-gt-dau { gap: 12px; margin-bottom: 10px; }
  .bd-mui-trai { left: -6px; }
  .bd-mui-phai { right: -6px; }
  .bd-sp-cuon ul.products { grid-auto-columns: minmax(200px, 1fr); gap: 12px; }
}

/* trang cua hang: khung gon giua + luoi 4 cot cho anh to */
.bd-cuahang { padding-bottom: 46px; }
.bd-cuahang ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: 22px; }
.bd-cuahang ul.products li.product { padding: 16px 16px 18px; }
.bd-cuahang ul.products li.product img { aspect-ratio: 1/1; object-fit: contain; background: #fff; }
.bd-cuahang ul.products li.product .woocommerce-loop-product__title {
  text-align: center; font-size: 15.5px !important; font-weight: 700 !important;
  color: var(--bd-chinh) !important; text-transform: uppercase; min-height: 0;
}
.bd-cuahang ul.products li.product .price { text-align: center; }
.bd-trong { padding: 46px 0; text-align: center; color: var(--bd-chu-nhat); }
@media (max-width: 1024px) { .bd-cuahang ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { .bd-cuahang ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } }

/* the san pham: ten 2 dong + thong so 1 dong co san cho -> gia va nut
   thang hang tuyet doi giua cac the (ten dai ngan khac nhau) */
.bd-sp-cuon ul.products li.product .woocommerce-loop-product__title,
.bd-cuahang ul.products li.product .woocommerce-loop-product__title { min-height: 2.9em; }
.bd-loop-ts { min-height: 1.3em; }

/* ---------- TRANG LIEN HE (dung lai 15/08) ---------- */
.bd-lh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bd-lh {
  display: block; background: #fff; border: 1.5px solid #e8f1f8; border-radius: 20px;
  padding: 24px 22px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.bd-lh:hover { transform: translateY(-4px); border-color: var(--bd-phu); box-shadow: 0 14px 30px rgba(54,78,162,.1); }
.bd-lh-ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--bd-nen-nhat); color: var(--bd-chinh); margin-bottom: 14px;
}
.bd-lh-ico svg { width: 26px; height: 26px; }
.bd-lh b { display: block; font: 700 15px/1.3 var(--bd-font-head); color: var(--bd-chu); margin-bottom: 6px; }
.bd-lh em {
  display: block; font-style: normal; font: 800 21px/1.3 var(--bd-font-head);
  color: var(--bd-nhan-cam); margin-bottom: 8px; word-break: break-word;
}
.bd-lh em.bd-lh-nho { font-size: 14.5px; font-weight: 600; color: var(--bd-chinh); line-height: 1.5; }
.bd-lh > span:last-child { display: block; font-size: 13.5px; color: var(--bd-chu-nhat); line-height: 1.5; }

.bd-lh2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: start; }
.bd-lh-form { background: #fff; border-radius: 22px; padding: 30px 30px 34px; box-shadow: 0 14px 36px rgba(54,78,162,.09); }
.bd-lh-form h2, .bd-lh-showroom h2 { font-size: 25px; margin: 0 0 8px; }
.bd-lh-form p { color: var(--bd-chu-nhat); margin: 0 0 18px; }
.bd-lh-form .bd-dk-form { max-width: none; }
.bd-lh-form textarea {
  width: 100%; padding: 14px 20px; border-radius: 18px; border: 1.5px solid #dbe6f7;
  font: 500 15px/1.5 var(--bd-font-body); background: #fff; resize: vertical;
}
.bd-lh-form textarea:focus { outline: none; border-color: var(--bd-chinh); }
.bd-lh-showroom h2 { margin-bottom: 18px; }
.bd-ch-2 { grid-template-columns: repeat(2, 1fr); }

/* danh ba dai ly */
.bd-tinh-chip { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.bd-tinh-chip button {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 999px; padding: 8px 17px;
  font: 600 13.5px/1 var(--bd-font-body); color: var(--bd-chu-nhat); cursor: pointer; transition: all .18s;
}
.bd-tinh-chip button:hover { border-color: var(--bd-phu); color: var(--bd-chinh); }
.bd-tinh-chip button.chon { background: var(--bd-chinh); border-color: var(--bd-chinh); color: #fff; }
.bd-dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bd-dl {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.bd-dl[hidden] { display: none; }
.bd-dl-tinh {
  align-self: flex-start; font: 700 11px/1 var(--bd-font-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--bd-phu);
  background: var(--bd-nen-nhat); border-radius: 999px; padding: 6px 12px;
}
.bd-dl b { font: 700 15.5px/1.35 var(--bd-font-head); color: var(--bd-chinh); }
.bd-dl-dc { font-size: 13.5px; color: var(--bd-chu-nhat); line-height: 1.55; flex: 1; }
.bd-dl-dt {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font: 700 14px/1 var(--bd-font-head); color: var(--bd-nhan-cam); text-decoration: none;
}
.bd-dl-dt svg { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .bd-lh-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-dl-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-lh2 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .bd-lh-grid, .bd-dl-grid, .bd-ch-2 { grid-template-columns: 1fr; }
  .bd-lh-form { padding: 22px 20px 26px; }
}

/* ---------- TRANG NOI DUNG: muc luc / buoc / hoi dap / lien quan (15/08) ---------- */
.bd-muc-luc {
  background: var(--bd-nen-phu); border: 1.5px solid #e3edf9; border-radius: 18px;
  padding: 22px 26px; margin: 0 0 30px;
}
.bd-muc-luc > b {
  display: block; font: 800 12.5px/1 var(--bd-font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bd-phu); margin-bottom: 12px;
}
.bd-muc-luc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: ml;
  columns: 2; column-gap: 34px; }
.bd-muc-luc li { counter-increment: ml; position: relative; padding-left: 30px;
  margin-bottom: 8px; break-inside: avoid; }
.bd-muc-luc li::before {
  content: counter(ml); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  border: 1.5px solid #dbe6f7; color: var(--bd-chinh);
  font: 700 11.5px/1 var(--bd-font-head); display: grid; place-items: center;
}
.bd-muc-luc a { color: var(--bd-chu); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.bd-muc-luc a:hover { color: var(--bd-chinh); text-decoration: underline; }

/* cau dan ngay duoi de muc */
.bd-noidung .bd-cham {
  font: 700 17px/1.5 var(--bd-font-head); color: var(--bd-chinh);
  margin: -6px 0 14px; opacity: .92;
}

/* buoc huong dan */
.bd-buoc { display: flex; align-items: center; gap: 14px; margin: 26px 0 10px; }
.bd-buoc span {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--bd-chinh); color: #fff; display: grid; place-items: center;
  font: 800 16px/1 var(--bd-font-head);
}
.bd-buoc b { font: 700 19px/1.35 var(--bd-font-head); color: var(--bd-chinh); }

/* hoi dap mo/dong */
.bd-faq-nhom { display: grid; gap: 12px; margin: 0 0 26px; }
.bd-faq { background: #fff; border: 1.5px solid #e8f1f8; border-radius: 16px; overflow: hidden; }
.bd-faq summary {
  cursor: pointer; list-style: none; padding: 17px 52px 17px 22px; position: relative;
  font: 700 16px/1.45 var(--bd-font-head); color: var(--bd-chinh);
}
.bd-faq summary::-webkit-details-marker { display: none; }
.bd-faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2.4px solid var(--bd-chinh); border-bottom: 2.4px solid var(--bd-chinh);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.bd-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.bd-faq summary:hover { background: var(--bd-nen-phu); }
.bd-faq > div { padding: 0 22px 18px; }
.bd-faq > div p { margin: 0 0 10px; color: var(--bd-chu-nhat); }
.bd-faq > div p:last-child { margin-bottom: 0; }

/* lien ket lien quan cuoi trang */
.bd-lienquan {
  margin: 40px 0 0; padding: 24px 26px; border-radius: 18px;
  background: var(--bd-nen-phu); border: 1.5px solid #e3edf9;
}
.bd-lienquan > b {
  display: block; font: 800 12.5px/1 var(--bd-font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bd-phu); margin-bottom: 14px;
}
.bd-lienquan > div { display: flex; flex-wrap: wrap; gap: 10px; }
.bd-lienquan a {
  background: #fff; border: 1.5px solid #dbe6f7; border-radius: 999px;
  padding: 9px 18px; font: 600 14px/1 var(--bd-font-body);
  color: var(--bd-chinh); text-decoration: none; transition: all .18s;
}
.bd-lienquan a:hover { background: var(--bd-chinh); color: #fff; border-color: var(--bd-chinh); }

@media (max-width: 700px) { .bd-muc-luc ol { columns: 1; } }

/* ---------- TIN TUC: trang danh sach + trang bai (15/08) ---------- */
.bd-bai-noi {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; text-decoration: none;
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 24px; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.bd-bai-noi:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(54,78,162,.13); }
.bd-bai-noi-anh { display: block; background: var(--bd-nen-nhat); min-height: 300px; }
.bd-bai-noi-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-bai-noi-chu { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 38px 40px; }
.bd-bai-noi-chu em {
  align-self: flex-start; font-style: normal; font: 800 11.5px/1 var(--bd-font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--bd-nhan-cam);
  background: #fff3e0; border-radius: 999px; padding: 7px 14px;
}
.bd-bai-noi-chu b { font: 800 clamp(21px,2.2vw,29px)/1.28 var(--bd-font-head); color: var(--bd-chinh); }
.bd-bai-noi-chu > span { color: var(--bd-chu-nhat); line-height: 1.7; font-size: 15px; }
.bd-bai-noi-chu time { font-size: 13px; color: var(--bd-chu-nhat); font-weight: 600; }
.bd-bv-3 { grid-template-columns: repeat(3, 1fr); }
.bd-bv-body h3 { min-height: 2.8em; }

/* trang bai viet */
.bd-bai-dau h1 { max-width: 900px; }
.bd-bai-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.9); }
.bd-bai-dm { background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.bd-bai { max-width: 820px; }
.bd-bai-anh { margin: 0 0 28px; }
.bd-bai-anh img { width: 100%; height: auto; border-radius: 20px; display: block; }
.bd-bai h2 { scroll-margin-top: 110px; }
.bd-bai-cta {
  margin: 40px 0 0; padding: 28px 30px; border-radius: 20px; color: #fff;
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau));
  display: grid; gap: 8px; justify-items: start;
}
.bd-bai-cta b { font: 800 21px/1.3 var(--bd-font-head); color: #fff; }
.bd-bai-cta span { color: rgba(255,255,255,.92); }
.bd-bai-cta .bd-btn { margin-top: 8px; }
.bd-bai-khac { margin-top: 46px; }

@media (max-width: 980px) {
  .bd-bai-noi { grid-template-columns: 1fr; }
  .bd-bai-noi-anh { min-height: 220px; }
  .bd-bai-noi-chu { padding: 24px 22px 28px; }
  .bd-bv-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .bd-bv-3 { grid-template-columns: 1fr; } }

/* ===== ANH THAT CUA babyro.eu LAM HERO (15/08) =========================
   Anh AI-gen truoc kia co chua san khoang trong ben trai de do chu; anh
   CHUP THAT thi khong - nen phu mot lop navy mo dan tu trai sang de chu
   trang luon doc ro du anh nao. */
.bd-slide.co-anh { position: relative; }
.bd-slide.co-anh::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
      rgba(26, 42, 100, .95) 0%, rgba(26, 42, 100, .88) 34%,
      rgba(26, 42, 100, .45) 58%, rgba(26, 42, 100, .05) 82%, transparent 100%);
}
.bd-slide.co-anh > * { position: relative; z-index: 1; }
@media (max-width: 860px) { .bd-slide.co-anh::before { display: none; } }

/* anh that trong khoi gia tri co anh doc (854x1280) -> khong de no keo khoi
   cao lenh khenh, chan chieu cao va cat deu hai dau */
.bd-gt-anh img { max-height: 540px; object-fit: cover; object-position: center; }

/* ===== VONG CHINH 15/08 (dot 4) ============================== */

/* 1. CHU TOI TREN NEN TOI (khach bat lai lan 2). Nguyen nhan goc: luat
   "p { color: var(--bd-chu) }" o dau file de len moi doan chu, ke ca doan
   nam trong banner NEN XANH DAM -> chu navy tren nen navy.
   Chan dut diem: MOI chu trong cac khoi nen dam deu ep sang mau trang. */
.bd-trang-dau, .bd-trang-dau p, .bd-trang-dau li, .bd-trang-dau span,
.bd-dm-banner, .bd-dm-banner p, .bd-dm-banner span,
.bd-conso, .bd-conso span, .bd-chaomung p, .bd-chaomung li,
.bd-dangky p, .bd-banner p, .bd-bn span, .bd-bai-cta span {
  color: rgba(255, 255, 255, .94);
}
.bd-trang-dau h1, .bd-dm-banner h1, .bd-trang-dau b, .bd-trang-dau a { color: #fff; }
.bd-trang-tom { opacity: 1; }

/* nhan cam tren nen cam nhat: doi sang cam DAM cho du tuong phan */
.bd-bai-noi-chu em { color: #a35c00; }

/* 2. KHONG DE CHU MO COI ROT HANG MOT MINH.
   text-wrap:balance chia deu cac dong tieu de; pretty cam dong cuoi cua
   doan van chi con mot chu. */
h1, h2, h3, h4, .bd-cm-noi b, .bd-cm-tren b, .bd-bai-noi-chu b,
.bd-sec-h h2, .bd-gt-chu h3, .bd-faq summary, .bd-dl b, .bd-lh b {
  text-wrap: balance;
}
p, li, .bd-trang-tom, .bd-sec-h p, .bd-noidung p, .bd-bv-body p, .bd-dl-dc {
  text-wrap: pretty;
}
/* tieu de banner: bo rong vua phai de khong bao gio con mot chu rot xuong */
.bd-trang-dau h1, .bd-dm-banner h1 { max-width: 20ch; }
.bd-trang-tom, .bd-dm-banner p { max-width: 62ch; }

/* 3. TRANG NOI DUNG (bao hanh / chinh sach) DAY DAN LAI, de doc theo cum
   thay vi mot day chu dan trai (khach bat 15/08) */
.bd-noidung { max-width: 900px; font-size: 15.5px; line-height: 1.72; }
.bd-noidung p { margin: 0 0 12px; }
.bd-noidung h2 {
  margin: 34px 0 12px; padding-left: 16px; position: relative;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3;
}
.bd-noidung h2::before {
  content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--bd-phu), var(--bd-chinh));
}
.bd-noidung h3 { margin: 22px 0 8px; font-size: 17.5px; }
/* danh sach gon hon, gach dau dong nho lai */
.bd-noidung ul { margin: 0 0 14px; }
.bd-noidung li { padding-left: 24px; margin-bottom: 6px; }
.bd-noidung li::before { left: 5px; top: 10px; width: 6px; height: 6px; }
/* danh sach toan muc NGAN -> xep 2 cot cho do dai trang */
.bd-noidung ul.bd-2cot { columns: 2; column-gap: 34px; }
.bd-noidung ul.bd-2cot li { break-inside: avoid; }

/* moi "Dieu N" thanh mot THE rieng: nhin ra tung cum, khong troi noi */
.bd-dieu {
  border: 1.5px solid #e3edf9; border-radius: 18px; padding: 22px 26px 18px;
  margin: 0 0 16px; background: #fff;
}
.bd-dieu > h2 { margin-top: 0; }
.bd-dieu > *:last-child { margin-bottom: 0; }

/* cau dan duoi de muc: bo chu hoa toan bo cho do gao */
.bd-noidung .bd-cham { font-size: 15.5px; text-transform: none; margin: -4px 0 12px; }

/* "Bước 01/02/03" la de muc con trong the Dieu */
.bd-noidung .bd-buoc-td {
  margin: 18px 0 8px; font-size: 16px; color: var(--bd-chinh);
  display: flex; align-items: center; gap: 9px;
}
.bd-noidung .bd-buoc-td::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bd-nhan-cam); flex: none;
}

/* ===== TUONG PHAN CHU (quet toan site 15/08) ==========================
   Mau thuong hieu cam #ff9c00 va xanh nhat #81c5e2 rat dep khi lam NEN /
   mang mau, nhung dem lam MAU CHU tren nen trang thi do tuong phan chi
   ~2.0 (chuan doc duoc la >=4.5). Nen tach rieng hai bien "ban dam" chi
   dung cho CHU - mang mau va nut van giu dung mau thuong hieu goc. */
:root {
  --bd-cam-chu: #b86a00;      /* cam dam - dung cho gia tien, so dien thoai */
  --bd-xanh-chu: #3d8fb5;     /* xanh dam - dung cho cac dong nhan nho */
}
/* gia tien + so dien thoai */
ul.products li.product .price,
.single-product div.product .summary .price .amount,
.bd-ch em, .bd-dl-dt, .bd-lh em, .bd-flash-t,
.wc-block-components-totals-item__value, .wc-block-components-product-price {
  color: var(--bd-cam-chu) !important;
}
/* dong nhan nho mau xanh nhat -> ban dam */
.bd-sec-h .k, .bd-muc-luc > b, .bd-lienquan > b, .bd-dl-tinh, .bd-vd-k {
  color: var(--bd-xanh-chu);
}
/* kicker cam trong the nen sang */
.bd-cm-sang .bd-cm-k, .bd-gt-nhan, .bd-th-the em { color: var(--bd-cam-chu); }
/* nhan tren nen dam van giu cam sang cho noi bat (nen du toi) */
.bd-chaomung .bd-cm-nho, .bd-dn-k i { color: var(--bd-nhan-cam); }
/* nhan tinh thanh: nen xanh nhat -> chu phai la xanh dam thuong hieu */
.bd-dl-tinh { color: var(--bd-chinh); }

/* ===== BA TRANG LAM RIENG: Ve Babyro / Bao hanh 2 nam / Doi ghe (15/08) ===== */
.bd-hep { max-width: 900px; }
.bd-btns-giua { justify-content: center; align-items: center; margin-top: 30px; }

/* hero anh that + lop phu navy */
.bd-gt-hero {
  position: relative; overflow: hidden; color: #fff;
  background-size: cover; background-position: center 32%;
  padding: 84px 0 92px;
}
.bd-gt-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(22, 38, 92, .96) 0%, rgba(22, 38, 92, .88) 40%,
              rgba(22, 38, 92, .5) 66%, rgba(22, 38, 92, .1) 92%, transparent 100%);
}
.bd-gt-hero .bd-wrap { position: relative; z-index: 2; }
.bd-gt-hero-in { max-width: 640px; }
.bd-gt-hero .bd-duongdan { margin-bottom: 16px; }
.bd-gt-hero h1 {
  color: #fff; margin: 14px 0 14px; max-width: 18ch;
  font: 800 clamp(30px, 4.4vw, 50px)/1.14 var(--bd-font-head);
}
.bd-gt-hero p { color: rgba(255, 255, 255, .94); font-size: 16.5px; line-height: 1.7; max-width: 58ch; }
.bd-gt-hero .bd-btns { margin-top: 24px; }
.bd-gt-so { padding: 30px 0; }

/* khoi cau chuyen: anh - chu xen ke */
.bd-gt-hang {
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center;
  margin-bottom: 56px;
}
.bd-gt-hang:last-child { margin-bottom: 0; }
.bd-gt-hang.doi .bd-gt-hang-anh { order: 2; }
.bd-gt-hang-anh { position: relative; border-radius: 24px; overflow: hidden; background: var(--bd-nen-phu); }
.bd-gt-hang-anh img { display: block; width: 100%; height: 100%; max-height: 430px; object-fit: cover; }
.bd-gt-so-lon {
  position: absolute; left: 20px; bottom: 16px;
  font: 800 66px/1 var(--bd-font-head); color: #fff; opacity: .9;
  text-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.bd-gt-hang-chu h2 { font-size: clamp(23px, 2.6vw, 33px); line-height: 1.22; margin: 10px 0 14px; }
.bd-gt-hang-chu p { color: var(--bd-chu-nhat); line-height: 1.85; margin: 0 0 12px; }

/* tam nhin + loi ket */
.bd-gt-tn { background: var(--bd-nen-phu); }
.bd-gt-tn-hop {
  max-width: 860px; margin: 0 auto; text-align: center;
  background: #fff; border-radius: 28px; padding: 44px 46px 46px;
  box-shadow: 0 20px 50px rgba(54, 78, 162, .1);
}
.bd-gt-tn-ico {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--bd-nen-nhat); color: var(--bd-chinh);
}
.bd-gt-tn-ico svg { width: 32px; height: 32px; }
.bd-gt-tn-hop h2 { font-size: clamp(22px, 2.5vw, 31px); margin: 0 0 14px; }
.bd-gt-tn-hop p { color: var(--bd-chu-nhat); line-height: 1.85; margin: 0 0 20px; }
.bd-gt-tn-hop blockquote {
  margin: 0 0 26px; padding: 18px 24px; border-radius: 16px;
  background: var(--bd-nen-phu); border-left: 4px solid var(--bd-nhan-cam);
  font: 700 17px/1.65 var(--bd-font-head); color: var(--bd-chinh); text-align: left;
}
.bd-gt-tn-hop .bd-btns { justify-content: center; }
.bd-gt-tn-hop .bd-btn-2 { background: var(--bd-nen-phu); color: var(--bd-chinh) !important; border-color: var(--bd-chinh); }

/* 3 cam ket bao hanh */
.bd-bh-ck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bd-bh-ck-o {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 20px; padding: 28px 26px 30px;
  transition: transform .2s, box-shadow .2s;
}
.bd-bh-ck-o:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(54, 78, 162, .1); }
.bd-bh-ck-ico {
  width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center;
  background: var(--bd-nen-nhat); color: var(--bd-chinh); margin-bottom: 16px;
}
.bd-bh-ck-ico svg { width: 29px; height: 29px; }
.bd-bh-ck-o b { display: block; font: 700 18px/1.35 var(--bd-font-head); color: var(--bd-chinh); margin-bottom: 8px; }
.bd-bh-ck-o > span:not(.bd-bh-ck-ico) { display: block; color: var(--bd-chu-nhat); line-height: 1.7; font-size: 14.5px; }

/* day buoc (bao hanh 4 buoc / doi ghe 3 buoc) */
.bd-buoc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bd-buoc-3 { grid-template-columns: repeat(3, 1fr); }
.bd-buoc-o {
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 20px; padding: 26px 24px 28px;
  position: relative;
}
.bd-buoc-so {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--bd-chinh); color: #fff; font: 800 18px/1 var(--bd-font-head); margin-bottom: 14px;
}
.bd-buoc-o b { display: block; font: 700 17px/1.35 var(--bd-font-head); color: var(--bd-chinh); margin-bottom: 8px; }
.bd-buoc-o > span:not(.bd-buoc-so) { display: block; color: var(--bd-chu-nhat); line-height: 1.7; font-size: 14.5px; }
.bd-buoc-o ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bd-buoc-o li {
  position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--bd-chu-nhat);
}
.bd-buoc-o li::before {
  content: ''; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--bd-nhan-cam);
}
.bd-ch-3 { grid-template-columns: repeat(3, 1fr); }

/* luu y + dang ky trang doi ghe */
.bd-dg-luuy {
  background: #fff8ec; border: 1.5px solid #ffe3b0; border-left: 5px solid var(--bd-nhan-cam);
  border-radius: 18px; padding: 26px 30px 28px;
}
.bd-dg-luuy > b { display: block; font: 800 19px/1.35 var(--bd-font-head); color: #8a5a00; margin-bottom: 12px; }
.bd-dg-luuy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bd-dg-luuy li { position: relative; padding-left: 26px; color: #6b4b12; line-height: 1.7; }
.bd-dg-luuy li::before {
  content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bd-nhan-cam);
}
.bd-dg-dk {
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau));
  border-radius: 26px; padding: 40px 44px 44px; color: #fff;
}
.bd-dg-dk h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 10px; }
.bd-dg-dk p { color: rgba(255, 255, 255, .94); margin: 0 0 22px; }
.bd-dg-dk p a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.bd-dg-dk .bd-dk-form { max-width: 460px; }

@media (max-width: 980px) {
  .bd-gt-hang { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .bd-gt-hang.doi .bd-gt-hang-anh { order: 0; }
  .bd-bh-ck, .bd-buoc-grid, .bd-buoc-3, .bd-ch-3 { grid-template-columns: 1fr 1fr; }
  .bd-gt-hero { padding: 56px 0 60px; background-position: right center; }
  .bd-gt-hero::before { background: linear-gradient(180deg, rgba(22,38,92,.88), rgba(22,38,92,.96)); }
}
@media (max-width: 640px) {
  .bd-bh-ck, .bd-buoc-grid, .bd-buoc-3, .bd-ch-3 { grid-template-columns: 1fr; }
  .bd-gt-tn-hop { padding: 28px 22px 32px; }
  .bd-dg-dk { padding: 26px 22px 30px; }
  .bd-gt-so-lon { font-size: 46px; }
}

/* ===== VONG CHINH 21/08 ============================================== */

/* 1. BA NUT MUA HANG (mau khach gui): mot nut lien he ca hang, roi hai nut
   Mua ngay / Them vao gio hang chia doi ben duoi. Dung mau thuong hieu
   Babyro chu khong copy mau tim-cam-xanh cua ban mau. */
.bd-sp-daily {
  display: block; text-align: center; margin: 18px 0 12px; padding: 15px 20px;
  border-radius: 99px; color: #fff !important; text-decoration: none;
  font: 800 15.5px/1.25 var(--bd-font-head);
  background: linear-gradient(120deg, var(--bd-chinh), var(--bd-gradient-dau));
  box-shadow: 0 10px 24px rgba(54, 78, 162, .28);
  transition: transform .18s, box-shadow .18s;
}
.bd-sp-daily:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(54, 78, 162, .34); }

/* hang hai nut: Mua ngay (cam) + Them vao gio (xanh) */
.single-product .summary form.cart:not(.variations_form),
.single-product .summary .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
.bd-mua-ngay {
  height: 54px; padding: 0 30px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--bd-nhan-cam); color: #fff;
  font: 800 16.5px/1 var(--bd-font-head);
  box-shadow: 0 10px 24px rgba(255, 156, 0, .32);
  transition: transform .18s, background .18s;
}
.bd-mua-ngay:hover { background: #e08a00; transform: translateY(-2px); }
.single-product .summary .single_add_to_cart_button {
  background: var(--bd-chinh) !important;
}
.single-product .summary .single_add_to_cart_button:hover { background: var(--bd-gradient-dau) !important; }
/* nut goi tu van lui xuong lam nut phu */
.bd-sp-goi { margin-top: 12px; font-size: 14px; padding: 11px 18px; }

/* 2. ICON DO TUOI to va noi hon (khach y/c 21/08) */
.bd-tuoi-ico {
  width: 82px; height: 82px; margin-bottom: 16px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 42%, transparent),
              0 0 0 8px color-mix(in srgb, var(--c) 12%, transparent);
}
.bd-tuoi-ico svg { width: 42px; height: 42px; stroke-width: 1.7; }
.bd-tuoi b { font-size: 19px; }
.bd-tuoi { padding: 30px 18px; }

@media (max-width: 640px) {
  .bd-tuoi-ico { width: 62px; height: 62px; margin-bottom: 10px; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 38%, transparent); }
  .bd-tuoi-ico svg { width: 32px; height: 32px; }
  .bd-tuoi b { font-size: 15px; }
  .bd-mua-ngay { height: 50px; padding: 0 22px; font-size: 15px; }
  .bd-sp-daily { font-size: 14.5px; padding: 13px 16px; }
}

/* thu tu hang nut: [so luong] [Mua ngay] [Them vao gio hang] tren MOT hang.
   Moc woocommerce_before_add_to_cart_button in nut ra TRUOC o so luong nen
   phai sap lai bang order, va cho hai nut co gian de vua mot hang. */
.single-product .summary form.cart .quantity { order: 1; flex: 0 0 auto; }
.single-product .summary form.cart .qty { width: 66px; }
/* flex-basis = 0 (khong phai 130/150px): tong be rong "mong muon" bang 0 nen
   hang khong bao gio bi day xuong dong; min-width mac dinh (min-content) van
   giu cho chu khong bi bop. Man 1280 truoc day bi vo doi dong vi co so 130+150
   cong o so luong da vuot be ngang cot. */
.bd-mua-ngay { order: 2; flex: 1 1 0; padding: 0 14px; }
.single-product .summary .single_add_to_cart_button { order: 3; flex: 1 1 0; padding: 0 16px; }

/* san pham chon mau: khi chua chon mau, WooCommerce khoa nut "Them vao gio".
   Nut "Mua ngay" phai khoa theo, khong thi bam vao chi bao loi kho hieu. */
.woocommerce-variation-add-to-cart:has(.single_add_to_cart_button.disabled) .bd-mua-ngay {
  opacity: .45; pointer-events: none; box-shadow: none;
}

/* ===== VONG 11 (21/08): hang nut mua hang ================================
   Khach chot: [so luong][Mua ngay][Them vao gio]  roi MOI toi
               [Lien he gia dai ly][Goi dien]  - hai nut phu CHUNG mot hang. */

.bd-nut-phu {
  display: flex; align-items: stretch; gap: 12px;
  margin: 14px 0 4px; flex-wrap: nowrap;
}
/* hai nut trong hang phu: bo margin rieng, chia deu, chu khong xuong dong */
.bd-nut-phu .bd-sp-daily,
.bd-nut-phu .bd-sp-goi {
  margin: 0; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; text-align: center;
}
/* Chu hai nut dai ngan khac nhau -> chia cho theo DO DAI CHU (flex-basis auto)
   chu khong chia doi, khong thi nut dai ly bi tran chu ra ngoai vien. */
.bd-nut-phu .bd-sp-daily { flex: 1 1 auto; padding: 0 16px; font-size: clamp(12px, 1.05vw, 14.5px); }
.bd-nut-phu .bd-sp-goi   { flex: 0 1 auto; padding: 0 14px; font-size: clamp(12px, 1vw, 14px); }

/* HIEU UNG QUET SANG khi ro chuot vao bat ky nut mua nao */
.bd-quet,
.single-product .summary .single_add_to_cart_button {
  position: relative; overflow: hidden;
}
.bd-quet > *, .single-product .summary .single_add_to_cart_button > * { position: relative; z-index: 1; }
.bd-quet::after,
.single-product .summary .single_add_to_cart_button::after {
  /* PHAI co display: Storefront co san "button::after { display:none }" -> thieu
     dong nay thi hieu ung im lang khong hien, moi thu khac van dung. */
  content: ""; display: block; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.bd-quet:hover::after,
.single-product .summary .single_add_to_cart_button:hover::after {
  opacity: 1; animation: bd-quet-chay .62s ease-out;
}
/* nut vien trang (goi dien) thi quet bang anh xanh, quet trang se khong thay */
.bd-sp-goi.bd-quet::after {
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--bd-chinh) 22%, transparent), transparent);
}
.bd-sp-goi.bd-quet:hover::after {
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
}
@keyframes bd-quet-chay { from { left: -70%; } to { left: 115%; } }

@media (prefers-reduced-motion: reduce) {
  .bd-quet:hover::after,
  .single-product .summary .single_add_to_cart_button:hover::after { animation: none; opacity: 0; }
}

/* dien thoai: hai nut phu xep doc cho du cho chu */
@media (max-width: 700px) {
  .bd-nut-phu { flex-wrap: wrap; }
  .bd-nut-phu .bd-sp-daily,
  .bd-nut-phu .bd-sp-goi { flex: 1 1 100%; font-size: 14.5px; height: 50px; }
}

/* hai nut chinh khong duoc vo doi dong ("Them vao gio / hang") */
.bd-mua-ngay,
.single-product .summary .single_add_to_cart_button { white-space: nowrap; }
.single-product .summary .single_add_to_cart_button { flex: 1 1 0; }

/* ===== GIO HANG / THANH TOAN ban co dien =================================
   Da doi hai trang nay tu "khoi" sang shortcode co dien cho nhe (bo ~1,3 MB
   JS-CSS khoi). Storefront to chu tieu de bang (th) rat nhat -> gan nhu tang
   hinh tren nen xam, phai to lai. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table thead th,
.woocommerce-checkout-review-order-table th,
.woocommerce .cart_totals table th,
.woocommerce-cart .cart-collaterals h2,
.woocommerce table.shop_table td.product-name,
.woocommerce table.shop_table .order-total th {
  color: var(--bd-chu) !important;
  font-weight: 700;
}
.woocommerce table.shop_table thead th { font-size: 14px; letter-spacing: .02em; }

/* bo dau cham dau dong o danh sach hinh thuc thanh toan */
.woocommerce-checkout #payment ul.payment_methods { list-style: none; padding-left: 0; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }

/* nut chinh cua gio hang / thanh toan dung mau thuong hieu + quet sang */
.woocommerce .cart .button, .woocommerce .cart input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order {
  position: relative; overflow: hidden; border-radius: 99px; font-weight: 800;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #payment #place_order { background: var(--bd-chinh); color: #fff; }
.woocommerce .cart .button::after, .woocommerce .cart input.button::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce #payment #place_order::after {
  content: ""; display: block; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.woocommerce .cart .button:hover::after, .woocommerce .cart input.button:hover::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after,
.woocommerce #payment #place_order:hover::after { opacity: 1; animation: bd-quet-chay .62s ease-out; }

/* Trang gio hang/thanh toan nam trong khung .bd-noidung nen dinh luon kieu
   "cham tron cam" cua noi dung bai viet -> tat o cac danh sach cua WooCommerce. */
.bd-noidung .woocommerce li::before,
.bd-noidung ul.payment_methods li::before,
.bd-noidung ul.woocommerce-shipping-methods li::before { content: none; }
.bd-noidung ul.payment_methods,
.bd-noidung ul.woocommerce-shipping-methods { padding-left: 0; list-style: none; }
.bd-noidung ul.payment_methods li,
.bd-noidung ul.woocommerce-shipping-methods li { padding-left: 0; }

/* nut "Tien hanh thanh toan" la the <a> -> bo gach chan cho ra dang nut */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { text-decoration: none; }
/* nut ap dung ma giam gia dung mau thuong hieu cho de thay */
.woocommerce .coupon button.button, .woocommerce .coupon input.button {
  background: var(--bd-chinh); color: #fff;
}

/* Hai nut chinh: co "overflow:hidden" (de lam hieu ung quet) nen theo chuan CSS
   min-width tu dong bi ve 0 -> chu bi cat cut. Phai ghi ro min-width. */
.bd-mua-ngay,
.single-product .summary .single_add_to_cart_button { min-width: max-content; }

/* Man hinh laptop hep: co chu + dem lai cho ca hang van vua MOT dong */
@media (max-width: 1340px) {
  .single-product .summary form.cart:not(.variations_form),
  .single-product .summary .woocommerce-variation-add-to-cart { gap: 10px; }
  .single-product .summary form.cart .qty { width: 56px; height: 50px; }
  .bd-mua-ngay,
  .single-product .summary .single_add_to_cart_button {
    height: 50px; font-size: 15px; padding: 0 12px;
  }
}

/* Man 981-1219px: cot giua qua hep, hang nut bi vo doi dong -> bo cot thu ba
   xuong duoi (nam ngang), cho phan thong tin rong ra. */
@media (min-width: 981px) and (max-width: 1219px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: 32px;
  }
  .bd-sp-cs {
    grid-column: 1 / -1; grid-row: 2; margin-top: 8px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  }
  .bd-sp-cs h3 { grid-column: 1 / -1; margin-bottom: 2px; }
  .bd-sp-cs-o { margin-bottom: 0; }
}

/* ===== TRANG CHUNG NHAN & KIEM DINH (22/08) ==============================
   Giay to that cua khach: 4 giay RDW Ha Lan (E4/R129), 2 giay Bo GTVT Sec
   (E8/R44), 1 giay hop quy vai VIETNAMCONTROL. */

.bd-gcn-dan { max-width: 70ch; margin: -6px 0 26px; color: var(--bd-chu-nhat); }
.bd-gcn-dan b { color: var(--bd-chu); }

.bd-gcn-luoi {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}
.bd-gcn-luoi-1 { grid-template-columns: minmax(0, 460px); }

.bd-gcn-o {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1.5px solid #e8f1f8; border-radius: 20px; background: #fff;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.bd-gcn-o:hover {
  transform: translateY(-3px); border-color: #cfe4f5;
  box-shadow: 0 16px 34px rgba(54, 78, 162, .13);
}

/* anh giay: nen xam nhat de trang giay noi len, cat phan tren cho deu */
.bd-gcn-anh {
  position: relative; display: block; height: 250px; overflow: hidden;
  background: #f4f7fb; border-bottom: 1px solid #eef4f9;
}
.bd-gcn-anh img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
.bd-gcn-phong {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 10px;
  font: 700 12.5px/1 var(--bd-font-head); color: #fff; text-align: center;
  background: linear-gradient(transparent, rgba(23, 38, 82, .72));
  opacity: 0; transition: opacity .18s;
}
.bd-gcn-o:hover .bd-gcn-phong { opacity: 1; }

.bd-gcn-noi { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.bd-gcn-chuan {
  align-self: flex-start; margin-bottom: 8px; padding: 5px 12px; border-radius: 99px;
  background: #eaf4fb; color: var(--bd-xanh-chu);
  font: 800 11.5px/1 var(--bd-font-head); letter-spacing: .04em; text-transform: uppercase;
}
.bd-gcn-noi h3 { margin: 0 0 12px; font-size: 18px; color: var(--bd-chinh); }

.bd-gcn-ds { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0 0 12px; }
.bd-gcn-ds dt { font-size: 12.5px; color: var(--bd-chu-nhat); }
.bd-gcn-ds dd {
  margin: 0; font: 700 12.5px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--bd-chu); word-break: break-word;
}
.bd-gcn-mo { font-size: 13.5px; color: var(--bd-chu-nhat); margin: 0 0 12px; }
.bd-gcn-luuy {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: #fff7e4; border-left: 3px solid var(--bd-nhan-cam);
  font-size: 12.5px; line-height: 1.5; color: #6b4a08;
}

.bd-gcn-nut { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bd-gcn-tai, .bd-gcn-sp {
  flex: 1 1 auto; text-align: center; padding: 11px 14px; border-radius: 99px;
  font: 800 13px/1.2 var(--bd-font-head); text-decoration: none;
}
.bd-gcn-tai { background: var(--bd-chinh); color: #fff; }
.bd-gcn-tai:hover { background: var(--bd-gradient-dau); color: #fff; }
.bd-gcn-sp { border: 1.5px solid #dbe6f7; color: var(--bd-chinh); flex: 0 1 auto; }
.bd-gcn-sp:hover { background: #eef4fb; }

/* khoi hoi cuoi trang */
.bd-gcn-hoi {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 22px;
  background: linear-gradient(120deg, #eef4fb, #f7fbff);
  border: 1.5px solid #e2eefa;
}
.bd-gcn-hoi h3 { margin: 0 0 6px; font-size: 19px; color: var(--bd-chinh); }
.bd-gcn-hoi p { margin: 0; max-width: 62ch; color: var(--bd-chu-nhat); font-size: 14.5px; }
.bd-gcn-hoi > div { flex: 1 1 320px; }

/* ---- khoi chung nhan tren TRANG SAN PHAM ---- */
.bd-sp-cn {
  display: flex; align-items: center; gap: 14px; margin: 16px 0 4px;
  padding: 12px 14px; border-radius: 16px;
  background: #f2f8fd; border: 1.5px solid #dfeefa; text-decoration: none;
}
.bd-sp-cn:hover { background: #e8f3fc; border-color: #c9e2f6; }
.bd-sp-cn img {
  width: 46px; height: 60px; object-fit: cover; object-position: top center;
  border-radius: 7px; border: 1px solid #dbe6f7; background: #fff; flex-shrink: 0;
}
.bd-sp-cn b { display: block; font: 700 14px/1.3 var(--bd-font-head); color: var(--bd-chinh); }
.bd-sp-cn span {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--bd-chu-nhat);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.bd-sp-cn i { margin-left: auto; font-style: normal; color: var(--bd-xanh-chu); flex-shrink: 0; }

@media (max-width: 640px) {
  .bd-gcn-luoi { grid-template-columns: 1fr; }
  .bd-gcn-anh { height: 210px; }
  .bd-gcn-hoi { padding: 20px; }
}

/* ===== BONG BONG CHAT (22/08) ============================================
   Khung tu ve cho nhe; SDK Zalo chi nap khi khach bam "Chat nhanh". */

.bd-chat { position: fixed; right: 18px; bottom: 18px; z-index: 9000; }

.bd-chat-nut {
  position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #0a86ff, #0068d6);
  box-shadow: 0 10px 26px rgba(10, 105, 214, .42);
  transition: transform .18s, box-shadow .18s;
}
.bd-chat-nut:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(10, 105, 214, .5); }
.bd-chat-nut svg { width: 30px; height: 30px; }
/* cham xanh "dang truc" */
.bd-chat-cham {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: #2ecc71; border: 2px solid #fff;
}
.bd-chat.mo .bd-chat-nut { transform: scale(.9); opacity: .9; }

.bd-chat-hop {
  position: absolute; right: 0; bottom: 72px; width: min(340px, calc(100vw - 36px));
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 22px 54px rgba(16, 34, 78, .26);
  animation: bd-chat-len .22s ease-out;
}
@keyframes bd-chat-len { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.bd-chat-dau {
  display: flex; align-items: center; gap: 11px; padding: 14px 14px 15px;
  background: linear-gradient(135deg, #1a8cff, #0067d4); color: #fff;
}
.bd-chat-avt { width: 46px; height: 46px; border-radius: 50%; background: #fff; padding: 5px; flex-shrink: 0; }
.bd-chat-ten { flex: 1; min-width: 0; }
.bd-chat-ten b { display: block; font: 800 15.5px/1.2 var(--bd-font-head); }
.bd-chat-ten span { display: block; font-size: 12px; opacity: .88; margin-top: 2px; }
.bd-chat-dong {
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 12px; line-height: 1;
}
.bd-chat-dong:hover { background: rgba(255, 255, 255, .34); }

.bd-chat-than { padding: 16px 16px 18px; }
.bd-chat-chao { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--bd-chu); }
.bd-chat-chao b { font: 800 19px/1.2 var(--bd-font-head); color: var(--bd-chinh); }
.bd-chat-batdau {
  margin: 0 0 12px; text-align: center; font-size: 12.5px; color: var(--bd-chu-nhat);
}

.bd-chat-zalo, .bd-chat-nhanh, .bd-chat-goi {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 13px 14px; border-radius: 12px; border: 0; cursor: pointer;
  font: 800 15px/1.2 var(--bd-font-head); margin-bottom: 9px;
}
.bd-chat-zalo { background: #0a68d8; color: #fff; position: relative; overflow: hidden; }
.bd-chat-zalo:hover { background: #0b5cbd; color: #fff; }
.bd-chat-nhanh { background: #e9ecef; color: #1f2937; }
.bd-chat-nhanh:hover { background: #dfe3e8; }
.bd-chat-goi {
  margin-bottom: 0; padding: 10px 14px; font-size: 13.5px;
  background: transparent; color: var(--bd-chinh); border: 1.5px solid #dbe6f7;
}
.bd-chat-goi:hover { background: #eef4fb; color: var(--bd-chinh); }

.bd-chat-khung { margin-top: 4px; }
.bd-chat-cho { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--bd-chu-nhat); }
.bd-chat-khung .zalo-chat-widget { min-height: 0; }

/* dien thoai: khung chiem gan het be ngang, nut nho lai mot chut */
@media (max-width: 480px) {
  .bd-chat { right: 12px; bottom: 12px; }
  .bd-chat-nut { width: 52px; height: 52px; }
  .bd-chat-nut svg { width: 27px; height: 27px; }
  .bd-chat-hop { bottom: 64px; width: calc(100vw - 24px); }
}

/* in ra giay thi bo di */
@media print { .bd-chat { display: none; } }

/* ===== HAI THE DONG SAN PHAM - lam lai 22/08 =============================
   Khach che: anh bi cat cut o day the, chu nho kho doc.
   Cach chua: anh da TACH NEN (khong con khung anh de ma cat), dat noi tren
   mot vet bong tron -> san pham "dung" tren the. Chu to han han len. */

.bd-th-grid { gap: 30px; }

.bd-th-the {
  padding: 34px 30px 26px; display: flex; flex-direction: column;
  background: linear-gradient(165deg, #e3f1fb 0%, #d3e8f8 100%);
  border: 1.5px solid #cfe4f5;
}
.bd-th-the.cam {
  background: linear-gradient(165deg, #fff4e3 0%, #ffe8c9 100%);
  border-color: #f6ddb6;
}
.bd-th-the:hover { box-shadow: 0 26px 56px rgba(54, 78, 162, .18); }

.bd-th-chu { display: block; }
/* nhan danh muc: to han truoc (14 -> 17px) va dam hon */
.bd-th-nhan {
  padding: 12px 30px; font: 800 17px/1 var(--bd-font-head);
  letter-spacing: .01em; box-shadow: 0 8px 20px rgba(54, 78, 162, .22);
}
.bd-th-the.cam .bd-th-nhan { box-shadow: 0 8px 20px rgba(255, 156, 0, .28); }
/* dong thong so: 17 -> 20px, dam hon, mau dam hon cho de doc */
.bd-th-the em {
  margin: 16px 0 0; font: 700 20px/1.45 var(--bd-font-head);
  color: #1f3a7a; text-wrap: balance;
}
.bd-th-the.cam em { color: #8a5200; }

/* vung anh: cao co dinh, anh nam TRON VEN ben trong (contain), khong cat */
.bd-th-anh {
  position: relative; margin: 6px 0 4px; height: 340px;
  /* PHAI ghi grid-template-rows: neu de hang tu co theo noi dung thi
     "max-height: 100%" cua anh khong co moc nao de tinh -> anh phinh het co
     that va tran ra ngoai the, de len ca dong "Xem ... mau". */
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
}
.bd-th-anh img {
  position: relative; z-index: 1;
  max-width: 88%; max-height: 100%; width: auto; height: auto;
  border-radius: 0; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(23, 43, 92, .22));
  transition: transform .3s ease;
}
.bd-th-the:hover .bd-th-anh img { transform: translateY(-6px) scale(1.03); }
/* vet bong tron duoi chan san pham cho no "dung" tren the */
.bd-th-anh::after {
  content: ""; display: block; position: absolute; z-index: 0;
  left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 62%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 43, 92, .22), transparent);
}

.bd-th-xem {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: auto; font: 800 16px/1 var(--bd-font-head); color: var(--bd-chinh);
}
.bd-th-the.cam .bd-th-xem { color: #a05e00; }
.bd-th-xem i { font-style: normal; transition: transform .22s; }
.bd-th-the:hover .bd-th-xem i { transform: translateX(5px); }

@media (max-width: 900px) {
  .bd-th-the { padding: 26px 22px 22px; }
  .bd-th-anh { height: 260px; }
  .bd-th-the em { font-size: 17px; }
  .bd-th-nhan { font-size: 15px; padding: 10px 24px; }
}

/* ===== KHOI CAU CHUYEN - lam lai 22/08 ==================================
   Bo nut tam giac (khong co video that). Bu lai chieu sau bang mot khoi mau
   lech phia sau anh + mot huy hieu chuan an toan de len goc anh. */

.bd-video { position: relative; }
.bd-vd-grid { grid-template-columns: 1fr 1.05fr; gap: 60px; }

.bd-vd-chu h2 { text-wrap: balance; margin-bottom: 20px; }
/* doan mo dau to hon cho vao chuyen */
.bd-vd-dau { font-size: 17.5px; line-height: 1.7; color: var(--bd-chu) !important; }
.bd-vd-them {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 8px;
  font: 800 16px/1 var(--bd-font-head); color: var(--bd-chinh); text-decoration: none;
  padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--bd-chinh) 28%, transparent);
}
.bd-vd-them:hover { border-bottom-color: var(--bd-chinh); color: var(--bd-chinh); }
.bd-vd-them i { font-style: normal; transition: transform .22s; }
.bd-vd-them:hover i { transform: translateX(5px); }

/* khung anh */
.bd-vd-anh { position: relative; margin: 0; padding: 0 18px 18px 0; }
.bd-vd-anh img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: 26px; box-shadow: 0 26px 60px rgba(16, 34, 78, .22);
}
/* khoi mau lech phia sau */
.bd-vd-nen {
  display: block; position: absolute; z-index: 0; inset: 34px 0 0 34px;
  border-radius: 26px; background: linear-gradient(140deg, var(--bd-phu), var(--bd-chinh));
  opacity: .5;
}

/* huy hieu chuan an toan de len goc duoi trai anh */
.bd-vd-huy {
  position: absolute; z-index: 2; left: -14px; bottom: 4px;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 14px; border-radius: 18px;
  background: #fff; box-shadow: 0 16px 34px rgba(16, 34, 78, .2);
}
.bd-vd-huy-ico {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex-shrink: 0; background: #f2f6fb;
}
.bd-vd-huy-ico svg { width: 42px; height: 42px; }
.bd-vd-huy span { display: block; font-size: 12.5px; color: var(--bd-chu-nhat); line-height: 1.35; }
.bd-vd-huy b {
  display: block; font: 800 15px/1.2 var(--bd-font-head); color: var(--bd-chinh);
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  .bd-vd-grid { gap: 34px; }
  .bd-vd-anh { padding: 0 12px 12px 0; margin-top: 6px; }
  .bd-vd-nen { inset: 22px 0 0 22px; }
  .bd-vd-huy { left: 0; padding: 11px 16px 11px 11px; }
  .bd-vd-huy-ico { width: 36px; height: 36px; }
  .bd-vd-huy-ico svg { width: 36px; height: 36px; }
}

/* ===== SUA KHUNG CHAT 22/08 =============================================
   Loi: bam "Chat nhanh" thi bo chat cua Zalo tu ve MOT bong bong noi rieng
   cua no -> man hinh co hai bong bong chong nhau. Nay nap xong Zalo thi an
   han khung cua minh di (lop .an-han), de mot minh Zalo lam viec. */
.bd-chat.an-han { display: none; }

/* bong bong dung logo Zalo chinh chu tren nen trang cho ro */
.bd-chat-nut { background: #fff; box-shadow: 0 10px 26px rgba(10, 105, 214, .3); }
.bd-chat-nut:hover { background: #fff; box-shadow: 0 14px 32px rgba(10, 105, 214, .42); }
.bd-chat-ico { width: 34px; height: 34px; object-fit: contain; display: block; }
.bd-chat-cham { border-color: #fff; }

/* dau hieu Zalo trong nut chinh: dat trong vien tron trang cho noi tren nen xanh */
.bd-chat-zalo { display: flex; align-items: center; justify-content: center; gap: 9px; }
.bd-chat-zalo img {
  width: 22px; height: 22px; object-fit: contain; display: block;
  background: #fff; border-radius: 50%; padding: 2px;
}

/* ===== DAI CHAY NGANG (chung chi + doi tac) - 22/08 ====================
   Cach chay lien tuc khong thay diem gap: in danh sach HAI lan roi keo cha
   di dung 50% be ngang. Khong dung JS. */

.bd-chay { overflow: hidden; padding: 6px 0 4px; -webkit-mask-image:
  linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bd-chay-trong { display: flex; width: max-content; animation: bd-chay-di 46s linear infinite; }
.bd-chay:hover .bd-chay-trong { animation-play-state: paused; }
.bd-chay-nhanh .bd-chay-trong { animation-duration: 34s; }

.bd-chay-ds {
  display: flex; align-items: stretch; gap: 18px; margin: 0; padding: 0 9px; list-style: none;
}
.bd-chay-ds li { list-style: none; margin: 0; padding: 0; }
.bd-chay-ds li::before { content: none; }

@keyframes bd-chay-di { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Khach y/c 22/08: hai dai PHAI luon tu chay. Truoc day co luat ton trong
   cai dat "giam chuyen dong" cua may -> may nao bat cai do se thay dai dung im
   kem mot thanh cuon xam. Nay bo luat do di, dai chay o moi may. */

.bd-chay-duoi { text-align: center; margin-top: 20px; }

/* --- the giay chung nhan trong dai --- */
.bd-cc-the {
  display: flex; flex-direction: column; width: 190px; height: 100%;
  border: 1.5px solid #e8f1f8; border-radius: 16px; overflow: hidden;
  background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bd-cc-the:hover {
  transform: translateY(-4px); border-color: #cfe4f5;
  box-shadow: 0 16px 32px rgba(54, 78, 162, .15);
}
.bd-cc-the img {
  width: 100%; height: 168px; object-fit: cover; object-position: top center;
  display: block; background: #f4f7fb; border-bottom: 1px solid #eef4f9;
}
.bd-cc-the span {
  display: block; padding: 11px 13px 13px; font-size: 12px; color: var(--bd-chu-nhat);
  line-height: 1.4;
}
.bd-cc-the b {
  display: block; font: 700 13px/1.3 var(--bd-font-head); color: var(--bd-chinh);
  margin-bottom: 3px;
}

/* --- o logo doi tac --- */
.bd-dt-o {
  /* PHAI co grid-template-rows: hang luoi tu co theo noi dung thi "max-height:100%"
     cua logo khong co moc de tinh -> logo giu co that va tran ra ngoai khung.
     Dung y het loi so 31 trong so loi, dinh lai lan hai. */
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  width: 210px; height: 108px; padding: 20px 26px; overflow: hidden;
  background: #fff; border: 1.5px solid #e8f1f8; border-radius: 18px;
  transition: transform .2s, box-shadow .2s;
}
.bd-dt-o img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  /* logo nhieu mau khac nhau -> ha bao hoa mot chut cho ca hang nhin dong bo,
     ro chuot vao thi tra lai mau that */
  filter: grayscale(.25); opacity: .92; transition: filter .25s, opacity .25s;
}
.bd-dt-o:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(54, 78, 162, .14); }
.bd-dt-o:hover img { filter: none; opacity: 1; }

@media (max-width: 640px) {
  .bd-cc-the { width: 158px; }
  .bd-cc-the img { height: 140px; }
  .bd-dt-o { width: 168px; height: 92px; padding: 16px 20px; }
}

/* QR Zalo o chan trang */
.bd-ft-qr { display: block; }
.bd-ft-qr-chu { margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .8; }
/* o chua nut cua Zalo (nam ngoai khung minh, xem chu thich trong functions.php) */
.bd-chat-zaloBox { position: fixed; right: 18px; bottom: 18px; z-index: 9001; }
@media (max-width: 480px) { .bd-chat-zaloBox { right: 12px; bottom: 12px; } }

/* ===== MENU SAN PHAM CO ANH (22/08) ===================================
   Truoc day menu chi liet ke ten chu; khach muon nhin thay mat hang. */
.bd-mega-sp {
  display: flex !important; flex-direction: column; align-items: center;
  gap: 8px; padding: 10px 8px 12px !important; border-radius: 14px;
  text-align: center; transition: background .16s, transform .16s;
}
.bd-mega-sp:hover { background: #f2f8fd; transform: none !important; }
.bd-mega-anh {
  display: grid; place-items: center; width: 100%; height: 96px;
}
.bd-mega-anh img {
  max-width: 100%; max-height: 96px; width: auto; height: auto;
  object-fit: contain; display: block; transition: transform .2s;
}
.bd-mega-sp:hover .bd-mega-anh img { transform: scale(1.06); }
.bd-mega-ten {
  display: block; font: 700 12px/1.35 var(--bd-font-head);
  color: var(--bd-chu); letter-spacing: .01em;
}
.bd-mega-sp:hover .bd-mega-ten { color: var(--bd-chinh); }

/* trong moi nhom: ten danh muc mot dong, roi den luoi anh san pham */
.bd-mega-nhom { display: block; }
.bd-mega-nhom .bd-mega-con { display: block; margin-bottom: 8px; }
.bd-mega-nhom {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 2px;
}
.bd-mega-nhom .bd-mega-con { grid-column: 1 / -1; }

/* ===== MENU DIEN THOAI DANG GAP (22/08) ================================
   Cay 3 tang: San pham > danh muc > san pham. Nut + / - o ben phai.
   Chi ap dung tu 900px tro xuong; may tinh giu nguyen mega menu cu. */
@media (max-width: 900px) {
  .bd-nav { align-items: stretch; }

  /* hang co the gap: chua nut + / - o cuoi hang */
  .bd-nav .bd-co-gap {
    position: relative; display: flex !important; align-items: center;
    padding-right: 46px !important;
  }
  .bd-gap-nut {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; color: var(--bd-chu-nhat);
  }
  /* dau + / - ve bang hai gach cho gon, khong dung phong chu */
  .bd-gap-nut::before, .bd-gap-nut::after {
    content: ""; display: block; position: absolute;
    background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s;
  }
  .bd-gap-nut::before { width: 15px; height: 2px; }
  .bd-gap-nut::after  { width: 2px; height: 15px; }
  .bd-co-gap.dang-mo .bd-gap-nut::after { transform: rotate(90deg); opacity: 0; }
  .bd-co-gap.dang-mo .bd-gap-nut { color: var(--bd-chinh); }

  /* o bi gap: dong lai han */
  .bd-gap-o {
    display: block !important; overflow: hidden;
    max-height: 0; opacity: 0; visibility: hidden;
    transition: max-height .28s ease, opacity .2s;
  }
  .bd-gap-o.mo { max-height: 2000px; opacity: 1; visibility: visible; }

  /* bang mega tren dien thoai: xep doc, bo khung noi */
  .bd-nav .bd-mega {
    /* .bd-mega goc co min-height:386px -> tren dien thoai no de lai mot mang
       trong hue quanh muc "San pham" du da gap. Phai go min-height. */
    position: static !important; width: auto !important; min-width: 0 !important;
    min-height: 0 !important; overflow: hidden !important;
    box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; background: none !important;
    grid-template-columns: 1fr !important; transform: none !important;
  }
  .bd-mega-trai, .bd-mega-phai {
    display: block !important; width: auto !important; padding: 0 !important;
    background: none !important; border: 0 !important;
  }
  .bd-mega-cha {
    border-radius: 0 !important; background: none !important;
    padding: 13px 46px 13px 14px !important; border-bottom: 1px solid #eef2f7;
  }
  .bd-mega-cha .bd-mui { display: none; }
  .bd-mega-bang { display: block !important; }
  .bd-mega-bang.bd-gap-o:not(.mo) { max-height: 0; }

  .bd-mega-nhom { display: block !important; padding: 0 0 0 12px !important; }
  .bd-mega-con {
    position: relative; display: flex !important; align-items: center;
    padding: 12px 46px 12px 14px !important; margin: 0 !important;
    border-bottom: 1px solid #f2f5f9; font-size: 14.5px;
  }
  /* tang 3: anh nho 44px + ten, xep ngang cho gon man hinh */
  .bd-mega-hopsp { padding-left: 14px; }
  .bd-nav .bd-mega-sp {
    flex-direction: row !important; align-items: center; text-align: left;
    padding: 11px 14px !important; gap: 11px; border-bottom: 1px solid #f6f8fb;
  }
  .bd-nav .bd-mega-anh { width: 44px; height: 44px; flex: 0 0 44px; }
  .bd-nav .bd-mega-anh img { max-height: 44px; }
  .bd-nav .bd-mega-ten { font-size: 13px; }
}

/* ===== VA MENU DIEN THOAI (22/08, vong 2) =============================
   Nut + / - bi day ra ngoai man hinh vi hang menu rong hon khung. */
@media (max-width: 900px) {
  .bd-nav { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .bd-nav > a, .bd-nav > span { width: 100%; box-sizing: border-box; }
  .bd-mega-boc, .bd-thangan-boc { display: block !important; width: 100%; }
  .bd-nav .bd-co-gap { width: 100%; box-sizing: border-box; justify-content: flex-start; }
  /* da co nut + / - roi thi bo mui ten ▾ cho do roi */
  .bd-nav .bd-mega-mo > i, .bd-nav .bd-thangan-mo > i { display: none; }
  /* menu con cua "Bao hanh" tren dien thoai: xep doc, bo khung noi */
  .bd-nav .bd-thangan {
    position: static !important; transform: none !important; min-width: 0 !important;
    width: 100% !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 0 0 0 14px !important; background: none !important;
  }
  .bd-nav .bd-thangan a { display: block; padding: 12px 14px; border-bottom: 1px solid #f2f5f9; }
}
/* logo Zalo trong bong bong bi hien nho hon co dat -> ep kich thuoc ro rang */
.bd-chat-nut .bd-chat-ico { width: 38px !important; height: 38px !important; max-width: none; }

/* ===== SUA VONG 3 (22/08) ==============================================
   Khach y/c: bong bong chat bo nen trang, chi con icon Zalo. */
.bd-chat-nut {
  background: none !important; box-shadow: none !important;
  width: 62px; height: 62px;
}
.bd-chat-nut:hover { background: none !important; box-shadow: none !important; }
.bd-chat-nut .bd-chat-ico {
  width: 58px !important; height: 58px !important;
  filter: drop-shadow(0 8px 18px rgba(10, 105, 214, .38));
}
/* cham "dang truc" bam theo icon, khong con vong tron trang lam moc */
.bd-chat-cham { top: 2px; right: 4px; border: 2px solid #fff; }

/* mui ten thu gon: can giua tuyet doi trong vong tron */
.bd-chat-dong {
  display: grid; place-items: center; padding: 0; line-height: 0;
}
.bd-chat-dong svg { width: 15px; height: 15px; display: block; }

/* chan trang: chi con o ma quet */
.bd-ft-qr { display: block; max-width: 168px; }
.bd-ft-qr img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ===== MENU SAN PHAM: CANH TREN (khach y/c 22/08) ======================
   Mac dinh o luoi GIAN cho day chieu cao hang, nen nhom nao it san pham thi
   cac o bi keo cao ra va anh nam giua o -> nhin so le, khong thang hang voi
   cot ben canh. Ep tat ca goi len tren. */
.bd-mega-bang { align-items: start; }
.bd-mega-nhom { align-content: start; align-items: start; }
.bd-mega-sp { justify-content: flex-start; align-self: start; }
/* o anh: chieu cao co dinh, anh nam DUOI day o de chan san pham thang hang */
.bd-mega-anh { align-items: end; }

/* =======================================================================
   HERO MOBILE: ANH FULL, CHU DAT TREN ANH   (khach y/c 23/08)
   -----------------------------------------------------------------------
   TRUOC DAY tren mobile hero bi "dong khung": tu vong 13/08 minh TAT anh nen
   (`background-image: none !important`) roi hien anh thanh MOT THE RIENG
   bo goc 18px nam TREN chu. Ket qua la mot cai the anh lo lung giua nen xanh,
   chu tut xuong duoi - dung nhu Sep noi, nhin nhu bi dong khung.

   GIO: tra anh ve lam NEN tran het be ngang, chu nam DE LEN anh.

   Ba diem phai giu, khong duoc bo:

   1) TRAN HET BE NGANG ma khong dung 100vw.
      `.bd-slide` nam trong `.bd-wrap` (padding 0 24px). Cach cu la keo am
      `margin-left: calc(50% - 50vw)`. Tren mobile KHONG dung lai chieu do:
      100vw tinh CA thanh cuon doc, may Android hien thanh cuon chiem cho se
      du ra vai pixel -> tran ngang. Thay bang: bo padding cua chinh .bd-wrap
      trong hero, roi tra padding lai cho phan CHU. Khong co phep vw nao.

   2) LOP PHU PHAI DOC, KHONG NGANG.
      Ban desktop phu gradient tu TRAI sang (chu nam ben trai). Tren mobile
      chu nam DUOI, nen phai doi thanh tren-xuong: dinh anh de nguyen cho ro
      mat em be, cang xuong duoi cang dam de chu trang doc duoc. Ba anh hero
      deu la anh chup that, vung duoi la san xe / chan ghe mau sang toi khac
      nhau -> phai phu du dam (.92 o day) chu khong the trong cay vao anh.

   3) NEO ANH O GIUA.
      Ba anh deu 2:1. Tren khung doc 375px chi thay khoang 36% be ngang giua.
      Da soi tung anh: em be nam trong khoang 42%-62% -> neo `center` giu
      duoc ca ba. KHONG dung `right center` nhu ban desktop: anh 2 va 3 se
      bi cat mat em be, chi con ghe khong.
   ======================================================================= */

@media (max-width: 860px) {

  /* --- 1. khung tran het be ngang --- */
  .bd-hero:has(.bd-slide.co-anh) .bd-wrap { padding-left: 0; padding-right: 0; }

  .bd-slide.co-anh {
    margin: 0;
    /* anh nen do front-page.php dat inline; luat cu chan bang
       "background-image: none !important" da duoc go o tren. */
    background-size: cover;
    /* Neo 52% chu KHONG phai 50%: khung doc chi thay ~40% be ngang anh 2:1.
       Da soi ca ba anh - chu the nam trong 38%-67%. O 50% thi be gai anh 1
       (x~67%) bi mep phai xen mat mat; day sang 52% la du ca ba deu lot. */
    background-position: 52% center;
    background-repeat: no-repeat;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    /* 500px chu khong cao hon: cang cao thi cover cang phong to anh va cang
       thay it be ngang -> cang de cat mat nguoi. */
    min-height: min(64vh, 500px);
    /* KHONG dat `display: flex` o day. `.bd-slide.co-anh` co do uu tien bang
       `.bd-slide.hien` nhung dung SAU, nen se de len ca `.bd-slide{display:none}`
       -> ca 3 slide cung hien mot luc (da mac loi nay 23/08). Chi ta HUONG
       xep, con viec an/hien de nguyen cho hai luat cu quyet dinh. */
    flex-direction: column;
    justify-content: flex-end;      /* chu don xuong day anh */
    align-items: stretch;
    gap: 0;
    /* chua cho canh cheo cua khoi ke tiep an len (--bd-cheo) */
    padding: 108px 22px calc(var(--bd-cheo) + 16px);
  }

  /* --- 2. bo the anh dong khung cu --- */
  .bd-slide-anh { display: none !important; }

  /* --- 3. lop phu doc cho chu doc ro --- */
  .bd-slide.co-anh::before {
    display: block !important;
    /* Day KHONG duoc dac hoan toan. Khoi ke tiep (.bd-chaomung) an len bang
       mot MUI TEN mau #364ea2; neu day hero cung navy dac thi mui ten chim
       mat, doan noi thanh mot duong ke thang. Dung lai o .68 de con thay anh
       -> mui ten noi ro tren nen anh. */
    background: linear-gradient(180deg,
        rgba(18, 32, 80, .30)  0%,
        rgba(18, 32, 80, .12) 26%,
        rgba(18, 32, 80, .56) 56%,
        rgba(16, 28, 72, .86) 78%,
        rgba(16, 28, 72, .68) 100%) !important;
  }

  /* --- 4. chu tren anh --- */
  .bd-slide.co-anh .bd-hero-in { max-width: none; }

  .bd-slide.co-anh .bd-kicker {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
    backdrop-filter: blur(3px);
  }
  .bd-slide.co-anh h1 {
    color: #fff;
    font-size: clamp(28px, 8.2vw, 38px);
    line-height: 1.14;
    margin-bottom: 12px;
    /* anh chup that co vung sang bat ngo -> bong chu giu cho luon doc duoc */
    text-shadow: 0 2px 14px rgba(10, 20, 60, .55);
  }
  .bd-slide.co-anh p {
    color: rgba(255, 255, 255, .93);
    font-size: 15.5px;
    line-height: 1.58;
    margin-bottom: 22px;
    text-shadow: 0 1px 10px rgba(10, 20, 60, .5);
  }

  /* slide "sang" (anh sang mau) tren mobile cung nam duoi lop phu toi
     -> tra chu ve trang, dung de mau navy cu */
  .bd-slide-sang.co-anh h1,
  .bd-slide-sang.co-anh p { color: #fff; text-shadow: 0 2px 14px rgba(10, 20, 60, .55); }

  /* --- 5. hai nut: chia doi hang, khong xuong dong le loi --- */
  .bd-slide.co-anh .bd-btns { display: flex; gap: 10px; }
  .bd-slide.co-anh .bd-btns .bd-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px; padding-right: 12px;
    text-align: center;
    font-size: 14.5px;
    white-space: nowrap;
  }
  .bd-slide.co-anh .bd-btn-2 {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .62);
    color: #fff !important;
    backdrop-filter: blur(3px);
  }

}

/* May rat hep (iPhone SE ...): ha bot chieu cao va co chu lai mot nhip */
@media (max-width: 380px) {
  .bd-slide.co-anh {
    min-height: min(68vh, 500px);
    padding: 110px 18px calc(var(--bd-cheo) + 24px);
  }
  .bd-slide.co-anh .bd-btns .bd-btn { font-size: 13.5px; padding-left: 8px; padding-right: 8px; }
}

/* =======================================================================
   CHONG TRAN NGANG TREN DI DONG   (23/08)
   -----------------------------------------------------------------------
   Do duoc bang Playwright o khung 390px: trang rong 426px -> dien thoai
   that se tu thu nho ca trang lai (hoac cho keo ngang). Man hinh cang hep
   cang lech. Truoc do do bang Chrome ngam khong thay, vi Chrome ngam ep be
   ngang toi thieu ~500px nen 390 thanh 500 -> du cho, khong tran.

   HAI NGUON TRAN:

   1) Hieu ung "bay vao tu phai": `.bd-tu-phai { transform: translateX(60px) }`.
      Truoc khi cuon toi, phan tu dau san LECH RA PHAI 60px. Tren desktop
      khung 1240px con thua le nen khong sao; tren dien thoai phan tu da sat
      mep phai roi -> doi ngay 60px be ngang cho ca trang.
      CHUA: tren mobile doi sang truot DOC. Nhin van muot y het, ma truot doc
      thi khong the nao lam rong trang duoc.

   2) Hoa tiet trai tim `.bd-tim-1 { right:-40px; width:300px }` co y tho ra
      ngoai mep cho dep. Can mot lop cat o goc trang moi chan duoc.
      CHUA: them overflow-x:clip cho ca <html>.
      PHAI la `clip`, KHONG duoc dung `hidden`: hidden tao vung cuon moi va
      lam chet `position:sticky` cua thanh dau trang (Storefront tung dinh
      dung loi nay - xem chu thich o dong ~430).
   ======================================================================= */

html { overflow-x: clip !important; }

@media (max-width: 860px) {
  .bd-tu-trai { transform: translateY(24px); }
  .bd-tu-phai { transform: translateY(24px); }
}

/* =======================================================================
   MOBILE VÒNG 23/08 (đợt 2) — khách yêu cầu
   -----------------------------------------------------------------------
   A. Khối "Câu chuyện Babyro" bị dàn trải
   B. Các khối 3 cột → kéo ngang thay vì xếp dọc lê thê
   ======================================================================= */

/* ------------------------------------------------------------------ A ---
   LOI: dong 804 co san `@media(max-width:980px){ ... .bd-vd-grid{
   grid-template-columns:1fr } ... }`, NHUNG dong ~2559 lai ghi
   `.bd-vd-grid { grid-template-columns: 1fr 1.05fr }` KHONG boc trong media
   nao ca. Luat sau thang -> tren dien thoai van chia DOI, moi cot chi con
   ~150px: chu xuong dong 3 tu mot, khoi cao lenh khenh.

   Bai hoc: khi tinh chinh mot khoi da co luat mobile o tren, luat moi phai
   dat TRONG media query, khong thi no de nguoc len ban mobile. */
@media (max-width: 900px) {
  .bd-vd-grid {
    grid-template-columns: 1fr;   /* tra ve mot cot - day la cai bi mat */
    gap: 26px;
  }

  /* gon lai: tieu de nho mot bac, chu sat hon, bot khoang trong */
  .bd-vd-chu h2 { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.2; margin: 12px 0 14px; }
  .bd-vd-dau { font-size: 16px; line-height: 1.62; margin-bottom: 10px; }
  .bd-vd-chu p { font-size: 15.2px; line-height: 1.62; margin-bottom: 10px; }
  .bd-vd-them { margin-top: 4px; font-size: 15px; }

  /* anh: bo khoi mau lech phia sau (tren khung hep chi lam roi mat)
     va thu huy hieu lai cho vua */
  .bd-vd-anh { padding: 0; margin-top: 2px; }
  .bd-vd-nen { display: none; }
  .bd-vd-anh img { border-radius: 18px; box-shadow: 0 14px 34px rgba(16,34,78,.18); }
  .bd-vd-huy {
    left: 10px; right: 10px; bottom: 10px;
    padding: 10px 12px; border-radius: 14px; gap: 10px;
  }
  .bd-vd-huy-ico { width: 32px; height: 32px; }
  .bd-vd-huy-ico svg { width: 32px; height: 32px; }
  .bd-vd-huy b { font-size: 13.5px; }
  .bd-vd-huy span { font-size: 11.5px; }
}

/* ------------------------------------------------------------------ B ---
   Cac khoi 3-4 cot o may tinh, tren dien thoai truoc day xep DOC het
   -> phai cuon rat lau moi qua duoc mot muc. Doi thanh day KEO NGANG,
   dung dung kieu day san pham da co san (.bd-sp-cuon).

   Vi sao am le hai ben: `.bd-wrap` co padding 0 24px. Neu de nguyen thi
   the cuoi cung bi cat dung ngay vach 24px, nhin nhu loi. Keo am ra roi
   bu lai bang padding -> the dau van thang hang voi tieu de, ma day van
   chay het ra mep man hinh, the bi cat o mep tro thanh dau hieu "keo duoc".

   KHONG dung 100vw o day: no tinh ca thanh cuon doc (xem loi tran ngang
   da sua sang nay). Am 24px la du va an toan. */
@media (max-width: 900px) {
  .bd-cn-grid,      /* ý kiến chuyên gia */
  .bd-ch-grid,      /* showroom & đại lý */
  .bd-cs2-grid,     /* showroom ô tô */
  .bd-bv-grid {     /* tin tức */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(262px, 76vw);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    margin-left: -24px;
    margin-right: -24px;
    padding: 4px 24px 16px;
    /* PHAI co scroll-padding, khong thi padding-left o tren vo nghia:
       `scroll-snap-align:start` neo the vao MEP TRONG cua vung cuon, ma mep
       do tinh tu padding-box -> the dau bi hut ve sat mep man hinh trong khi
       tieu de muc van thut vao 24px, nhin lech hang. */
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
    scrollbar-width: none;
  }
  .bd-cn-grid::-webkit-scrollbar,
  .bd-ch-grid::-webkit-scrollbar,
  .bd-cs2-grid::-webkit-scrollbar,
  .bd-bv-grid::-webkit-scrollbar { display: none; }

  .bd-cn-grid > *,
  .bd-ch-grid > *,
  .bd-cs2-grid > *,
  .bd-bv-grid > * {
    scroll-snap-align: start;
    /* the trong day cuon phai TU cao bang nhau, khong keo theo the ben canh */
    height: 100%;
    margin: 0;
  }

  /* --- the Y KIEN: khong de cao lenh khenh ---
     Loi khac phuc: o kho hep 262px, doan trich dan dai xuong 18 dong ->
     the cao gan 900px, cuon 2 man hinh moi het MOT loi. Ba viec:
     anh thap lai, chu nho mot nhip, va o dam bao the rong hon. */
  .bd-cn-grid { grid-auto-columns: minmax(282px, 84vw); }
  .bd-cn-grid .bd-cn { padding: 18px; }
  .bd-cn-grid .bd-cn-anh { padding: 0; }
  .bd-cn-grid .bd-cn-hinh { height: 168px; }
  .bd-cn-grid .bd-cn p { font-size: 14.2px; line-height: 1.58; }
  .bd-cn-grid .bd-cn-anh .bd-sao { margin: 14px 18px 8px; }
  .bd-cn-grid .bd-cn-anh p { margin: 0 18px 14px; }
  .bd-cn-grid .bd-cn-anh .bd-cn-ai { margin: auto 18px 18px; }
  /* ten + chuc danh: xep cot cho khoi bi anh dai dien day xuong le loi */
  .bd-cn-grid .bd-cn-ai { align-items: flex-start; gap: 10px; }
  .bd-cn-grid .bd-cn-av { width: 36px; height: 36px; font-size: 15px; flex: none; }
  .bd-cn-grid .bd-cn-ai b { font-size: 13.5px; line-height: 1.3; }
  .bd-cn-grid .bd-cn-ai i { font-size: 12px; line-height: 1.4; }

  /* the dai ly: canh trai cho de doc, khong can giua nhu ban may tinh */
  .bd-ch-grid .bd-ch { text-align: left; align-items: flex-start; }

  /* tin tuc: anh thap lai cho the khong qua cao */
  .bd-bv-grid .bd-bv-img img { aspect-ratio: 16 / 10; object-fit: cover; }
}

/* Máy hẹp: thẻ hẹp lại một nhịp nữa cho thấy rõ mép thẻ kế tiếp */
@media (max-width: 400px) {
  .bd-cn-grid, .bd-ch-grid, .bd-cs2-grid, .bd-bv-grid {
    grid-auto-columns: minmax(238px, 80vw);
    margin-left: -22px; margin-right: -22px;
    padding-left: 22px; padding-right: 22px;
    scroll-padding-left: 22px; scroll-padding-right: 22px;
  }
}

/* Máy bật "giảm chuyển động": bỏ cuộn mượt, vẫn kéo ngang được bình thường */
@media (prefers-reduced-motion: reduce) {
  .bd-cn-grid, .bd-ch-grid, .bd-cs2-grid, .bd-bv-grid { scroll-behavior: auto; }
}

/* =======================================================================
   BANG THONG SO KY THUAT  (24/08 - boc tu catalogue chinh hang)
   Nam trong mo ta dai cua san pham, do scripts/nap_thong_so_catalogue.php
   sinh ra tu /thong_so_ghe.json.
   ======================================================================= */

.bd-ts { margin: 0 0 30px; }

.bd-ts-de {
  font: 800 20px/1.3 var(--bd-font-head);
  color: var(--bd-chinh);
  margin: 0 0 14px;
}

.bd-ts-bang {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  /* bang so lieu -> chu so thang cot cho de doi chieu giua cac mau */
  font-variant-numeric: tabular-nums;
}
.bd-ts-bang th,
.bd-ts-bang td {
  padding: 11px 14px;
  border-bottom: 1px solid #e5ecf6;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.bd-ts-bang th {
  width: 42%;
  font-weight: 700;
  color: var(--bd-chinh);
  background: #f5f8fd;
  white-space: nowrap;
}
.bd-ts-bang td { color: var(--bd-chu); }
.bd-ts-bang tr:last-child th,
.bd-ts-bang tr:last-child td { border-bottom: 0; }

.bd-ts-de2 {
  font: 800 16px/1.3 var(--bd-font-head);
  color: var(--bd-chinh);
  margin: 0 0 10px;
}
.bd-ts-tn {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
}
.bd-ts-tn li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bd-chu);
}
/* dau tick thay cho cham tron - day la DAC TINH AN TOAN, khong phai gach dau dong */
.bd-ts-tn li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 13px; height: 8px;
  border-left: 2.4px solid var(--bd-nhan-cam);
  border-bottom: 2.4px solid var(--bd-nhan-cam);
  transform: rotate(-45deg);
}

.bd-ts-nguon {
  font-size: 13px;
  color: var(--bd-chu-nhat);
  font-style: italic;
  margin: 0;
}

@media (max-width: 600px) {
  .bd-ts-bang th, .bd-ts-bang td { padding: 9px 10px; font-size: 14.2px; }
  .bd-ts-bang th { width: 46%; white-space: normal; }
  .bd-ts-tn { grid-template-columns: 1fr; }
}

/* =======================================================================
   THE SAN PHAM: HAI NUT  (khach y/c 24/08)
   -----------------------------------------------------------------------
   Mau khach gui co hai nut xep chong: "Nhan gia dai ly" o tren, "Them vao
   gio hang" o duoi. Bung dung BO CUC do, nhung dung MAU BABYRO (navy + cam)
   chu khong bung mau tim/vang cua anh mau - do la site khac.

   Thu tu: nut dai ly chay o hook `woocommerce_after_shop_loop_item` uu tien 7,
   nut them-vao-gio cua WooCommerce chay uu tien 10 -> dai ly nam tren. Dung
   dua vao `order` cua flex vi the san pham khong phai flex container o moi
   giao dien con.
   ======================================================================= */

ul.products li.product .bd-the-daily,
ul.products li.product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 11px 14px;
  border-radius: 99px;
  border: 0;
  font: 700 14px/1.25 var(--bd-font-head);
  text-align: center;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, background .18s;
  /* ten mau dai -> khong de vo hang, thu chu lai la duoc */
  min-width: 0;
}

/* nut TREN: nhan gia dai ly - navy dam */
ul.products li.product .bd-the-daily {
  background: var(--bd-chinh);
  color: #fff !important;
}
ul.products li.product .bd-the-daily:hover {
  background: #2a3f88;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(54, 78, 162, .28);
}

/* nut DUOI: them vao gio - cam thuong hieu */
ul.products li.product .button {
  background: var(--bd-nhan-cam) !important;
  color: #fff !important;
}
ul.products li.product .button:hover {
  background: #e88c00 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 156, 0, .32);
}
ul.products li.product .button.loading { opacity: .7; }
/* nut "Da them" cua WooCommerce hien sau khi bam - giu cung hang */
ul.products li.product .added_to_cart {
  display: block;
  text-align: center;
  font: 600 13px/1.4 var(--bd-font-body);
  color: var(--bd-chinh);
  margin-top: 2px;
}

.bd-the-ico { display: grid; place-items: center; flex: none; }
.bd-the-ico svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* man hinh hep: chu nho lai mot nhip cho hai nut van gon trong the */
@media (max-width: 480px) {
  ul.products li.product .bd-the-daily,
  ul.products li.product .button { font-size: 13px; padding: 10px 10px; gap: 6px; }
  .bd-the-ico svg { width: 15px; height: 15px; }
}

/* =======================================================================
   "GHE BABYRO GAN BAN NHAT" GOP VAO KHOI HE THONG PHAN PHOI (24/08)
   -----------------------------------------------------------------------
   Truoc day la mot section rieng nam tan duoi trang. Hai muc noi cung mot
   chuyen (he thong phan phoi) nen khach chot gop lam mot: ban do cho do phu
   song tong the, ben duoi cho dia chi cu the.

   Can mot duong ke ngan cach de nguoi doc biet day la MOT MUC PHU cua khoi,
   khong phai section moi - dung ke mo, khong dung khoang trong to (khoang
   trong to se lam no lai giong hai khoi tach roi nhu cu).
   ======================================================================= */

.bd-ghe-gan {
  margin-top: 46px;
  padding-top: 38px;
  border-top: 1px solid color-mix(in srgb, var(--bd-chinh) 16%, transparent);
}

.bd-ghe-gan-de { text-align: center; margin-bottom: 26px; }
.bd-ghe-gan-de h3 {
  font: 800 clamp(21px, 2.5vw, 28px)/1.25 var(--bd-font-head);
  color: var(--bd-chinh);
  margin: 0 0 6px;
  text-wrap: balance;
}
.bd-ghe-gan-de p {
  margin: 0;
  color: var(--bd-chu-nhat);
  font-size: 15.5px;
}

/* nut "Xem toan bo" cach thẻ mot chut cho thoang */
.bd-ghe-gan .bd-giua { margin-top: 24px; }

@media (max-width: 900px) {
  .bd-ghe-gan { margin-top: 30px; padding-top: 26px; }
  .bd-ghe-gan-de { margin-bottom: 18px; }
  .bd-ghe-gan-de p { font-size: 14.5px; }
  /* dai the o day dung chung luat keo ngang da dat cho .bd-ch-grid o tren;
     chi can tra lai le hai ben cho khop voi .bd-wrap trong section nay */
  .bd-ghe-gan .bd-giua { margin-top: 6px; }
}

/* Danh ba dai ly o TRANG CHU: gap bot cho trang khong dai le the (24/08).
   Do that truoc khi gap: 52 the xep doc = khoi cao 9.831px tren dien thoai,
   bang ca trang chu truoc khi rut gon hom qua. Bam mot chip tinh thi bo gap. */
.bd-dl-grid.bd-dl-gap .bd-dl-du { display: none; }
.bd-dl-mo { cursor: pointer; border: 1.5px solid var(--bd-phu); background: #fff; }
.bd-ghe-gan-xem { margin-top: 14px; }

/* =======================================================================
   ANH CATALOGUE TRONG PHAN MO TA SAN PHAM  (khach y/c 25/08)
   -----------------------------------------------------------------------
   Truoc do anh nam trong THU VIEN ANH (day anh nho tren dau trang) - moi anh
   chi hien ~60px, khach phai bam tung cai moi xem duoc noi dung. Nay xep doc
   trong mo ta, doc mot mach nhu mot to gioi thieu.

   Anh goc cao (trang A4 doc, 1200x~1700) nen phai chan be ngang lai, khong
   thi moi anh chiem gan het man hinh, cuon mai khong het.
   ======================================================================= */

.bd-anh-cat {
  margin: 34px 0 0;
  padding-top: 30px;
  border-top: 1px solid #e5ecf6;
}

.bd-anh-cat-de {
  font: 800 20px/1.3 var(--bd-font-head);
  color: var(--bd-chinh);
  margin: 0 0 20px;
}

.bd-anh-cat-o {
  margin: 0 0 26px;
  /* anh trang catalogue von co le trang san - khong can vien, chi can bo goc
     va mot bong rat nhe cho tach khoi nen */
  border-radius: 14px;
  overflow: hidden;
  background: #f5f8fd;
  box-shadow: 0 4px 16px rgba(16, 34, 78, .07);
}

.bd-anh-cat-o img {
  display: block;
  width: 100%;
  height: auto;
  /* chan be ngang: trang A4 doc de 100% tren man hinh rong thi cao lenh khenh */
  max-width: 760px;
  margin: 0 auto;
}

.bd-anh-cat-o figcaption {
  padding: 12px 16px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bd-chu-nhat);
  text-align: center;
  background: #fff;
}

.bd-anh-cat-nguon {
  font-size: 13px;
  color: var(--bd-chu-nhat);
  font-style: italic;
  margin: 4px 0 0;
}

@media (max-width: 600px) {
  .bd-anh-cat { margin-top: 26px; padding-top: 22px; }
  .bd-anh-cat-de { font-size: 18px; margin-bottom: 16px; }
  .bd-anh-cat-o { margin-bottom: 20px; border-radius: 12px; }
  .bd-anh-cat-o figcaption { padding: 10px 12px 12px; font-size: 13.2px; }
}

/* Anh trong THAN BAI viet (khoi ["img", ...] trong bai_viet.json) - 25/08 */
.bd-bai-anh { margin: 26px 0; }
.bd-bai-anh img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; box-shadow: 0 6px 20px rgba(16, 34, 78, .10);
}
.bd-bai-anh figcaption {
  margin-top: 10px; font-size: 13.8px; line-height: 1.5;
  color: var(--bd-chu-nhat); font-style: italic; text-align: center;
}
/* the h3 trong bai (tu 25/08 moi hien - truoc do bi bo mat) */
.bd-noidung h3, .entry-content h3 {
  font: 800 19px/1.35 var(--bd-font-head); color: var(--bd-chinh);
  margin: 26px 0 10px;
}
@media (max-width: 600px) {
  .bd-bai-anh { margin: 20px 0; }
  .bd-bai-anh figcaption { font-size: 13px; }
  .bd-noidung h3, .entry-content h3 { font-size: 17.5px; margin: 20px 0 8px; }
}

/* ===== BONG BONG CHAT ZALO: icon thut ra ngoai mep phai (25/08) ==========
   Trieu chung: icon Zalo noi bam sat mep, mot phan bi cat mat.
   Nguyen nhan: Storefront dat padding cho MOI the <button> (.618em 1.41em).
   .bd-chat-nut khong xoa padding do -> o chua ben trong chi con ~17px be
   ngang, icon 58px tran ra ngoai o va lech han sang phai: do duoc mep phai
   cua icon nam -7px, tuc DA RA NGOAI man hinh.
   Cong "tran ngang" khong bat duoc vi the position:fixed khong lam trang
   dai them -> da them cong rieng, xem soi_truoc_khi_len_song.py. */
.bd-chat-nut { padding: 0 !important; display: grid; place-items: center; }

/* noi them le cho thoang (truoc: 18px / 12px) */
.bd-chat { right: 22px; bottom: 20px; }
/* BAT BUOC nam trong @media va dat SAU luat tren, khong thi luat tren de len */
@media (max-width: 480px) {
  .bd-chat { right: 16px; bottom: 16px; }
}