/*
Theme Name: Scool Theme
Theme URI: https://example.invalid/scool-theme
Author: Scool
Description: Block theme for scool.vn (dép 50–300k). Home/PLP/PDP/Cart/Checkout per docs/spec/spec-v1.0-FROZEN.md, look "Kinetic Commerce" (mockup/DESIGN.md).
Version: 1.4.5
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: scool-theme
*/

/* ==========================================================================
   0. Base — typography + surfaces (theme.json vars are the single source of
   truth for color; this file only adds layout/typography the block editor
   can't express and restyles WooCommerce's own default markup).
   ========================================================================= */

body {
  font-family: "Inter", sans-serif;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-surface);
  /* mockup body dung class .antialiased — Windows Chrome mac dinh render
     dam hon ro ret; goc re "font mockup manh/dep hon" (user vong 3). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Vong 13-trang (do-copy): bo co che uppercase/letter-spacing toan cuc —
   TONG-HOP.md xac nhan hau het 13 trang mockup KHONG uppercase heading, chi
   rieng tung ngu canh (label/tab/CTA) moi uppercase theo token label-bold.
   Giu lai font-family Montserrat vi day la dung cho moi token headline-*/
   display-* trong toan bo mockup (xac nhan qua tailwind.config cua nhieu
   trang). font-weight/size/letter-spacing/case gio do tung selector ngu
   canh tu quyet dinh, khop dung so do MOCKUP mobile/desktop tung trang. */
h1, h2, h3, h4,
.wp-block-heading,
.woocommerce-products-header__title,
.product_title {
  font-family: "Montserrat", sans-serif;
}

a {
  text-decoration: none;
}

.wp-block-button__link,
button.button,
.button.add_to_cart_button,
.single_add_to_cart_button,
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   1. Freeship bar — content-width card inside Home, placed after the hero
   (not a global strip: PLP/PDP freeship messaging is out of scope for this
   pass). Hidden on mobile Home per mockup (no equivalent section there).
   ========================================================================= */

.scool-freeship-section {
  margin: 0 0 40px;
}
@media (max-width: 781px) {
  .scool-freeship-section {
    display: none;
  }
}
.scool-freeship-bar-wrap {
  background: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--on-primary);
  text-align: center;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(255, 95, 0, 0.2);
}
/* Home banner: same [scool_freeship_bar] shortcode as Cart/Checkout, but no
   meaningful "progress toward threshold" outside a real cart — collapse the
   progress track/scale, keep just the two message lines as a plain banner. */
.scool-freeship-bar-wrap .scool-freeship-bar__progress {
  display: none;
}
.scool-freeship-bar-wrap .scool-freeship-bar p,
.scool-freeship-bar-wrap .scool-freeship-bar__message {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.scool-freeship-bar-wrap .scool-freeship-bar p:last-child {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  opacity: 0.9;
}

/* Desktop/tablet (finding home#4): thanh cam mảnh full-bleed thay vì thẻ bo
   góc content-width — bỏ khung thẻ sáng lồng bên trong, chỉ giữ 1 dòng
   thông điệp trên nền cam full-width. Ngưỡng 300k không đổi (đọc động từ
   FREESHIP_THRESHOLD_VND, chỉ style). */
@media (min-width: 782px) {
  .scool-freeship-bar-wrap {
    /* !important bắt buộc: WP core `.is-layout-constrained > *` ép
       margin-left/right:auto!important lên trực tiếp phần tử này (con của
       .scool-freeship-section cũng constrained) — không !important thì
       margin tự canh giữa của core thắng, bar bị lệch khỏi mép thật dù
       width đã là 100vw (tràn ra ngoài viewport bên phải). */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 10px 24px;
    border-radius: 0;
    box-shadow: none;
  }
  .scool-freeship-bar-wrap .scool-freeship-bar {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .scool-freeship-bar-wrap .scool-freeship-bar__message {
    color: var(--wp--preset--color--on-primary);
  }
  .scool-freeship-bar-wrap .scool-freeship-bar > p:last-child {
    display: none;
  }
}

/* ==========================================================================
   2. Site header — hand-rolled markup (not wp:navigation/wp:site-title) so
   layout/hamburger match the mockup exactly; only the mini-cart stays a real
   WooCommerce block so AJAX cart keeps working.
   ========================================================================= */

/* Utility bar — bám mockup/menu (docs/plan/06 mục A.1): trái Hotline (placeholder
   thật cho tới khi user cung cấp số), phải 2 link thật (tra-cứu-đơn/size-guide).
   Màu slate-* dưới đây là màu thật đo bằng Playwright từ mockup/menu/code.html —
   không có token warm on-surface-variant nào khớp nên dùng hex trực tiếp, theo
   đúng tiền lệ "chưa đăng ký theme.json vẫn kèm giá trị thật" của commit 6c188e4. */
.scool-header__utility {
  display: none;
  background: #f8fafc;
  color: #334155;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 0 40px;
  height: 36px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
}
.scool-header__utility-hotline strong {
  font-weight: 700;
  color: #0f172a;
}
.scool-header__utility-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.scool-header__utility-links a {
  color: #475569;
  font-weight: 400;
}
.scool-header__utility-links a:hover {
  color: var(--wp--preset--color--primary-container);
}
.scool-header__utility-links span[aria-hidden] {
  color: #cbd5e1;
}
@media (min-width: 1100px) {
  .scool-header__utility {
    display: flex;
  }
}

.scool-site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "brand nav . actions";
  align-items: center;
  column-gap: 24px;
  /* KHONG dung backdrop-filter o day: (1) blur chay lai moi frame cuon lam
     trang giat/nang; (2) filter bien header thanh containing block cho
     position:fixed -> drawer #scool-mobile-nav (inset:0) bi nhot trong
     header 120px thay vi phu man hinh. Nen duc 0.97 thay the. */
  background: rgba(247, 249, 251, 0.97);
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  padding: 14px 40px !important;
}
/* Mid corridor (tablet 1024 / laptop 1280 without room for a 7-item nav
   row): reuse the same hamburger/drawer shell as mobile instead of letting
   the nav wrap into a broken second row — finding F-01. Grid becomes
   hamburger|logo-centered|actions (finding F-02) instead of desktop's
   brand|nav|spacer|actions. */
@media (max-width: 1099px) {
  .scool-site-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "burger brand actions";
  }
  .scool-header__brand {
    justify-content: center;
  }
  .scool-header__nav {
    /* Base rule .scool-header__nav (khai bao SAU block nay trong file) se de
       nguoc cascade neu khong co !important — bug thu tu rule da gap o melon. */
    display: none !important;
  }
  .scool-header__hamburger {
    display: flex !important;
  }
}
@media (max-width: 781px) {
  .scool-site-header {
    padding: 12px 16px !important;
  }
}

.scool-header__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scool-header__logo {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: 26px;
  color: var(--wp--preset--color--on-surface);
}
.scool-header__logo-dot {
  color: var(--wp--preset--color--primary-container);
}
/* ≥1100px (corridor thật của desktop nav, xem F-01/F-02): logo đổi sang đúng
   computed style đo từ mockup/menu — thường "scool.vn" toàn cam, không viết
   hoa, kèm chấm tròn trang trí sau chữ (mockup dùng span rỗng bg-primary,
   ở đây dùng ::after để khỏi phải sửa markup 3 file header/cart-header/
   checkout-header đang dùng chung class này). */
@media (min-width: 1100px) {
  .scool-header__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 30px;
    letter-spacing: -0.05em;
    text-transform: lowercase;
    color: var(--wp--preset--color--primary-container);
  }
  .scool-header__logo::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    align-self: center;
  }
  .scool-header__logo-dot,
  .scool-header__logo-vn {
    color: inherit;
  }
}
.scool-header__hamburger {
  grid-area: burger;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  /* Drawer phu toan man hinh z-index 60 — hamburger phai noi tren de con
     bam dong duoc menu (drawer khong co nut dong rieng). */
  position: relative;
  z-index: 70;
}
.scool-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--on-surface);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Khi drawer mo, hamburger bien thanh nut X de nguoi dung biet cach dong. */
.scool-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.scool-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.scool-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.scool-header__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* <1100px: shell hamburger/drawer dung (F-01 o tren da an .scool-header__nav
   toan bo), nen toan bo CSS duoi day chi can ap dung tu 1100px. Duoi nguong
   do, [scool_main_nav] van render ra DOM (SSR/SEO) nhung bi display:none. */
@media (min-width: 1100px) {
  .scool-header__nav-sale {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f97316;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.025em;
  }
  .scool-header__nav-sale:hover {
    background: #e05300;
  }

  /* Khong position:relative o day: .scool-mega ben duoi can noi voi
     .scool-site-header (position:sticky, da la containing block san co) de
     canh giua CA HEADER, khong phai canh giua rieng item hep "Nu"/"Nam". */
  .scool-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
  }
  .scool-header__nav-item > .scool-header__nav-link {
    font-weight: 900;
  }
  .scool-header__nav-caret {
    color: #94a3b8;
    transition: transform 0.15s ease;
  }
  .scool-header__nav-link:hover,
  .scool-header__nav-item.is-open > .scool-header__nav-link {
    color: var(--wp--preset--color--primary-container);
  }
  .scool-header__nav-item.is-open > .scool-header__nav-link .scool-header__nav-caret {
    color: var(--wp--preset--color--primary-container);
    transform: rotate(180deg);
  }

  /* -- Mega-menu panel (mockup/menu mục A.3) ------------------------------ */
  .scool-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    width: min(1040px, 92vw);
    margin-top: 1px;
    padding: 32px;
    background: #fff;
    border-bottom: 2px solid var(--wp--preset--color--primary-container);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    grid-template-columns: 4fr 3fr 2fr 3fr;
    gap: 32px;
  }
  .scool-header__nav-item.is-open .scool-mega {
    display: grid;
  }
  .scool-mega__col {
    border-right: 1px solid #f1f5f9;
    padding-right: 24px;
  }
  .scool-mega__col--banner {
    border-right: none;
    padding-right: 0;
  }
  .scool-mega__col h3 {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .scool-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .scool-mega__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
  }
  .scool-mega__item:hover {
    color: var(--wp--preset--color--primary-container);
  }
  .scool-mega__item--hot {
    font-weight: 700;
    color: var(--wp--preset--color--primary-container);
    background: rgba(255, 247, 237, 0.6);
    padding: 4px 10px;
    margin: 0 -10px;
    border-radius: 6px;
  }
  .scool-mega__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e05300;
    background: #fed7aa;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .scool-mega__needs {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .scool-mega__need {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    color: inherit;
  }
  .scool-mega__need:hover {
    border-color: #fed7aa;
    background: rgba(255, 247, 237, 0.4);
  }
  .scool-mega__need-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff3eb;
    font-size: 16px;
  }
  .scool-mega__need-title {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
  }
  .scool-mega__need-reason {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: #94a3b8;
  }

  .scool-mega__quick {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .scool-mega__quick a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
  }
  .scool-mega__quick a:hover {
    color: var(--wp--preset--color--primary-container);
  }
  .scool-mega__quick-sale {
    color: #e11d48 !important;
  }
  .scool-mega__price-note {
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    font-family: "Montserrat", sans-serif;
  }
  .scool-mega__price-note span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 2px;
  }
  .scool-mega__price-note strong {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
  }

  .scool-mega__banner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 260px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #fed7aa;
    background: linear-gradient(to bottom, #fff7ed, #fff, #ffedd5);
    color: inherit;
  }
  .scool-mega__banner-badge {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .scool-mega__banner-title {
    margin-top: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.4;
    color: #0f172a;
  }
  .scool-mega__banner-sub {
    margin-top: 2px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: #64748b;
  }
  .scool-mega__banner-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
  }
  .scool-mega__banner-img img {
    max-height: 128px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.15));
  }
  .scool-mega__banner-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 178, 102, 0.6);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: var(--wp--preset--color--primary-container);
  }
}

.scool-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* -- Search: icon dropdown thanh, mo form GET that (khong con placeholder
   "Sap co"), dong khi click ngoai / Esc — assets/mega-menu.js. --------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* <1100px: Phan 2 (header mobile + search co dinh + drawer) se thay the
   bang thanh tim kiem mong rieng duoi header + loi vao tai khoan trong
   drawer (dung mockup/menu muc B/C) — an o day de khoi chong/tran voi logo
   giua trong luc cho, KHONG phai xoa tinh nang. */
@media (max-width: 1099px) {
  .scool-header__actions .scool-header__search-wrap,
  .scool-header__actions .scool-header__account {
    display: none;
  }
}
.scool-header__search-wrap {
  position: relative;
}
.scool-header__search-form {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
  z-index: 46;
}
.scool-header__search-wrap.is-open .scool-header__search-form {
  display: block;
}
.scool-header__search-form input[type="search"] {
  width: 260px;
  max-width: 70vw;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
}

.scool-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--wp--preset--color--on-surface);
}
.scool-header__icon:hover {
  color: var(--wp--preset--color--primary-container);
  background: var(--wp--preset--color--surface-container-low);
}

.scool-header__wishlist {
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}
.scool-header__wishlist.is-active {
  color: var(--wp--preset--color--error);
}
.scool-header__wishlist.is-active svg {
  fill: currentColor;
}
.scool-header__wishlist-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--on-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.scool-header__cart .wc-block-mini-cart__button,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
  color: var(--wp--preset--color--on-surface);
}
.scool-header__cart .wc-block-mini-cart__quantity-badge,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge {
  background: var(--wp--preset--color--primary-container);
}

/* ==========================================================================
   2a. Search co dinh duoi header + drawer toan man hinh (mockup/menu muc
   B/C, Viec 2/4) — chi <1100px, desktop dung icon-dropdown cua Viec 1/4.
   Ca 2 nam trong parts/header.html o cap top-level cua template-part nen
   thanh search "dinh" theo dung header nho sticky dat o WRAPPER
   header.wp-block-template-part (khong tu sticky rieng o day).
   ========================================================================= */
.scool-header__search-bar {
  display: none;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 16px 10px;
}
@media (max-width: 1099px) {
  .scool-header__search-bar {
    display: block;
  }
}
.scool-header__search-bar form {
  position: relative;
  display: flex;
  align-items: center;
}
.scool-header__search-bar svg {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
}
.scool-header__search-bar input[type="search"] {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
.scool-header__search-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary-container);
  background: #fff;
}

.scool-header__mobile-panel {
  display: none;
}
@media (max-width: 1099px) {
  .scool-header__mobile-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .scool-header__mobile-panel.is-open {
    display: flex;
    transform: translateX(0);
  }

  .scool-drawer__header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
  }
  .scool-drawer__logo {
    margin: 0 !important;
  }
  .scool-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    padding: 0;
  }
  .scool-drawer__close:hover {
    background: #e2e8f0;
  }

  .scool-drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scool-drawer__search {
    padding: 16px;
    background: rgba(248, 250, 252, 0.7);
    border-bottom: 1px solid #f1f5f9;
  }
  .scool-drawer__search form {
    position: relative;
    display: flex;
    align-items: center;
  }
  .scool-drawer__search svg {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
  }
  .scool-drawer__search input[type="search"] {
    width: 100%;
    padding: 10px 16px 10px 36px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
  }
  .scool-drawer__search input[type="search"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary-container);
  }

  .scool-drawer__section {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
  }
  .scool-drawer__label {
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .scool-drawer__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
  }
  .scool-drawer__pill {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
  }
  .scool-drawer__pill--sale {
    background: #f97316;
    font-weight: 900;
    color: #fff;
  }

  .scool-drawer__accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
  }
  .scool-drawer__accordion-item + .scool-drawer__accordion-item {
    margin-top: 8px;
  }
  .scool-drawer__accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: none;
    background: none;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
  }
  .scool-drawer__accordion-caret {
    color: #94a3b8;
    transition: transform 0.15s ease;
    flex: none;
  }
  .scool-drawer__accordion-trigger[aria-expanded="true"] {
    background: #fff7ed;
    font-weight: 900;
    color: var(--wp--preset--color--primary-container);
  }
  .scool-drawer__accordion-trigger[aria-expanded="true"] .scool-drawer__accordion-caret {
    color: var(--wp--preset--color--primary-container);
    transform: rotate(180deg);
  }
  .scool-drawer__accordion-panel {
    padding: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .scool-drawer__accordion-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .scool-drawer__accordion-group-label {
    margin-bottom: 6px;
    padding-left: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
    border-left: 2px solid var(--wp--preset--color--primary-container);
  }
  .scool-drawer__style-item {
    padding: 6px 8px;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
  }
  .scool-drawer__style-item--hot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--wp--preset--color--primary-container);
    background: #fff7ed;
  }
  .scool-drawer__need-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 8px;
    background: #f8fafc;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
  }

  .scool-drawer__link {
    display: block;
    padding: 8px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }

  .scool-drawer__account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
  }
  .scool-drawer__account-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
  }

  .scool-drawer__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px;
    background: rgba(241, 245, 249, 0.8);
  }
  .scool-drawer__contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
  }
  .scool-drawer__contact-btn--zalo {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
}

/* ==========================================================================
   3. Home — hero (real product photo background + editorial overlay)
   ========================================================================= */

/* Height is an explicit value per breakpoint (not min-height + flex
   content-flow) and the copy block is pinned via absolute positioning
   instead of flex align-items:flex-end — this guarantees the bg image
   always fills the exact box (no gray dead zone) and the copy never
   depends on where the image's own content happens to sit — finding F-03. */
.scool-hero {
  position: relative;
  overflow: hidden;
  height: 560px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 0 0 32px 32px;
  padding: 0 !important;
  margin-bottom: 0;
}
.scool-hero-bg-wrap {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none !important;
}
.scool-hero-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.scool-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(25, 28, 30, 0.88) 0%, rgba(25, 28, 30, 0.35) 55%, rgba(25, 28, 30, 0.05) 100%);
}
.scool-hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  padding: 32px 24px !important;
  max-width: 640px;
}
.scool-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary-container);
  margin-bottom: 16px;
}
.scool-hero__eyebrow-line {
  width: 40px;
  height: 2px;
  background: var(--wp--preset--color--primary-container);
}
.scool-hero .wp-block-heading {
  color: #fff;
  /* mockup trang-chu: text-[48px] md:text-[84px] leading-[0.9] tracking-tighter */
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.scool-hero__accent {
  color: var(--wp--preset--color--primary-container);
}
.scool-hero__velocity {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 900;
  /* mockup: text-outline-variant opacity-50, text-[40px] md:text-[72px] italic */
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.scool-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  max-width: 480px;
  border-left: 4px solid var(--wp--preset--color--primary-container);
  padding-left: 16px;
  margin-bottom: 24px;
}
.scool-hero .wp-block-buttons {
  gap: 16px;
}
.scool-hero .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--on-surface);
  padding: 16px 40px;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.scool-hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: none;
  padding: 16px 0;
  box-shadow: none;
  text-decoration: none;
}
.scool-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--primary-container);
}
@media (min-width: 782px) {
  .scool-hero {
    height: 640px;
    border-radius: 0 0 48px 48px;
  }
  .scool-hero__content {
    padding: 0 40px 64px !important;
  }
}
@media (min-width: 1024px) {
  .scool-hero {
    height: 680px;
  }
}
@media (min-width: 1280px) {
  .scool-hero {
    height: 720px;
  }
  .scool-hero__content {
    padding: 0 40px 80px !important;
  }
}

/* ==========================================================================
   4. Home — category collage (asymmetric, real photos: Nam wide left,
   Nữ tall right, Trẻ em circle overlapping)
   ========================================================================= */

.scool-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 40px 0 !important;
}
.scool-cat-tile__wrap {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none !important;
}
.scool-cat-tile__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
}
.scool-cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scool-cat-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.scool-cat-tile__caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 1;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 24px;
}

.scool-categories > .scool-cat-tile {
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden;
}
.scool-cat-tile--nam {
  grid-column: 1 / -1;
  height: 220px;
  border-radius: 28px;
}
.scool-cat-tile--nu {
  height: 200px;
  border-radius: 24px;
}
.scool-cat-tile--treem {
  height: 200px;
  /* Finding home#1 (mobile): dạng blob hữu cơ thay vì bo góc chữ nhật —
     desktop giữ border-radius:50% riêng (media query bên dưới). */
  border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
}
/* Caption căn giữa cho vừa dạng blob (bottom-left mặc định bị cắt bởi mép
   cong) — cùng cách desktop đã làm cho hình tròn 782px+. */
.scool-cat-tile--treem .scool-cat-tile__caption {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  font-size: 16px;
}

.scool-cat-tile__eyebrow {
  display: block;
  color: var(--wp--preset--color--primary-container);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
/* Finding home#1 (mobile): nút tròn mũi tên trên card Nam — chỉ render khi
   shortcode nhận att `eyebrow` (hiện chỉ dùng cho Nam), ẩn lại ở desktop
   trong media query bên dưới vì mockup desktop không có nút này. */
.scool-cat-tile__arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--on-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Desktop/tablet collage: Nam tall left spanning both rows, Nữ upper-right,
   Trẻ em circle lower-right — grid-area (not fixed-px flex widths) so the
   circle's 220px never has to fight a percentage remainder for room, which
   is what pushed it past the right edge at 1024px before (finding #4). */
@media (min-width: 782px) {
  .scool-categories {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "nam nu"
      "nam treem";
    align-items: stretch;
    gap: 24px 32px;
    min-height: 560px;
  }
  .scool-cat-tile--nam {
    grid-area: nam;
    width: auto;
    height: 100%;
    border-radius: 32px;
  }
  .scool-cat-tile--nu {
    grid-area: nu;
    width: auto;
    height: 340px;
    align-self: start;
    border-radius: 40px;
  }
  .scool-cat-tile--treem {
    grid-area: treem;
    width: 220px;
    height: 220px;
    max-width: 100%;
    align-self: end;
    justify-self: start;
    margin-top: -48px !important;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    border: 8px solid var(--wp--preset--color--surface);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
  .scool-cat-tile--treem .scool-cat-tile__caption {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
  }
  .scool-cat-tile__caption {
    font-size: 32px;
  }
  .scool-cat-tile--treem .scool-cat-tile__caption {
    font-size: 18px;
  }
  .scool-cat-tile__eyebrow,
  .scool-cat-tile__arrow {
    display: none;
  }
}

/* ==========================================================================
   4b. Home — Bestsellers (asymmetric: 1 big card + 2 rows + 1 dark promo)
   ========================================================================= */

.scool-bestsellers {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 32px;
  padding: 40px 24px !important;
  margin: 0 0 40px;
}
.scool-bestsellers__head {
  gap: 16px !important;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.scool-bestsellers__head h2 {
  /* mockup: text-5xl md:text-7xl uppercase tracking-tighter leading-none */
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.scool-bestsellers__head p {
  color: var(--wp--preset--color--on-surface-variant);
  border-left: 4px solid var(--wp--preset--color--primary-container);
  padding-left: 12px;
}
.scool-bestsellers__viewall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface);
}
.scool-bestsellers__viewall:hover {
  color: var(--wp--preset--color--primary-container);
}

.scool-bs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.scool-bs-big-wrap {
  display: contents;
}
.scool-bs-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scool-bs-big {
  position: relative;
  display: block;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px rgba(25, 28, 30, 0.1);
  aspect-ratio: 4 / 3;
}
.scool-bs-big__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scool-bs-big__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border-radius: 999px;
}
.scool-bs-big__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
}
.scool-bs-big__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
}
.scool-bs-big__price {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}
.scool-bs-big__price del {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  margin-left: 6px;
}

.scool-bs-row {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 6px 16px rgba(25, 28, 30, 0.06);
}
.scool-bs-row__img {
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--wp--preset--color--surface-container-low);
}
.scool-bs-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scool-bs-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  color: var(--wp--preset--color--on-surface);
}
.scool-bs-row__name {
  font-weight: 700;
  font-size: 15px;
}
.scool-bs-row__price {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--wp--preset--color--primary);
}
.scool-bs-row__price del {
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 6px;
}

.scool-bs-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--wp--preset--color--on-surface);
  color: #fff;
  border-radius: 24px;
  padding: 20px 24px;
  overflow: hidden;
}
.scool-bs-promo__name {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 6px;
}
.scool-bs-promo__price {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
  margin-bottom: 12px;
}
.scool-bs-promo__price del {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  margin-left: 6px;
}
.scool-bs-promo__cta {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scool-bs-promo__img {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.9;
}

/* Mobile: uniform 2x2 shopping grid of all 4 bestsellers (mockup shows 4
   products immediately) instead of 1 big hero tile + a row/promo list —
   finding F-04. Same 4 real products/prices from shortcode_bestsellers(),
   just restyled as equal product-card tiles: image on top, name+price
   below, no dark overlay/promo banner treatment on mobile. */
@media (max-width: 781px) {
  .scool-bs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 32px;
  }
  .scool-bs-side {
    display: contents;
  }
  /* Staggered grid like mockup (mobile/code.html translate-y-8 on cards
     2 and 4): right column sits lower than left. Flattened grid order via
     display:contents above is big(1) / row-card#1(2) / row-card#2(3) /
     promo(4), so the right column is row-card#1 (.scool-bs-side's
     first-child) and the lone .scool-bs-promo — row-gap bumped to 32px so
     the transform never overlaps the row below. */
  .scool-bs-side > .scool-bs-row:first-child,
  .scool-bs-promo {
    transform: translateY(24px);
  }
  .scool-bs-big,
  .scool-bs-row,
  .scool-bs-promo {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    aspect-ratio: auto;
    height: auto;
    border-radius: 16px;
    padding: 0;
    background: #fff;
    color: var(--wp--preset--color--on-surface);
    box-shadow: 0 6px 16px rgba(25, 28, 30, 0.06);
  }
  .scool-bs-big__img,
  .scool-bs-row__img,
  .scool-bs-promo__img {
    display: block;
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 1;
  }
  .scool-bs-big__badge {
    top: 10px;
    left: 10px;
  }
  .scool-bs-big__overlay,
  .scool-bs-row__body,
  .scool-bs-promo__body {
    position: static;
    background: none;
    padding: 10px 12px 12px;
    gap: 2px;
    color: inherit;
  }
  .scool-bs-big__name,
  .scool-bs-row__name,
  .scool-bs-promo__name {
    font-size: 14px;
    color: inherit;
  }
  .scool-bs-big__price,
  .scool-bs-promo__price {
    color: var(--wp--preset--color--error);
  }
  .scool-bs-big__price del,
  .scool-bs-promo__price del {
    color: var(--wp--preset--color--on-surface-variant);
  }
  .scool-bs-promo__cta {
    display: none;
  }
}

@media (min-width: 782px) {
  .scool-bestsellers {
    padding: 56px !important;
  }
  .scool-bs-grid {
    grid-template-columns: 7fr 5fr;
    gap: 24px;
  }
  .scool-bs-big {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ==========================================================================
   4c. Home — Service highlight cards (3-up, center accent raised)
   ========================================================================= */

.scool-services {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 40px;
}
.scool-service-card {
  border-radius: 32px;
  padding: 32px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scool-service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scool-service-card h4 {
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.scool-service-card--light {
  background: #fff;
  box-shadow: 0 8px 20px rgba(25, 28, 30, 0.06);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-service-card--light .scool-service-card__icon {
  background: var(--wp--preset--color--surface-container-high);
  color: var(--wp--preset--color--on-surface);
}
.scool-service-card--light p {
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-service-card--accent {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  box-shadow: 0 16px 32px rgba(255, 95, 0, 0.25);
}
.scool-service-card--accent h4 {
  color: #fff;
}
.scool-service-card--accent .scool-service-card__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.scool-service-card--accent p {
  color: rgba(255, 255, 255, 0.85);
}
.scool-service-card--dark {
  background: var(--wp--preset--color--on-surface);
  color: #fff;
}
.scool-service-card--dark .scool-service-card__icon {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.scool-service-card--dark p {
  color: rgba(255, 255, 255, 0.6);
}

/* Mobile trust anchor: gradient dark card with icon + headline + copy,
   replacing the flat accent card (finding #5, 04-09 audit) — light/dark
   cards were already hidden on mobile, now accent is too since the
   dedicated .scool-trust-anchor block below carries the mobile message. */
.scool-trust-anchor {
  display: none;
}
@media (max-width: 781px) {
  .scool-service-card--light,
  .scool-service-card--accent,
  .scool-service-card--dark {
    display: none;
  }
  .scool-trust-anchor {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 32px !important;
    margin: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, var(--wp--preset--color--on-surface) 0%, var(--wp--preset--color--on-surface-variant) 100%);
    box-shadow: 0 20px 40px rgba(25, 28, 30, 0.25);
  }
  .scool-trust-anchor::before,
  .scool-trust-anchor::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
  }
  .scool-trust-anchor::before {
    top: -48px;
    right: -48px;
    background: var(--wp--preset--color--primary-container);
    opacity: 0.6;
  }
  .scool-trust-anchor::after {
    bottom: -48px;
    left: -48px;
    background: var(--wp--preset--color--outline-variant);
    opacity: 0.35;
  }
  .scool-trust-anchor__icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 95, 0, 0.5);
    background: rgba(255, 255, 255, 0.1);
    color: var(--wp--preset--color--primary-container);
    margin-bottom: 16px;
  }
  .scool-trust-anchor__headline {
    position: relative;
    z-index: 1;
    font-size: 28px;
    line-height: 1.15;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 8px;
  }
  .scool-trust-anchor__accent {
    color: var(--wp--preset--color--primary-container);
  }
  .scool-trust-anchor p {
    position: relative;
    z-index: 1;
    max-width: 250px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
  }
}

@media (min-width: 782px) {
  .scool-services {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    max-width: 1080px;
    margin: 0 auto 40px;
  }
  .scool-service-card {
    flex: 1;
  }
  .scool-service-card--light {
    transform: translateY(-16px);
  }
  .scool-service-card--accent {
    transform: scale(1.08);
    z-index: 1;
  }
  .scool-service-card--dark {
    transform: translateY(24px);
  }
}

/* ==========================================================================
   5. Product cards — shared by Home bestsellers `[products]` shortcode AND
   PLP archive grid (both render the same `ul.products li.product` markup via
   WooCommerce's loop template, so one ruleset styles both surfaces).
   ========================================================================= */

.wc-block-grid__products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
@media (min-width: 768px) {
  .wc-block-grid__products,
  ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}
/* WooCommerce core ships a `content:" "; display:table` clearfix on
   `ul.products::before/::after` for its legacy float grid. Inside our CSS
   Grid container that generated pseudo-element still becomes a real grid
   item (the first one, since ::before comes first in DOM), silently
   occupying column 1 of row 1 and shoving every actual product card one
   column to the right — visible as an empty top-left cell. Kill it. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  /* Woo core selector co dac hieu .woocommerce ul.products::before cao hon
     ul.products::before nen rule cu thua cascade — phai nang dac hieu + !important. */
  content: none !important;
  display: none !important;
}

ul.products li.product {
  /* WooCommerce core CSS still ships a legacy float-grid width (e.g. ~22%)
     on li.product for browsers without our CSS grid rules. Inside an actual
     grid item that percentage resolves against the column track (already
     1/4 of the row), compounding into a tiny card — override it so the
     item fills its grid cell instead. */
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
ul.products li.product > a {
  display: flex;
  flex-direction: column;
  color: inherit;
}
ul.products li.product:hover {
  box-shadow: 0 12px 28px rgba(25, 28, 30, 0.12);
  transform: translateY(-2px);
}
ul.products li.product a img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--wp--preset--color--surface-container-low);
  margin: 0 !important;
}
ul.products li.product .onsale {
  display: none;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: "Inter", sans-serif;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  padding: 12px 12px 0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
ul.products li.product .price {
  display: block;
  padding: 6px 12px 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--wp--preset--color--primary);
}
ul.products li.product .price del {
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 6px;
}
ul.products li.product .price ins {
  text-decoration: none;
}
ul.products li.product .button,
ul.products li.product a.add_to_cart_button {
  display: block;
  margin: 0;
  width: 100%;
  text-align: center;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  padding: 10px 12px;
  font-size: 12px;
  border-radius: 999px;
}
ul.products li.product .button:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
}

/* -- Mobile card compaction (dot2 finding: title/card noticeably larger
   than mockup's tighter 2-col rhythm — tokens 13-16px per audit) -------- */
@media (max-width: 767px) {
  .wc-block-grid__products,
  ul.products {
    gap: 12px;
  }
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 12.5px;
    line-height: 1.3;
    padding: 8px 10px 0;
  }
  ul.products li.product .price {
    font-size: 14px;
    padding: 3px 10px 2px;
  }
  ul.products li.product .scool-card-meta {
    padding: 6px 10px 0;
    gap: 4px;
  }
  ul.products li.product .scool-card-stock {
    margin: 1px 10px 6px;
  }
}

.scool-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.scool-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.scool-badge--ban-chay { background: var(--wp--preset--color--on-surface); }
.scool-badge--giam-gia { background: var(--wp--preset--color--error); }
.scool-badge--sap-het { background: var(--wp--preset--color--on-surface-variant); }

/* Badge vàng "kiểu chợ" (Hạng mục 4 CRO — chỉ sale thật >=5%, 1 badge/SKU).
   Vàng hardcode CÓ CHỦ ĐÍCH: bản sắc nhãn giá chợ MediaMart, palette site
   không có token vàng — không dùng lại cho bất kỳ thành phần nào khác. */
.scool-badge--flash {
  background: #ffd60a;
  color: #191c1e;
  font-size: 13px;
  border-radius: 6px;
  padding: 5px 10px;
  text-align: center;
}
.scool-badge--flash small {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.scool-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--on-surface-variant);
}

/* -- BenefitChips (Hạng mục 2 CRO — tối đa 2 chip/card) ----------------- */
.scool-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 0;
}
.scool-card-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--wp--preset--color--primary-container);
  background: var(--wp--preset--color--surface-container-highest);
}

/* -- "Mua kèm = freeship" hint (Hạng mục 1 CRO, giá 200-299k) ----------- */
.scool-card-freeship-hint {
  display: inline-block;
  margin: 2px 12px 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}

/* ==========================================================================
   6. Situation chips / price bands / PLP filters / sort — pill controls
   ========================================================================= */

.scool-situation-chips,
.scool-plp-related-categories,
.scool-plp-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.scool-chip {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--wp--preset--color--on-surface);
  font-size: 14px;
  font-weight: 600;
  background: var(--wp--preset--color--surface-container-lowest);
}
.scool-chip:hover {
  border-color: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
}

/* plp-9: sort as a real <select>+label+submit form (was pill links) */
.scool-plp-sort__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
  white-space: nowrap;
}
.scool-plp-sort__select {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface);
  background: var(--wp--preset--color--surface-container-lowest);
}
/* Finding plp#7: JS auto-submit đã đủ, ẩn nút "Áp dụng" thừa — chỉ khi JS
   thật sự gắn được listener (form có class .scool-plp-sort--js, xem
   plp-drawer.js); không JS thì selector không khớp, nút vẫn hiện làm
   fallback submit duy nhất. */
.scool-plp-sort--js .scool-plp-sort__apply {
  display: none;
}
.scool-plp-sort__apply {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
  background: var(--wp--preset--color--surface-container-lowest);
  cursor: pointer;
}

.scool-price-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.scool-price-band {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--wp--preset--color--on-surface);
  font-size: 13px;
  font-weight: 600;
  background: var(--wp--preset--color--surface-container-lowest);
}
.scool-price-band.is-active {
  border-color: var(--wp--preset--color--primary-container);
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}

.scool-plp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 16px;
}
.scool-plp-filter {
  border: none;
  padding: 0;
  margin: 0;
}
.scool-plp-filter legend {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--on-surface-variant);
  margin-bottom: 6px;
}
.scool-plp-filter__option {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface);
  background: var(--wp--preset--color--surface-container-lowest);
}
.scool-plp-filter__option.is-active {
  border-color: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  font-weight: 700;
}

/* plp-8: sidebar filter form — Size/Màu checkboxes + Khoảng giá radios,
   one "Áp dụng" button submits all three together */
.scool-plp-filter-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.scool-plp-filter-form .scool-plp-filter {
  margin: 0;
}
.scool-plp-filter__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface);
  cursor: pointer;
}
.scool-plp-filter__checkbox:last-child {
  margin-bottom: 0;
}
.scool-plp-filter-form__apply {
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--wp--preset--color--on-surface);
  cursor: pointer;
}

.scool-plp-toolbar {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 20px !important;
  margin-bottom: 24px;
}

/* Native WooCommerce breadcrumb/title/sorting on the archive template */
.woocommerce-breadcrumb {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 13px;
  margin-bottom: 8px;
}
.woocommerce-breadcrumb a {
  color: var(--wp--preset--color--on-surface-variant);
}
.woocommerce-products-header__title.page-title {
  font-size: 28px;
  margin-bottom: 16px;
}
.woocommerce-ordering {
  display: none;
}
.woocommerce-result-count {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
}
nav.woocommerce-pagination ul {
  border-color: var(--wp--preset--color--outline-variant);
}
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  color: var(--wp--preset--color--on-surface);
}
nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li span.current {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}

/* ==========================================================================
   7. Home — testimonials (desktop) / #SCOOL Vibes carousel (mobile) /
   need-finder (image strip desktop, dark chip panel mobile) / SEO text
   ========================================================================= */

.scool-testimonials {
  margin: 0 0 40px;
  display: none;
}
.scool-testimonial-grid {
  gap: 20px !important;
  flex-wrap: wrap;
  margin-top: 24px;
}
.scool-testimonial-card {
  flex: 1 1 260px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 24px;
  padding: 28px !important;
  box-shadow: 0 8px 20px rgba(25, 28, 30, 0.05);
}
.scool-testimonial-card__stars {
  display: block;
  color: var(--wp--preset--color--primary-container);
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.scool-testimonial-card p {
  font-style: italic;
  margin-bottom: 20px;
}
.scool-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.scool-testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.scool-testimonial-card__author strong {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.scool-testimonial-card__author span {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 12px;
}

.scool-vibes {
  margin: 0 0 40px;
}
.scool-vibes h2 {
  margin-bottom: 20px;
  text-transform: uppercase;
}
.scool-vibes-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scool-vibes-track::-webkit-scrollbar {
  display: none;
}
.scool-vibes-card {
  scroll-snap-align: center;
  flex: 0 0 78%;
  background: #fff;
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 24px;
  padding: 16px;
  color: inherit;
  box-shadow: 0 8px 20px rgba(25, 28, 30, 0.05);
}
.scool-vibes-card__img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--wp--preset--color--surface-container-low);
}
.scool-vibes-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Finding home#2: rating badge nổi góc trên-trái ảnh */
.scool-vibes-card__rating {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff;
  color: var(--wp--preset--color--primary-container);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(25, 28, 30, 0.12);
}
.scool-vibes-card__quote {
  display: block;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 16px;
}
/* Finding home#2: avatar + tên tác giả cạnh tag sản phẩm */
.scool-vibes-card__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}
.scool-vibes-card__author {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.scool-vibes-card__author strong {
  font-size: 12px;
}
.scool-vibes-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.scool-vibes-card__handle {
  font-weight: 700;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-vibes-card__tag {
  background: var(--wp--preset--color--surface-container-low);
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
}

@media (min-width: 782px) {
  .scool-testimonials {
    display: block;
  }
  .scool-vibes {
    display: none;
  }
}

.scool-need-finder-section {
  margin: 0 0 40px;
  text-align: center;
}
.scool-need-finder-section h2 {
  margin-bottom: 24px;
  text-transform: uppercase;
}
.scool-need-finder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.scool-need-finder__item {
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scool-need-finder__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  overflow: hidden;
  background: var(--wp--preset--color--surface-container-low);
  box-shadow: 0 8px 20px rgba(25, 28, 30, 0.06);
}
.scool-need-finder__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.scool-need-finder__item:hover .scool-need-finder__img img {
  transform: scale(1.06);
}
.scool-need-finder__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}
/* 1 lý do để tin / zone nhu cầu (Hạng mục 3 CRO) */
.scool-need-finder__reason {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-need-finder-section .scool-situation-chips {
  display: none;
}

@media (min-width: 782px) {
  .scool-need-finder {
    /* 4 zone nhu cầu (Hạng mục 3 CRO) thay 5 category cũ */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

@media (max-width: 781px) {
  .scool-need-finder-section {
    background: var(--wp--preset--color--on-surface);
    color: #fff;
    border-radius: 32px 32px 0 0;
    padding: 48px 20px 40px !important;
    text-align: left;
  }
  .scool-need-finder-section h2 {
    color: #fff;
  }
  /* Finding home#3: mobile hiện đúng 4 zone nhu cầu dạng card có mô tả
     (ảnh + nhãn + lý do) — bộ đã chốt Hạng mục 3 CRO — thay vì 6 pill
     scool_situation_chips (legacy style-category shortcut). */
  .scool-need-finder-section .scool-need-finder__label,
  .scool-need-finder-section .scool-need-finder__reason {
    color: #fff;
  }
  .scool-need-finder-section .scool-need-finder__reason {
    opacity: 0.72;
  }
  .scool-need-finder-section .scool-situation-chips {
    display: none;
  }
}

.scool-seo-text {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 24px;
  padding: 32px !important;
  color: var(--wp--preset--color--on-surface-variant);
  text-align: center;
  margin: 0 0 40px;
}

/* ==========================================================================
   8. PDP — badges strip / proof / delivery info / specs / reviews / sticky
   ========================================================================= */

/* -- Gallery + summary 2-col layout (mockup lg:col-span-7 / lg:col-span-5) -
   Finding pdp#8 đổi breakpoint 2 cột từ 1200 (quyết định cũ finding F-07,
   "narrow strip" ở 1024/1280) xuống đúng 1024 theo yêu cầu mới nhất, đồng
   thời đổi flex 55/40 (xấp xỉ) sang CSS Grid 7fr/5fr đúng tỉ lệ mockup
   lg:col-span-7/5. Verify Playwright thực tế ở 1024 xác nhận summary vẫn đủ
   chỗ (~380px) cho title/size/CTA, không còn bị bóp như lo ngại cũ. */
.single-product div.product {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 40px;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .single-product div.product {
    grid-template-columns: 7fr 5fr;
  }
}
/* float/width !important bắt buộc: WooCommerce nạp woocommerce-layout.css
   (layout 2 cột classic float-based, độ đặc thù .woocommerce div.product
   div.images/.summary rất cao vì lặp 3 lớp) đặt sẵn float:left/right +
   width:48% lên đúng 2 phần tử này — không ghi đè thì grid item bị bó hẹp
   còn ~48% cột grid thay vì lấp đầy track thật (đo được 258px/538px ở
   1024px, khớp chính xác 48%). */
.woocommerce-product-gallery {
  width: auto !important;
  float: none !important;
  max-width: 640px;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--wp--preset--color--surface-container-low);
}
div.summary.entry-summary {
  width: auto !important;
  float: none !important;
  clear: none;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .woocommerce-product-gallery,
  div.summary.entry-summary {
    max-width: none;
    margin-inline: 0;
  }
}
/* Finding pdp#9: mobile gallery gần full-bleed — thoát khỏi padding-inline
   của .single-product div.product bằng margin âm đúng bằng padding đó, chỉ
   ở mobile thật (khớp quy ước 781px dùng xuyên suốt theme); tablet/laptop
   xếp dọc (782–1023) vẫn giữ khung căn giữa như trước. */
@media (max-width: 781px) {
  .woocommerce-product-gallery {
    margin-inline: calc(-1 * clamp(16px, 3vw, 40px));
    max-width: none;
    border-radius: 0;
  }
}
.woocommerce-product-gallery__wrapper img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Desktop/tablet: 72px thumbnail row (was a 4-col 1fr grid — with a 640px
   gallery that computed to ~150px tiles, oversized next to the mockup's
   compact strip). Fixed tile width + wrap instead of dividing the column
   into quarters, so it stays 72px regardless of how many gallery photos a
   SKU has. This theme is treated as an FSE/block theme by WooCommerce
   (`wp_is_block_theme()` true), which auto force-enables
   `wc-product-gallery-slider` support for it regardless of what functions.php
   declares — so the bundled Flexslider library is always active and
   generates `.flex-control-thumbs` itself; `li.flex-active` is the real
   class Flexslider assigns to the current thumbnail. */
.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-thumbs li {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}
.flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flex-control-thumbs li.flex-active {
  border-color: var(--wp--preset--color--primary-container);
}

/* Real badge overlay (Bán chạy/Giảm giá/Sắp hết) replaces Woo's default
   circular ".onsale" ribbon — mockup shows one rectangular tag on the image. */
.single-product .onsale {
  display: none;
}
.woocommerce-product-gallery {
  position: relative;
}
.scool-pdp-gallery-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scool-pdp-gallery-badges .scool-badges {
  position: static;
  flex-direction: row;
}
.scool-pdp-gallery-ribbon {
  display: none;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  background: var(--wp--preset--color--tertiary-container, var(--wp--preset--color--on-surface));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* -- Mobile gallery: swipe is Flexslider's own transform-driven carousel
   (it's always active on this theme — see comment above `.flex-control-thumbs`
   — and already handles touch dragging; CSS must not fight its `.wrapper`
   inline width/transform with a competing overflow-scroll layout) + the
   thumbnail strip hidden and restyled as plain dot indicators (photos hidden
   via opacity, li kept as the clickable/markable dot target) + the ribbon
   badge above. ------------------------------------------------------- */
@media (max-width: 767px) {
  .scool-pdp-gallery-ribbon {
    display: inline-flex;
  }
  .flex-control-thumbs {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    margin: 0;
    z-index: 5;
  }
  .flex-control-thumbs li {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .flex-control-thumbs li.flex-active {
    background: var(--wp--preset--color--primary-container);
  }
  .flex-control-thumbs li img {
    opacity: 0;
  }
}

div.summary.entry-summary {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
div.summary.entry-summary .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--wp--preset--color--error);
}
div.summary.entry-summary .price del {
  font-size: 18px;
  font-weight: 400;
  color: var(--wp--preset--color--on-surface-variant);
  opacity: 0.7;
}

/* -- Compact star+score+count under the title (Demo-labeled, real avg) -- */
.scool-pdp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scool-star-icons {
  display: inline-flex;
  gap: 2px;
  color: var(--wp--preset--color--surface-container-highest);
}
.scool-star-icon {
  fill: currentColor;
}
.scool-star-icon.is-filled {
  color: var(--wp--preset--color--primary-container);
}
/* Nua sao (mockup star_half): path nen giu mau xam, path phu clip 50%
   to mau cam de len */
.scool-star-icon .scool-star-icon__half {
  fill: var(--wp--preset--color--primary-container);
}
.scool-pdp-rating__score {
  font-weight: 800;
  color: var(--wp--preset--color--on-surface);
}
.scool-pdp-rating__count {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 13px;
}

.single-product .product_title {
  font-size: 26px;
  line-height: 1.25;
}

/* Finding pdp#13: pill đỏ nhỏ cạnh giá (không còn dòng riêng bên dưới —
   xem render_pdp_price_with_savings(), giờ nằm cùng <p class="price">). */
.scool-pdp-savings {
  display: inline-flex;
  align-items: center;
  background: rgba(186, 26, 26, 0.1);
  color: var(--wp--preset--color--error);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* -- TrustBar 3 icon (Hạng mục 2 CRO, ngay dưới giá) --------------------- */
.scool-pdp-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-pdp-trust-bar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}
.scool-pdp-trust-bar__item svg {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary-container);
}

/* -- Giá theo ngày dùng (Hạng mục 5 CRO — chỉ SKU có meta độ bền) -------- */
.scool-pdp-price-per-day {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface);
}
.scool-pdp-price-per-day strong {
  color: var(--wp--preset--color--primary-container);
}
.scool-pdp-price-per-day__note {
  font-size: 11px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* -- Freeship gap widget (Hạng mục 1 CRO, PDP — "Còn thiếu Xđ") --------- */
.scool-pdp-freeship-gap {
  margin: 10px 0 0;
  padding: 12px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 12px;
}
.scool-pdp-freeship-gap__message {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}
.scool-freeship-suggest__items {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.scool-freeship-suggest__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 88px;
  color: inherit;
}
.scool-freeship-suggest__item img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
}
.scool-freeship-suggest__name {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scool-freeship-suggest__price {
  font-size: 11px;
  font-weight: 800;
  color: var(--wp--preset--color--error);
}

.single-product .quantity {
  /* !important: Woo core CSS de display:block nguoc lai — mua 1 mac dinh,
     chinh so luong o gio (mockup 07/09); an qty thi ATC + Mua ngay moi du
     cho nam cung 1 hang o 375px */
  display: none !important;
}

.single-product .product_meta {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 12px;
}
.single-product .product_meta a {
  color: var(--wp--preset--color--on-surface-variant);
  text-decoration: underline;
}

.variations select {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  min-width: 160px;
}
.variations select:focus {
  border-color: var(--wp--preset--color--primary-container);
  outline: none;
}
/* Hidden by assets/variation-chips.js once the chip UI below has taken
   over; stays visible (and usable) if that script fails to load. */
.variations select.scool-visually-hidden {
  position: absolute;
  /* !important: rule width:100% cua Woo/global de nguoc — select an ma
     rong 896px lam docW desktop no 1779px (phat hien 07/09 vong PDP v2) */
  width: 1px !important;
  height: 1px !important;
  left: 0;
  top: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  min-width: 0;
}
.variations td.label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding-right: 12px;
}

.scool-size-guide-link {
  display: inline-block;
  float: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--primary-container);
  text-decoration: underline;
  margin-bottom: 4px;
}

/* PDP — size/color as chips (spec: "chọn size/màu dạng chip") */
.scool-variation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 4px;
  clear: both;
}
.scool-variation-chip {
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--on-surface);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.scool-variation-chip:hover:not(.is-disabled) {
  border-color: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
}
.scool-variation-chip.is-active {
  border: 2px solid var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  background: rgba(255, 95, 0, 0.08);
  font-weight: 800;
}
.scool-variation-chip.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Color swatches: round, filled with the real color, checkmark when active */
.scool-variation-chip--color {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--wp--preset--color--surface-container-highest);
  position: relative;
  flex: 0 0 auto;
}
.scool-variation-chip--color.is-active {
  border-color: var(--wp--preset--color--primary-container);
  background-clip: padding-box;
}
.scool-variation-chip--color.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #fff;
}
.scool-variation-chip--color.is-disabled {
  opacity: 0.3;
}

.woocommerce-variation-availability .stock {
  color: var(--wp--preset--color--error);
  font-weight: 700;
  font-size: 13px;
}

.single_add_to_cart_button,
a.checkout-button {
  width: 100%;
  text-align: center;
  background: var(--wp--preset--color--primary-container) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 32px !important;
  font-size: 15px !important;
  box-shadow: 0 8px 20px rgba(255, 95, 0, 0.3);
}
.single_add_to_cart_button:hover {
  background: var(--wp--preset--color--primary) !important;
}

.scool-buy-now-button {
  width: 100%;
  background: transparent;
  color: var(--wp--preset--color--primary-container);
  border: 2px solid var(--wp--preset--color--primary-container);
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.scool-buy-now-button:hover:not(:disabled) {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}
.scool-buy-now-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Finding pdp#11: desktop đảo style CTA — "Mua ngay" thành primary cam,
   "Thêm vào giỏ hàng" thành viền (mobile giữ nguyên như mockup mobile:
   Thêm vào giỏ đặc trên, Mua ngay viền dưới — không đổi thứ tự DOM/logic
   add-to-cart/buy-now thật, chỉ đảo VỊ TRÍ THỊ GIÁC qua `order` + đổi màu
   qua CSS vì form.cart và .scool-buy-now-button là 2 anh em cùng cấp trong
   div.summary.entry-summary — flex column nên order áp dụng được). */
@media (min-width: 782px) {
  /* display:contents "làm phẳng" form.cart vào đúng flex column của summary
     — bắt buộc vì nút "Thêm vào giỏ hàng" nằm SÂU bên trong form (cùng cấp
     với bảng màu/size), trong khi "Mua ngay" là 1 <button> anh em RIÊNG
     ngay sau form. Nếu chỉ đảo order cả form (như thử đầu tiên) thì bảng
     màu/size bị kéo lệch xuống dưới "Mua ngay" theo — sai mockup (mockup:
     màu/size trước, rồi Mua ngay, rồi Thêm vào giỏ). Làm phẳng form để mỗi
     con của nó tự set order độc lập, chỉ phần "Thêm vào giỏ" (trong
     .single_variation_wrap) mới cần lùi xuống sau "Mua ngay". */
  .summary form.cart {
    display: contents;
  }
  /* order là thứ hạng TOÀN CỤC trong flex container (không phải chỉ so
     giữa 2 phần tử đổi chỗ) — mọi anh em khác đang mặc định order:0 nên
     nếu chỉ gán order cho 2 nút, các khối SAU chúng trong DOM thật (USP
     bar/delivery/product_meta, order:0) sẽ nhảy lên TRƯỚC cả 2 nút. Gán
     tier rõ ràng: trước (0, mặc định) < Mua ngay (1) < Thêm vào giỏ (2) <
     USP/delivery/SKU sau CTA (3, giữ đúng vị trí "sau 2 nút" như DOM gốc). */
  .single_variation_wrap {
    order: 2;
  }
  .woocommerce-product-details__short-description,
  .scool-pdp-usp-bar,
  .scool-pdp-delivery,
  .product_meta {
    order: 3;
  }
  .scool-buy-now-button {
    order: 1;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(255, 95, 0, 0.3);
  }
  .scool-buy-now-button:hover:not(:disabled) {
    background: var(--wp--preset--color--primary);
    color: #fff;
  }
  .single_add_to_cart_button {
    background: transparent !important;
    color: var(--wp--preset--color--primary-container) !important;
    border: 2px solid var(--wp--preset--color--primary-container) !important;
    box-shadow: none;
  }
  .single_add_to_cart_button:hover {
    background: var(--wp--preset--color--primary-container) !important;
    color: #fff !important;
  }
}

.scool-pdp-proof {
  /* Dong cam ket phai la 1 hang RIENG full-width — truoc do inline-flex nam
     canh o so luong, nhin nhu label cua o qty (user bat loi). */
  display: flex;
  width: 100%;
  flex-basis: 100%;
  align-items: center;
  gap: 6px;
  background: var(--wp--preset--color--surface-container-low);
  color: var(--wp--preset--color--on-surface);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 12px;
  margin: 4px 0 0;
}
.scool-pdp-proof::before {
  content: "\21BB"; /* icon doi tra */
  color: var(--wp--preset--color--primary-container);
  font-weight: 900;
}
/* Nut them-vao-gio disabled: cam nhat trong nhu loi mau — chuyen xam ro rang */
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled {
  background: var(--wp--preset--color--surface-container-high) !important;
  color: var(--wp--preset--color--on-surface-variant) !important;
  opacity: 1;
  cursor: not-allowed;
}
.scool-delivery-info {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* -- USP icon bar (weight/material/waterproof — only real fields) ------ */
.scool-pdp-usp-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 12px;
  padding: 16px;
}
@media (min-width: 640px) {
  .scool-pdp-usp-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}
.scool-pdp-usp-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  color: var(--wp--preset--color--primary-container);
}
.scool-pdp-usp-bar__item span {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -- Delivery callout box (green/secondary tone under the USP bar) ----- */
.scool-pdp-delivery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 152, 252, 0.08);
  border: 1px solid rgba(0, 152, 252, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
}
.scool-pdp-delivery p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 13px;
}
.scool-pdp-delivery p svg {
  flex-shrink: 0;
  color: #0061a4;
}
.scool-pdp-delivery__contact {
  display: flex;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 152, 252, 0.2);
}
.scool-pdp-delivery__contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}

.scool-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 12px;
  overflow: hidden;
}
.scool-specs-table th,
.scool-specs-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
  font-size: 14px;
}
.scool-specs-table th {
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 600;
  width: 40%;
}

.scool-reviews-empty {
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-reviews {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scool-demo-label {
  display: inline-block;
  background: var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.scool-reviews__layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 32px;
  align-items: start;
}
.scool-reviews__summary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.scool-reviews__score {
  display: flex;
  align-items: center;
  gap: 16px;
}
.scool-reviews__score-number {
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--wp--preset--color--on-surface);
  line-height: 1;
}
.scool-reviews__score-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scool-reviews__score-meta .scool-star-icon {
  width: 18px;
  height: 18px;
}
.scool-reviews__score-meta span {
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-reviews__bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scool-reviews__bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}
.scool-reviews__bar-head span:last-child {
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}
.scool-reviews__bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  overflow: hidden;
}
.scool-reviews__bar-fill {
  height: 100%;
  background: var(--wp--preset--color--primary-container);
  border-radius: 999px;
}
/* -- Aggregate 3-state Sizefeed box (real do_vua_size distribution) ---- */
.scool-reviews__sizefeed {
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 14px 16px;
}
.scool-reviews__sizefeed-title {
  display: block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
}
.scool-reviews__sizefeed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: center;
}
.scool-reviews__sizefeed-row span {
  flex: 1;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-reviews__sizefeed-mid {
  font-weight: 800;
  color: var(--wp--preset--color--primary-container);
}

/* -- UGC/video gallery inside the reviews block ------------------------ */
.scool-reviews__ugc {
  margin-bottom: 4px;
}
.scool-reviews__ugc-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.scool-reviews__ugc-item {
  position: relative;
  flex: 0 0 auto;
  width: 110px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  background: var(--wp--preset--color--surface-container-low);
}
.scool-reviews__ugc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scool-reviews__ugc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* -- Per-review fit line ("Vừa vặn hoàn hảo" / from do_vua_size) ------- */
.scool-review__fit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}

.scool-reviews__write {
  display: inline-block;
  text-align: center;
  border: 1px solid var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  font-size: 13px;
}
.scool-reviews__write:hover {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}

.scool-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.scool-review {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 16px 20px;
}
.scool-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.scool-review__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.scool-review__identity {
  display: flex;
  flex-direction: column;
}
.scool-review__author {
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}
.scool-review__date {
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-review-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
.scool-sizefeed {
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
  background: var(--wp--preset--color--surface-container-low);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.scool-review__body {
  margin: 0;
  color: var(--wp--preset--color--on-surface);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .scool-reviews__layout {
    grid-template-columns: 1fr;
  }
}

.scool-sticky-atc {
  display: none;
}
@media (max-width: 767px) {
  /* display:none (not just an off-canvas transform) until .is-visible is
     toggled on by sticky-atc.js — an element that is never position:fixed
     while inactive can't be mis-placed by full-page screenshot tooling
     (Chromium/Playwright pin fixed elements to their pre-resize viewport
     offset when compositing a tall capture, which briefly "ghosted" this
     bar mid-page in QA screenshots even though it was correctly off-screen
     for real users — same root cause class as the immediate-show bug in
     sticky-atc.js, just visible only in tooling, not to real users). */
  .scool-sticky-atc.is-visible {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wp--preset--color--surface-container-lowest);
    border-top: 1px solid var(--wp--preset--color--outline-variant);
    padding: 12px 16px;
    z-index: 55;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
}
.scool-sticky-atc__price {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--wp--preset--color--primary);
}
.scool-sticky-atc__price ins {
  text-decoration: none; /* Woo mac dinh gach chan ins — gia khong phai link */
  background: none;
}
.scool-sticky-atc__price del {
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 500;
  font-size: 0.85em;
}
.scool-sticky-atc__cta {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
}
.scool-sticky-atc__cta:hover {
  background: var(--wp--preset--color--primary);
}

.scool-qr-payment img {
  display: block;
  margin-top: 8px;
  border-radius: 12px;
}

/* WooCommerce tabs (mô tả / đánh giá) + related products */
.woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  padding-left: 0;
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0 0 8px;
}
.woocommerce-tabs ul.tabs li {
  margin: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--wp--preset--color--on-surface-variant);
  padding: 0 0 14px;
  display: inline-block;
  background: none;
  border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--wp--preset--color--on-surface);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--wp--preset--color--primary-container);
  border-bottom-color: var(--wp--preset--color--primary-container);
}
.related.products {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--wp--preset--color--outline-variant);
}
.related.products > h2 {
  margin-bottom: 16px;
}
/* Mockup PDP v2 (user 07/09f): "Có thể bạn sẽ thích" hien DU 4 card ca
   mobile (luoi 2x2 nhu mockup) — bo rule an n+3 cua mockup cu. */
.scool-tab-subheading {
  margin-top: 24px;
}

/* PDP mobile: tung la stacked section (chot vong cu, khong bat khach
   click). Mockup PDP v2 07/09 ve tabs PILL SEGMENTED; vong QA 3-ben
   07/09 dong thuan doi sang pill: noi dung tab van SSR san trong DOM
   (Woo chi toggle display) nen SEO khong mat gi, con "Bang kich thuoc"
   truy cap duoc bang tab that thay vi chi qua link "Xem bang size".
   Style pill nam o block PDP v2 cuoi file (.wc-tabs). */

/* ==========================================================================
   9. Footer — light theme (Việc 3, docs/plan/06 mục B lệnh F, mockup/footer):
   pre-footer trust/CTA band + footer chính 5 cột (accordion trên mobile,
   luôn mở trên desktop qua kỹ thuật CSS-only "force-open" của <details>) +
   newsletter + hàng cuối bản quyền/placeholder Bộ Công Thương. Bottom nav
   mobile (chưa đổi ở Việc này) vẫn ở khối riêng ngay dưới.
   ========================================================================= */

.scool-prefooter {
  background: var(--wp--preset--color--primary-fixed, #ffdbce);
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.scool-prefooter__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scool-prefooter__msg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.scool-prefooter__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--primary);
  flex-shrink: 0;
}
.scool-prefooter__text {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface);
}
.scool-prefooter__cta {
  padding: 10px 20px;
  font-size: 13px;
  white-space: nowrap;
}
.scool-prefooter__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-prefooter__links a {
  color: inherit;
}
.scool-prefooter__links a:hover {
  color: var(--wp--preset--color--primary);
}
.scool-prefooter__links a + a {
  padding-left: 12px;
  border-left: 1px solid var(--wp--preset--color--outline-variant);
}

.scool-site-footer {
  background: var(--wp--preset--color--surface-container-low);
  color: var(--wp--preset--color--on-surface-variant);
  border-top: 1px solid var(--wp--preset--color--outline-variant);
  padding: 32px 24px 100px !important;
  margin: 0 !important;
}
.scool-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.scool-footer__logo {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 24px;
  color: var(--wp--preset--color--on-surface);
}
.scool-footer__logo-dot {
  color: var(--wp--preset--color--primary-container);
}
.scool-footer__desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.scool-footer__nap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.scool-footer__nap-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.scool-footer__nap-row svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--wp--preset--color--primary);
}
.scool-footer__nap-row a {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
.scool-footer__nap-strong {
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}

.scool-footer__col-trigger,
.scool-footer__col > h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface);
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.scool-footer__col-trigger {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.scool-footer__col-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.scool-footer__col-trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}
.scool-footer__col-panel {
  margin-top: 12px;
}
.scool-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scool-footer__col li {
  margin-bottom: 10px;
}
.scool-footer__col li:last-child {
  margin-bottom: 0;
}
.scool-footer__col a {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 13px;
}
.scool-footer__col a:hover {
  color: var(--wp--preset--color--primary);
}
.scool-footer__col-sale {
  color: var(--wp--preset--color--primary) !important;
  font-weight: 700;
}
.scool-footer__social {
  display: flex;
  gap: 10px;
}
.scool-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--outline-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-footer__social a:hover {
  background: var(--wp--preset--color--primary-container);
  border-color: var(--wp--preset--color--primary-container);
  color: #fff;
}
.scool-footer__social-zalo {
  font-size: 11px;
  font-weight: 900;
}
.scool-footer__payment {
  margin-top: 16px;
}
.scool-footer__payment-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
  margin-bottom: 6px;
}
.scool-footer__payment-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 8px;
  padding: 6px 10px;
}

.scool-email-capture--footer {
  background: var(--wp--preset--color--surface-container-lowest);
  background-image: none;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 12px;
  padding: 16px;
  margin: 32px 0 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scool-email-capture--footer .scool-email-capture__icon {
  width: 36px;
  height: 36px;
  background: var(--wp--preset--color--primary-fixed, #ffdbce);
  color: var(--wp--preset--color--primary);
  margin-bottom: 0;
}
.scool-email-capture--footer h2 {
  font-size: 14px;
  margin: 0;
}
.scool-email-capture--footer .scool-email-capture__form {
  flex-direction: row;
  gap: 8px;
}
.scool-email-capture--footer .scool-email-capture__form input[type="email"] {
  width: auto;
  flex: 1 1 auto;
  padding: 10px 14px;
  font-size: 13px;
}
.scool-email-capture--footer .scool-email-capture__form button {
  flex-shrink: 0;
  background: var(--wp--preset--color--primary-container);
  padding: 10px 20px;
  font-size: 13px;
}

.scool-footer__bottom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wp--preset--color--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-footer__compliance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 6px;
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-footer__compliance-note {
  font-style: italic;
  font-size: 10px;
  opacity: 0.75;
}

@media (min-width: 900px) {
  .scool-prefooter__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .scool-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
    gap: 32px;
  }
  .scool-footer__col-trigger {
    pointer-events: none;
    border-bottom: 0;
  }
  .scool-footer__col-trigger::after {
    display: none;
  }
  .scool-footer__col-panel[hidden] {
    display: block !important;
  }
  .scool-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   9b. Bottom-nav mobile (Việc 4, docs/plan/06 mục C) — pill đen nổi, 5 tab
   Trang chủ/Danh mục/⚡SALE (nổi cam giữa)/Giỏ hàng (badge)/Tài khoản, icon +
   nhãn 10px, active = capsule cam nhạt. Chỉ hiện <782px (desktop dùng menu
   ngang trong header). Ẩn hẳn: PDP (trùng sticky-atc đáy màn hình), Cart/
   Checkout (trang giao dịch); ẩn tạm thời do JS (bottom-nav.js) khi cuộn
   xuống/drawer mở/bàn phím ảo mở qua class `.is-hidden`.
   ========================================================================= */

.scool-bottom-nav {
  display: none;
}
/* (QA-6, dong thuan Codex+Gemini 07/09) 767px thay vi 781px: tablet
   portrait 768 da co header/nav day du — bottom-nav vua che noi dung
   vua trung chuc nang. */
@media (max-width: 767px) {
  .scool-bottom-nav {
    position: fixed;
    left: 19px;
    right: 19px;
    bottom: 24px;
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 64px;
    background: var(--wp--preset--color--on-surface);
    border-radius: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
  }
  .scool-bottom-nav.is-hidden {
    transform: translateY(calc(100% + 24px));
  }
  /* PDP mobile: the commerce sticky bar IS the bottom of the viewport
     (mockup/product-detail/mobile) — both are position:fixed;bottom:0, so
     showing the generic bottom-nav here would stack/overlap it instead. */
  .single-product .scool-bottom-nav {
    display: none;
  }
  /* Cart/Checkout mobile: transactional pages (mockup/gio-hang mobile:
     "Suppressed navigation shell because page intent is transactional") —
     the fixed bottom-nav would otherwise sit on top of the cart's checkout
     button / checkout's place-order button, the exact overlap already fixed
     for PDP above. */
  .woocommerce-cart .scool-bottom-nav,
  .woocommerce-checkout .scool-bottom-nav {
    display: none;
  }
  .scool-bottom-nav__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.6);
  }
  .scool-bottom-nav__tab.is-active {
    background: rgba(255, 95, 0, 0.18);
    color: #fff;
  }
  .scool-bottom-nav__label {
    font-size: 10px;
    font-weight: 600;
  }
  .scool-bottom-nav__tab--sale {
    margin-top: -18px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
    box-shadow: 0 6px 14px rgba(255, 95, 0, 0.5);
  }
  .scool-bottom-nav__tab--sale .scool-bottom-nav__label {
    display: none;
  }
  .scool-bottom-nav__tab--sale.is-active {
    background: var(--wp--preset--color--primary);
  }
  .scool-bottom-nav__badge {
    position: absolute;
    top: -2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--wp--preset--color--error);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }
}

/* ==========================================================================
   10. PLP (archive-product) — chips row, 2-col sidebar layout, mobile
   filter/sort drawer, trust strip, result-count+sort row, hover-reveal card
   media (badge/wishlist/CTA), load-more, recommended banners, SEO modules.
   ========================================================================= */

.scool-plp-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 16px !important;
  margin-bottom: 24px;
}
.scool-plp-chips-row__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
.scool-plp-chips-row .scool-situation-chips {
  margin: 0;
}

/* -- Mobile "Sắp xếp / Lọc" triggers (hidden on desktop) -------------- */
.scool-plp-mobile-triggers {
  display: flex;
  gap: 12px;
  margin: 0 0 16px;
}
.scool-plp-mobile-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 12px;
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--on-surface);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
/* Sidebar + 3-col desktop grid only start at 1200px — at 1024/1280 there is
   not enough width for 260px sidebar + gap + 3 columns without cards
   getting squeezed/cut at the right edge (finding F-05); tablet/laptop keep
   the mobile drawer sort/filter triggers and a 2-col grid instead. */
@media (min-width: 1200px) {
  .scool-plp-mobile-triggers {
    display: none;
  }
}

/* -- Trust strip (USP row, sits above the result-count/sort row) ------ */
.scool-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 14px 16px !important;
  margin: 0 0 20px;
}
.scool-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-trust-strip__item svg {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary-container);
}

/* -- Result-count + sort row (replaces Woo's default English text) ---- */
.scool-plp-result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
  padding-bottom: 16px;
  margin: 0 0 20px;
}
.scool-plp-result-row .woocommerce-result-count {
  display: none;
  margin: 0;
}
.scool-plp-result-row .scool-plp-sort {
  display: none;
  width: 100%;
  order: 3;
  margin: 0;
  padding-top: 12px;
}
.scool-plp-result-row .scool-plp-sort.is-open {
  display: flex;
}
.woocommerce-notices-wrapper:empty {
  display: none;
}

@media (min-width: 1200px) {
  .scool-plp-result-row .woocommerce-result-count {
    display: block;
  }
  .scool-plp-result-row .scool-plp-sort {
    display: flex;
    width: auto;
    order: 0;
    padding-top: 0;
  }
}

/* -- 2-column layout: sidebar (filters) + content (legacy-template) --- */
.scool-plp-sidebar {
  display: none;
}
.scool-plp-sidebar.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--wp--preset--color--surface-container-lowest);
  padding: 24px !important;
  overflow-y: auto;
}
.scool-plp-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.scool-plp-sidebar__head h2 {
  margin: 0;
  font-size: 18px;
}
.scool-plp-sidebar__close-wrap {
  display: contents;
}
.scool-plp-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface);
  cursor: pointer;
}
.scool-plp-sidebar__group {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.scool-plp-sidebar__group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.scool-plp-sidebar__group h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 1200px) {
  .scool-plp-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }
  .scool-plp-layout #primary {
    flex: 1 1 0%;
    min-width: 0;
  }
  .scool-plp-sidebar {
    display: block;
    position: sticky;
    top: 96px;
    inset: auto;
    z-index: auto;
    flex: 0 0 260px;
    background: var(--wp--preset--color--surface-container-low);
    border-radius: 16px;
    padding: 24px !important;
    overflow: visible;
  }
  .scool-plp-sidebar__close {
    display: none;
  }
}

/* Finding plp#6: container chạm mép viewport (0 gutter) — .scool-plp là
   wp-block-group ngoài cùng của archive, không có padding-inline nào nên
   breadcrumb/H1/grid dính sát mép ở mobile/tablet (<1200, chưa có sidebar
   để tự tạo lề). 16px mobile / 40px từ 782px — cả ở desktop/laptop nơi
   layout đã tự căn giữa max-width 1280px, đây vẫn là sàn gutter thật bên
   trong khung, không chỉ là margin auto bên ngoài. */
.scool-plp {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 782px) {
  .scool-plp {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* -- Product grid: 2 columns on mobile, 3 columns from 1024px up (plp-7).
   Sidebar layout still only switches on at 1200px (unchanged), so between
   1024–1199 the grid runs 3-up at full content width with no sidebar. ---- */
.scool-plp-layout ul.products {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
  .scool-plp-layout ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -- Card media box: badges + wishlist + hover-reveal CTA over the image */
.scool-card-media {
  position: relative;
  overflow: hidden;
}
.scool-card-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-card-cta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  transform: translateY(140%);
  transition: transform 0.25s ease;
}
li.product:hover .scool-card-cta,
li.product:focus-within .scool-card-cta {
  transform: translateY(0);
}
.scool-card-stock {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 2px 12px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-card-stock--urgent {
  color: var(--wp--preset--color--error);
}
.scool-card-stock__icon {
  flex-shrink: 0;
}

/* -- Skeleton row: 2 loading-placeholder cards, same grid ----------------
   (QA-4, dong thuan Codex+Gemini 07/09): AN mac dinh — hien thuong truc
   nhin nhu 2 card vo du lieu. plp-load-more.js bat class .is-loading
   trong luc fetch trang ke, xong thi go. */
.scool-plp-skeleton-row {
  display: none;
  gap: 20px;
  margin: 12px 0 0;
}
.scool-plp-skeleton-row.is-loading {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .scool-plp-skeleton-row.is-loading {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* (QA-5) Co JS: phan trang so an di (van la link that trong DOM cho
   crawler + fallback khi JS loi) — "Xem them" la CTA chuyen trang duy
   nhat tren man hinh. */
.woocommerce-pagination.is-hidden-by-loadmore {
  display: none !important;
}
.scool-plp-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  background: var(--wp--preset--color--surface-container-lowest);
}
.scool-plp-skeleton-card__img,
.scool-plp-skeleton-card__line {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--wp--preset--color--surface-container-low) 25%, var(--wp--preset--color--surface-container-highest) 37%, var(--wp--preset--color--surface-container-low) 63%);
  background-size: 400% 100%;
  animation: scool-skeleton-shimmer 1.4s ease infinite;
}
.scool-plp-skeleton-card__img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 12px;
}
.scool-plp-skeleton-card__line {
  height: 12px;
}
.scool-plp-skeleton-card__line--title {
  width: 85%;
}
.scool-plp-skeleton-card__line--price {
  width: 45%;
}
@keyframes scool-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
/* -- Real "Xem thêm" load-more link ------------------------------------ */
.scool-plp-load-more {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}
.scool-plp-load-more__link {
  display: inline-block;
  padding: 12px 28px;
  border: 2px solid var(--wp--preset--color--outline-variant);
  border-radius: 999px;
  color: var(--wp--preset--color--on-surface);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
}
.scool-plp-load-more__link:hover {
  border-color: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
}
.scool-plp-load-more__link.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* -- "Có thể bạn quan tâm" — 2 real category banners ------------------- */
.scool-plp-recommended-section {
  margin: 0 0 40px;
  padding-top: 32px !important;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-plp-recommended {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (min-width: 640px) {
  .scool-plp-recommended {
    grid-template-columns: repeat(2, 1fr);
  }
}
.scool-plp-recommended__item {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
}
.scool-plp-recommended__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.scool-plp-recommended__item:hover img {
  transform: scale(1.05);
}
.scool-plp-recommended__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* -- Bottom SEO modules (plp-10): Giới thiệu+Danh mục liên quan, rồi
   Chọn dép theo nhu cầu+Hướng dẫn size, rồi FAQ riêng một hàng ---------- */
.scool-plp-modules-section {
  margin: 0 0 40px;
}
.scool-plp-modules {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.scool-plp-modules__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .scool-plp-modules__row {
    grid-template-columns: 1fr 1fr;
  }
  .scool-plp-modules__row--single {
    grid-template-columns: 1fr;
  }
}
.scool-plp-module {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px !important;
}
.scool-plp-module h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.scool-plp-module p {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
  line-height: 1.6;
}
.scool-plp-needs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-plp-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.scool-plp-size-table th,
.scool-plp-size-table td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-plp-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scool-plp-faq__item {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 10px;
  padding: 12px 14px;
}
.scool-plp-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  list-style: none;
}
.scool-plp-faq__item summary::-webkit-details-marker {
  display: none;
}
.scool-plp-faq__item p {
  margin: 8px 0 0;
  font-size: 13px;
}

/* -- Mobile typography/spacing tightening (P2 finding) ----------------- */
@media (max-width: 1023px) {
  .scool-plp-filter__option {
    font-size: 12px;
    padding: 5px 10px;
  }
  .scool-chip {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ==========================================================================
   11. Cart + Checkout — bám mockup/gio-hang + mockup/checkout. Cart/Checkout
   là WooCommerce Blocks (React) thật — DOM chỉ tồn tại sau hydrate nên các
   class dưới đây lấy từ HTML thật đã render (Playwright), không đoán. Chỉ
   restyle màu/khoảng cách/bo góc — không đụng cấu trúc/logic AJAX của block.
   ========================================================================= */

/* -- Minimal checkout header (parts/checkout-header.html) -------------- */
.scool-checkout-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 20px var(--wp--preset--spacing--md, 16px);
  background: rgba(247, 249, 251, 0.97);
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
}
@media (min-width: 782px) {
  .scool-checkout-header {
    justify-content: flex-start;
    padding: 20px 40px;
  }
  /* WP core's `.is-layout-constrained > *` sets margin-inline:auto!important,
     which re-centers this single child regardless of the flex justify-
     content above — beat it with a more specific selector. */
  .scool-checkout-header .scool-header__logo {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* -- Cart minimal transactional header: logo+search (desktop) /
   hamburger+centered-logo+cart (mobile) — same treatment as checkout-header,
   swaps the global nav shell so the buy flow stays distraction-free. ------ */
.scool-cart-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 14px 16px !important;
  background: rgba(247, 249, 251, 0.97);
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-cart-header__hamburger {
  display: flex;
}
.scool-cart-header__logo {
  text-align: center;
}
.scool-cart-header__search {
  display: none;
}
@media (min-width: 782px) {
  .scool-cart-header {
    grid-template-columns: auto 1fr auto;
    padding: 16px 40px !important;
  }
  .scool-cart-header__hamburger,
  .scool-cart-header__cart {
    display: none;
  }
  .scool-cart-header__logo {
    text-align: left;
  }
  .scool-cart-header__search {
    display: inline-flex;
  }
}

/* -- Cart heading (finding #44 — [scool_cart_heading], mockup/gio-hang:
   "Giỏ hàng của bạn (N sản phẩm)" ngay đầu trang, trước khối freeship) --- */
.scool-cart-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--wp--preset--color--on-surface);
  text-transform: none;
  /* Finding cart#1 (do-copy): [scool_cart_heading]/[scool_freeship_bar]
     nam ngoai wrapper constrained (post-content dung align:wide cho ca
     khoi, khong rieng gi cart block) nen troi ve x=0/80 thay vi le chuan
     16px(mobile)/120px(desktop) dung o moi trang khac — bu dung 2 token
     margin-mobile/margin-desktop da dung san toan site. */
  margin: 0 16px 16px;
}
@media (min-width: 768px) {
  .scool-cart-heading {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/* -- Freeship progress bar (Cart/Checkout context — see section 1 for the
   Home banner variant of the same [scool_freeship_bar] shortcode) -------- */
.scool-freeship-bar {
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.scool-freeship-bar__message {
  margin: 0 0 10px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface);
}
.scool-freeship-bar__track {
  height: 8px;
  background: var(--wp--preset--color--surface-container-highest);
  border-radius: 999px;
  overflow: hidden;
}
.scool-freeship-bar__fill {
  height: 100%;
  background: var(--wp--preset--color--primary-container);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.scool-freeship-bar__scale {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-freeship-bar > p:last-child {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-freeship-bar__suggest {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-freeship-bar__suggest-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}

/* -- Checkout progress steps (decorative — see shortcode_checkout_progress
   docblock for why the labels differ from the mockup's 3-step nav) ------ */
.scool-checkout-progress {
  margin: 0 0 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-checkout-progress ol {
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scool-checkout-progress__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-checkout-progress__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid var(--wp--preset--color--surface-container-highest);
  background: var(--wp--preset--color--surface-container-lowest);
  font-size: 12px;
}
.scool-checkout-progress__step.is-done .scool-checkout-progress__dot {
  background: var(--wp--preset--color--primary-container);
  border-color: var(--wp--preset--color--primary-container);
  color: #fff;
}
.scool-checkout-progress__step.is-active .scool-checkout-progress__dot {
  border-color: var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
}
.scool-checkout-progress__step.is-active .scool-checkout-progress__label {
  color: var(--wp--preset--color--primary-container);
}
@media (max-width: 767px) {
  .scool-checkout-progress ol {
    gap: 20px;
  }
  .scool-checkout-progress__label {
    display: none;
  }
}

/* -- Finding cart-checkout#14: gutter CỐ ĐỊNH 40px giữa 2 cột (main content
   / sidebar tổng) ở tablet/laptop — dùng chung cho cả Cart lẫn Checkout vì
   cả 2 block đều render qua `.wc-block-components-sidebar-layout`.
   WooCommerce Blocks mặc định đẩy 2 cột bằng padding dạng % ngay trên
   `.wc-block-components-main` (4.53% container width) — đo Playwright thật
   trên trang có sản phẩm: ~46px ở tablet 1024px, ~58px ở laptop 1280px,
   phình theo viewport thay vì cố định 40px audit yêu cầu. "2 cột bắt đầu
   cùng hàng" đã ĐÚNG sẵn (đo `getBoundingClientRect()` main/sidebar cùng
   giá trị `top` ở cả 2 viewport) nên không cần sửa phần đó, chỉ ghi đè
   gutter phình. `.wc-block-components-sidebar`'s `padding-left` KHÔNG phải
   gutter (đo thật: mainRect.right === sidebarRect.left, 0 khoảng cách giữa
   2 box) — đó là padding NỘI BỘ của thẻ trắng tổng tiền (đã có style riêng
   ở dưới), nên chỉ cần sửa `.wc-block-components-main`. -------------------- */
@media (min-width: 768px) {
  .wc-block-components-sidebar-layout .wc-block-components-main {
    padding-right: 40px !important;
  }
}

/* -- Cart block (wp:woocommerce/cart) ----------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart-items {
  border-collapse: separate;
  border-spacing: 0 12px;
}
.wc-block-cart-items__row {
  background: var(--wp--preset--color--surface-container-lowest);
  box-shadow: 0 2px 8px rgba(86, 94, 116, 0.08);
  border-radius: 12px;
}
.wc-block-cart-items__row td {
  padding: 16px 12px;
  border: none;
}
.wc-block-cart-items__row td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.wc-block-cart-items__row td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.wc-block-cart-item__image img {
  border-radius: 8px;
  object-fit: cover;
}
.wc-block-components-product-name {
  /* Finding cart#2 (do-copy): mockup dung Inter cho TEN san pham (khong
     phai Montserrat nhu truoc gio) — 16px mobile/18px desktop. WooCommerce
     Blocks tu load 1 stylesheet rieng dat weight:500 cung do dac hieu voi
     rule nay (nap sau, thang tren site that dan chung do da do) nen can
     !important cho weight/family/size moi thang chac chan. */
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none;
  letter-spacing: normal;
  color: var(--wp--preset--color--on-surface);
}
@media (min-width: 768px) {
  .wc-block-components-product-name {
    font-size: 18px !important;
  }
}
.wc-block-components-product-details {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 13px;
}
.wc-block-cart-item__prices .wc-block-components-product-price {
  font-family: "Montserrat", sans-serif !important;
  font-size: 20px !important;
  color: var(--wp--preset--color--primary);
  font-weight: 700 !important;
}
.wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 999px;
  overflow: hidden;
}
.wc-block-components-quantity-selector__button {
  color: var(--wp--preset--color--on-surface-variant);
}
.wc-block-cart-item__remove-link {
  color: var(--wp--preset--color--outline);
}
.wc-block-cart-item__remove-link:hover {
  color: var(--wp--preset--color--error);
}

/* -- Finding #45 (cart desktop): card sản phẩm lớn hơn, bớt cảm giác bảng
   trong giới hạn CSS-only (giữ nguyên table markup của block — không rebuild
   DOM). Ảnh to hơn theo mockup/gio-hang desktop (w-32 = 128px) + đệm rộng
   hơn; ẩn nhãn cột "Sản phẩm"/"Tổng" bằng kỹ thuật screen-reader-text (giữ
   cho trình đọc màn hình, chỉ ẩn thị giác) thay vì display:none. --------- */
@media (min-width: 768px) {
  .wc-block-cart-items__row td {
    padding: 20px 16px;
  }
  .wc-block-cart-item__image img {
    width: 128px !important;
    height: 128px !important;
  }
  .wc-block-cart-items__header th > span:not(.screen-reader-text) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Finding cart-checkout#14 (QA lần 3/3): span nhãn cột đã bị ẩn thị giác
     ở trên (position:absolute) nhưng chính <thead> (dù cao 0px vì mọi nội
     dung bên trong đã bị đưa ra khỏi luồng) vẫn là 1 row-group riêng, và
     `border-spacing: 0 12px` (rule phía trên) cộng dồn khoảng cách quanh nó
     — đo Playwright thật: bảng bắt đầu thấp hơn đỉnh sidebar tổng tiền đúng
     56px dù <thead> không có pixel nào hiển thị. Đã thử gỡ hẳn <thead>/<tr>
     khỏi row-group bằng `display:contents` nhưng phá luôn bảng (React coi
     đây là thay đổi cấu trúc, table rơi về skeleton loading — xem log job
     sửa lần 3/3), nên KHÔNG dùng cách đó. Thay vào đó kéo cả bảng lên bằng
     margin-top âm đúng bằng khoảng trống ảo của <thead> — vì <thead> không
     có pixel hiển thị nào (toàn bộ text đã visually-hidden ở trên), kéo cả
     bảng lên không làm mất/đè nội dung gì, chỉ khớp lại điểm bắt đầu hiển
     thị thật (hàng sản phẩm đầu tiên) với đỉnh sidebar. Số 56px đo trực
     tiếp bằng `getBoundingClientRect()` trên trang thật, giống cách đo
     40px gutter ở trên. */
  .wp-block-woocommerce-cart .wc-block-cart-items {
    margin-top: -56px;
  }
}
.wc-block-components-sidebar.wc-block-cart__sidebar {
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(86, 94, 116, 0.08);
}
.wc-block-cart__totals-title {
  font-family: "Montserrat", sans-serif;
}
/* Trust line under the checkout CTA (mockup: "Thanh toán an toàn & Bảo
   mật") — the button itself is WooCommerce Blocks' own React markup, so the
   static reassurance copy is added via ::after rather than a PHP hook. */
.wc-block-cart__submit-container::after {
  content: "Thanh toán an toàn & Bảo mật";
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.wc-block-components-totals-item {
  color: var(--wp--preset--color--on-surface-variant);
}
/* Finding cart#3 (do-copy): nhan/gia Tam tinh, Phi giao hang... mockup la
   Inter 16/400 (khong phai Montserrat ke thua tu dau chua ro) — trừ hang
   Tong cong (footer-item, rule rieng ben duoi da ghi de Montserrat/700). */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--wp--preset--color--on-surface);
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.wc-block-components-totals-coupon.wc-block-components-panel .wc-block-components-panel__button {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 999px !important;
  background: var(--wp--preset--color--primary-container) !important;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 14px;
  padding-bottom: 14px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--wp--preset--color--primary) !important;
}

/* -- Finding #45/cart-checkout#16: CTA "bo lg" nhất quán mọi viewport —
   mockup/gio-hang desktop vẽ nút vuông bo góc vừa (Tailwind rounded-lg),
   không phải pill tròn hoàn toàn. Bản sửa #45 trước chỉ áp từ 768px (dưới
   768px giữ 999px vì mockup MOBILE vẽ nút sticky riêng — rounded-full) —
   nhưng nút thật `.wc-block-cart__submit-button` chỉ là 1 phần tử DOM duy
   nhất dùng chung cho cả 2 vai trò (nội dung cột tổng ở mọi viewport +
   nguồn observe/clone của sticky dock #47 ở mobile), nên style tách theo
   breakpoint tạo ra 1 nút bo 999px rồi 12px tuỳ cuộn tới đâu — không nhất
   quán (audit chỉ ra). Bo 12px CỐ ĐỊNH mọi viewport cho đúng yêu cầu nhất
   quán, không tách theo @media nữa. Checkout ngoài phạm vi finding này,
   giữ nguyên pill. ---------------------------------- */
.wc-block-cart__submit-button {
  border-radius: 12px !important;
}
/* Finding cart#5 (do-copy): CTA "Tien hanh thanh toan" — mockup mobile
   18px/700 khong uppercase; desktop doi sang label-bold token 12px/700/
   0.05em/uppercase. Checkout dung chung base rule ben tren nhung co finding
   rieng (mockup nguoc lai: desktop KHONG uppercase) — se scope rieng khi
   sua trang checkout, khong dung chung voi cart o day. */
.wc-block-cart__submit-button {
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .wc-block-cart__submit-button {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* -- Cross-sell inside cart (product-collection block, "Có thể bạn cũng
   thích" — see cart_page_block_content()) ------------------------------- */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection h2 {
  font-size: 24px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* -- Mobile: room for cross-sell 2-col grid (finding 25 P1) + space at the
   bottom of the page for the sticky dock below (finding #47 — see
   assets/sticky-cart-checkout.js). The dock itself is CSS-gated by the
   `.scool-sticky-dock` class that script adds, not a bare selector here. */
@media (max-width: 767px) {
  .wp-block-woocommerce-cart .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .wp-block-woocommerce-cart {
    padding-bottom: 96px;
  }
}

/* -- Checkout block (wp:woocommerce/checkout) --------------------------- */
.wc-block-components-checkout-step {
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(86, 94, 116, 0.06);
}
.wc-block-components-checkout-step__title {
  font-family: "Montserrat", sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
/* Finding cart-checkout#15: viền xám nhạt mặc định, cam khi chọn — trước đó
   chỉ đổi border-radius, border-color để mặc định browser (đo Playwright
   thật: `color(srgb 0.168627 0.176471 0.184314 / 0.8)`, gần đen, "viền đen
   gắt" audit chỉ ra) thay vì token nhạt của site. */
.wc-block-components-text-input input,
.wc-block-components-address-form select,
.wc-block-components-combobox-control input {
  border-radius: 8px !important;
  border-color: var(--wp--preset--color--surface-container-highest) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
  border-color: var(--wp--preset--color--primary-container) !important;
  outline: 2px solid var(--wp--preset--color--primary-container);
  outline-offset: 1px;
}
/* `border-width` cần !important: WooCommerce tự đặt
   `.wc-block-components-radio-control__option{border-width:0}` — cùng độ
   đặc thù (1 class) với rule của ta nên tuỳ thứ tự nạp CSS mà bị đè mất
   viền ở trạng thái CHƯA chọn (đo Playwright thật: option chưa check ra
   `0px solid rgb(224,227,229)` — đúng màu nhạt nhưng width 0, viền vô hình). */
.wc-block-components-radio-control__option {
  border: 1px solid var(--wp--preset--color--surface-container-highest) !important;
  border-radius: 12px !important;
  margin-bottom: 8px;
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:hover {
  border-color: var(--wp--preset--color--primary-container) !important;
}
.wc-block-components-radio-control__input {
  accent-color: var(--wp--preset--color--primary-container);
}
.wc-block-components-radio-control-accordion-content {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.wc-block-components-sidebar.wc-block-checkout__sidebar {
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(86, 94, 116, 0.08);
}
.wc-block-components-checkout-order-summary__title-text {
  font-family: "Montserrat", sans-serif;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: 14px;
}

/* -- Finding #46: trust badges cạnh CTA "Đặt hàng" (assets/checkout-
   trust-badges.js chèn wrap này ngay sau `.wc-block-checkout__actions_row`).
   Desktop: 2 badge pill theo mockup/checkout desktop. Mobile: 3 badge dạng
   icon-cột theo mockup/checkout mobile — hai bộ loại trừ nhau theo
   breakpoint, không hiện cùng lúc. -------------------------------------- */
.scool-checkout-trust-wrap {
  margin-top: 16px;
}
.scool-checkout-trust {
  display: flex;
}
.scool-checkout-trust--mobile {
  display: none;
}
.scool-checkout-trust--desktop {
  gap: 8px;
  flex-wrap: wrap;
}
.scool-checkout-trust__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-variant);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-checkout-trust__badge .material-symbols-outlined {
  font-size: 18px;
  color: var(--wp--preset--color--primary-container);
}
@media (max-width: 767px) {
  .scool-checkout-trust--desktop {
    display: none;
  }
  .scool-checkout-trust--mobile {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--wp--preset--color--surface-variant);
  }
  .scool-checkout-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--wp--preset--color--on-surface-variant);
    text-align: center;
  }
  .scool-checkout-trust__item .material-symbols-outlined {
    font-size: 28px;
    color: var(--wp--preset--color--primary-container);
  }
}

/* -- QR/bank preview shown INSIDE the checkout payment step, before the
   order exists (mockup/checkout: bank-details expander always visible for
   the selected "Chuyển khoản ngân hàng" option) — see
   Scool_QR_Blocks_Support::get_payment_method_data() + qr-blocks-checkout.js. */
.scool-qr-checkout-preview {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 16px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 12px;
}
.scool-qr-checkout-preview__image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--wp--preset--color--surface-variant);
  border-radius: 10px;
  padding: 8px;
}
.scool-qr-checkout-preview__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-qr-checkout-preview__title {
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}
.scool-qr-checkout-preview__bank {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-variant);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* -- Desktop: order-summary sidebar stays in view while the (taller) form
   column scrolls (mockup/checkout desktop: "lg:sticky lg:top-28"). ------ */
@media (min-width: 768px) {
  .wc-block-checkout__sidebar {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/* -- Mobile: room at the bottom of the form for the sticky dock below
   (mockup/checkout mobile: sticky bottom action bar — finding 30 P1, now
   folded into finding #47's dock). -------------------------------------- */
@media (max-width: 767px) {
  .wc-block-checkout__form {
    padding-bottom: 96px;
  }
}

/* -- Finding #47: sticky mobile dock chứa TỔNG + nút hành động thật, dùng
   chung cho cả `.wp-block-woocommerce-proceed-to-checkout-block` (Cart) và
   `.wc-block-checkout__actions_row` (Checkout) — cả 2 class do
   assets/sticky-cart-checkout.js gắn vào đúng node thật (không nút giả).
   `.scool-sticky-dock` không tự fixed — chỉ bật khi có thêm `.is-visible`
   (IntersectionObserver quyết định, xem docblock JS) để không che trùng nội
   dung thật bên trên khi nút gốc vẫn còn trong màn hình. Sentinel đứng NGAY
   SAU container (đánh dấu mép dưới CTA thật), cao 0px cố định — không chiếm
   thêm không gian trong luồng (xem docblock assets/sticky-cart-checkout.js
   vì sao không đồng bộ chiều cao theo container như bản sửa trước). ----- */
.scool-sticky-dock-sentinel {
  display: block;
  width: 100%;
  pointer-events: none;
}
.scool-sticky-dock__total {
  display: none;
}
@media (max-width: 767px) {
  .scool-sticky-dock.is-visible {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    margin: 0 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--surface-container-lowest);
    border-top: 1px solid var(--wp--preset--color--outline-variant);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .scool-sticky-dock.is-visible .scool-sticky-dock__total {
    display: block;
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--wp--preset--color--on-surface);
    text-align: center;
  }
  .scool-sticky-dock.is-visible .wc-block-cart__submit-button {
    width: 100%;
  }
}

/* -- Order-received (thank-you) QR section (WC_Gateway_Scool_QR::
   render_qr_on_thankyou — img rule already existed, add card + copy). ---- */
.scool-qr-payment {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  max-width: 420px;
}
.scool-qr-payment__mock-notice,
.scool-qr-payment__pending-notice {
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* ==========================================================================
   12. Job B/3 — Hướng dẫn chọn size / Flash sale / Đánh giá / Tra cứu đơn
   hàng. 4 trang tự phục vụ dùng chung 1 khung: main content width, breadcrumb
   dùng lại pattern PLP/PDP (Home > trang này), CTA pill dùng chung màu
   primary-container như single_add_to_cart_button.
   ========================================================================= */

.scool-size-guide,
.scool-flash-sale,
.scool-reviewshub,
.scool-order-lookup {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.scool-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
  margin-bottom: 20px;
}
.scool-breadcrumb a {
  color: inherit;
}
.scool-breadcrumb .is-current {
  color: var(--wp--preset--color--on-surface);
  font-weight: 700;
}

.scool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 32px;
  /* Vong 13-trang: <button> khong ke thua font-family cua body theo UA
     stylesheet mac dinh (render Arial) — mockup moi CTA deu dung Inter, fix
     goc 1 lan cho toan bo .scool-btn thay vi tung trang tu khai bao lai. */
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.scool-btn--primary {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 95, 0, 0.3);
}
.scool-btn--primary:hover {
  background: var(--wp--preset--color--primary);
}
.scool-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.scool-btn--outline {
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--on-surface);
  border: 1px solid var(--wp--preset--color--outline);
}
.scool-btn--outline:hover {
  background: var(--wp--preset--color--surface-container-low);
}

.scool-empty-note {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 12px;
  padding: 20px;
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
}

/* -- 12a. Hướng dẫn chọn size ------------------------------------------- */

/* Việc 38 (mockup/size-guide desktop): bỏ hero cam lớn — tiêu đề + mô tả
   trên nền sáng thường (không card màu). Mobile: mockup chỉ có tiêu đề căn
   giữa, không mô tả — CSS ẩn <p> dưới 900px thay vì bỏ hẳn khỏi PHP (giữ
   nội dung thật cho desktop dùng chung 1 nguồn). */
.scool-size-guide__hero {
  text-align: center;
  margin-bottom: 8px;
}
.scool-size-guide__hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  color: var(--wp--preset--color--primary);
  margin: 0 0 8px;
}
.scool-size-guide__hero p {
  display: none;
  max-width: 640px;
  color: var(--wp--preset--color--on-surface-variant);
}
@media (min-width: 900px) {
  .scool-size-guide__hero {
    text-align: left;
  }
  .scool-size-guide__hero h1 {
    font-size: 28px;
    /* Mockup desktop: tiêu đề thường, không viết hoa (khác mobile — mobile
       giữ uppercase mặc định theo rule h1 chung site-wide). */
    text-transform: none;
  }
  .scool-size-guide__hero p {
    display: block;
  }
}
.scool-size-guide__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 900px) {
  .scool-size-guide__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
.scool-size-guide__measure,
.scool-size-guide__table,
.scool-size-guide__notes {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px;
}
.scool-size-guide__notes {
  background: #eef1fb;
  border-color: #d7defa;
}

@media (max-width: 899px) {
  .scool-size-guide__side {
    order: -1;
  }
}
.scool-size-guide__measure h2,
.scool-size-guide__table h2,
.scool-size-guide__notes h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0 0 16px;
}
.scool-size-guide__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.scool-size-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.scool-size-guide__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scool-size-guide__step-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.scool-size-guide__step-media {
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--surface-container);
  border-radius: 12px;
  overflow: hidden;
  display: block;
}
.scool-size-guide__step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scool-size-guide__step-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.scool-size-guide__step h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.scool-size-guide__step p {
  margin: 0;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-size-guide__table table {
  width: 100%;
  border-collapse: collapse;
}
.scool-size-guide__table th,
.scool-size-guide__table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
  font-size: 14px;
}
.scool-size-guide__table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-size-guide__notes ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-size-guide__sizefeed {
  margin-top: 32px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 24px;
}
.scool-size-guide__sizefeed h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0 0 4px;
}
.scool-size-guide__sizefeed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.scool-size-guide__sizefeed-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 12px;
  padding: 14px;
  color: var(--wp--preset--color--on-surface);
}
.scool-size-guide__sizefeed-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
}
.scool-size-guide__sizefeed-product {
  font-size: 14px;
  font-weight: 700;
}
.scool-size-guide__sizefeed-fit {
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-size-guide__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* -- 12b. Flash sale ------------------------------------------------------ */

.scool-flash-sale__hero {
  background: var(--wp--preset--color--on-surface-inverse);
  color: #fff;
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  margin-bottom: 32px;
}
.scool-flash-sale__hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
}
.scool-flash-sale__hero h1 span {
  color: var(--wp--preset--color--primary-container);
}
.scool-flash-sale__hero p {
  opacity: 0.85;
  margin: 0 0 20px;
}
.scool-flash-sale__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 95, 0, 0.12);
  border: 1px solid rgba(255, 95, 0, 0.35);
  color: var(--wp--preset--color--primary-container);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 999px;
  margin: 0 0 20px;
}
.scool-flash-sale__hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-container);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .scool-flash-sale__hero-badge {
    font-size: 10.5px;
    letter-spacing: 0.02em;
    padding: 8px 14px;
    text-align: left;
  }
}
.scool-flash-sale__countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.scool-flash-sale__countdown-cell {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--wp--preset--color--primary-container);
  border-radius: 6px;
  padding: 12px 16px;
  min-width: 64px;
  transform: skewX(-10deg);
}
.scool-flash-sale__countdown-cell > * {
  display: block;
  transform: skewX(10deg);
}
.scool-flash-sale__countdown-value {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 800;
}
.scool-flash-sale__countdown-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-top: 4px;
}
.scool-flash-sale__ended {
  font-weight: 700;
  color: var(--wp--preset--color--primary-container);
}
.scool-flash-sale__grid,
.scool-flash-sale__combo,
.scool-flash-sale__terms {
  margin-bottom: 40px;
}
.scool-flash-sale__grid h2,
.scool-flash-sale__combo h2,
.scool-flash-sale__terms h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  margin: 0 0 16px;
}

/* -- Card riêng cho lưới Flash Sale (mockup: badge -X%/tồn kho lửa/nút thêm
   giỏ — không dùng chung card PLP/Home vì thừa wishlist/chip trọng lượng).
   3 card ở mobile, card thứ 4 (`--desktop-only`) chỉ hiện từ 768px. -------- */
.scool-flash-sale__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .scool-flash-sale__cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}
.scool-flash-card {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scool-flash-card--desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .scool-flash-card--desktop-only {
    display: flex;
  }
}
.scool-flash-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface-container-low);
}
.scool-flash-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scool-flash-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.scool-flash-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.scool-flash-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
}
.scool-flash-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.scool-flash-card__price ins {
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  color: var(--wp--preset--color--primary-container);
}
.scool-flash-card__price del {
  font-size: 12px;
  opacity: 0.6;
}
.scool-flash-card__stock {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--primary-container);
}
.scool-flash-card__cta {
  margin-top: auto;
  padding-top: 4px;
}
.scool-flash-card__cta a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(255, 95, 0, 0.1);
  color: var(--wp--preset--color--primary-container);
  border-radius: 8px;
  padding: 8px;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}
.scool-flash-card__cta a.added_to_cart {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
}
.scool-flash-sale__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.scool-flash-sale__more a {
  border: 2px solid var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  padding: 10px 28px;
  border-radius: 999px;
  text-decoration: none;
}

.scool-flash-sale__terms {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 24px;
}
.scool-flash-sale__terms ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* -- "Combo Ưu Đãi" 3-tile promo (mockup: 1 tile lớn nổi bật ở giữa) ---- */
.scool-flash-sale__combo h2 {
  text-align: center;
  font-style: italic;
  text-transform: uppercase;
}
.scool-flash-sale__combo h2 span {
  color: var(--wp--preset--color--primary-container);
}
.scool-flash-sale__combo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.scool-flash-sale__combo-tile {
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-variant);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scool-flash-sale__combo-tile .material-symbols-outlined {
  color: var(--wp--preset--color--primary-container);
  opacity: 0.5;
  font-size: 32px;
}
.scool-flash-sale__combo-tile h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
}
.scool-flash-sale__combo-percent {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--wp--preset--color--primary-container);
  margin: 8px 0 0;
}
.scool-flash-sale__combo-tile--best {
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  order: -1;
}
.scool-flash-sale__combo-tile--best .scool-flash-sale__combo-percent {
  color: #fff;
  font-size: 44px;
}
.scool-flash-sale__combo-tag {
  align-self: flex-start;
  background: #fff;
  color: var(--wp--preset--color--primary-container);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 999px;
}
.scool-flash-sale__combo-cta {
  align-self: flex-start;
  margin-top: 12px;
  background: #fff;
  color: var(--wp--preset--color--primary-container);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration: none;
}
@media (min-width: 768px) {
  .scool-flash-sale__combo-grid {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: stretch;
  }
  .scool-flash-sale__combo-tile--best {
    order: 0;
  }
}

/* -- "Khu vực đồng giá" dark zone (mockup: full dark section, distinct
   from the light product grid above it — findings 37/38/40). ----------- */
.scool-flash-sale__zone-99k {
  background: var(--wp--preset--color--on-surface-inverse, #191c1e);
  color: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 40px;
}
.scool-flash-sale__zone-99k-tag {
  display: inline-block;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.scool-flash-sale__zone-99k h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 12px;
}
.scool-flash-sale__zone-99k p {
  opacity: 0.75;
  margin: 0 0 20px;
}
.scool-flash-sale__zone-99k-cta {
  display: none;
  border: 2px solid var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration: none;
}
@media (min-width: 900px) {
  .scool-flash-sale__zone-99k-cta {
    display: inline-block;
  }
}
.scool-flash-sale__zone-99k-grid .products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.scool-flash-sale__zone-99k-grid .products li.product {
  background: var(--wp--preset--color--surface-container-lowest);
  border-radius: 16px;
  color: var(--wp--preset--color--on-surface);
}
@media (min-width: 900px) {
  .scool-flash-sale__zone-99k {
    padding: 48px;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
  }
  .scool-flash-sale__zone-99k h2 {
    font-size: 40px;
  }
}

/* -- 12c. Trang đánh giá (review hub) ------------------------------------ */

.scool-reviewshub__hero {
  text-align: left;
  margin-bottom: 24px;
}
.scool-reviewshub__hero h1 {
  font-family: "Montserrat", sans-serif;
  margin: 0 0 8px;
}
/* mockup/review: heading đổi hẳn nội dung theo viewport (không chỉ cỡ chữ)
   — mobile "Cộng Đồng" 32px, desktop "Review & khách hàng thật scool.vn"
   48px (finding P2 #21). Cả hai luôn có trong DOM (1 <h1> thật, không nhân
   đôi heading), CSS chỉ hiện đúng span theo breakpoint. */
.scool-reviewshub__hero-title--mobile {
  display: inline;
  font-size: 32px;
}
.scool-reviewshub__hero-title--desktop {
  display: none;
  font-size: 48px;
}
@media (min-width: 768px) {
  .scool-reviewshub__hero-title--mobile {
    display: none;
  }
  .scool-reviewshub__hero-title--desktop {
    display: inline;
  }
}
.scool-reviewshub__summary {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.scool-reviewshub__summary h2 {
  font-size: 18px;
  margin: 0 0 16px;
}
.scool-reviewshub__summary-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.scool-reviewshub__summary-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.scool-reviewshub__summary-bar-track {
  background: var(--wp--preset--color--surface-container-highest);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.scool-reviewshub__summary-bar-fill {
  background: var(--wp--preset--color--primary-container);
  height: 100%;
}
.scool-reviewshub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.scool-reviewshub__chip {
  border: 2px solid var(--wp--preset--color--surface-container-highest);
  background: var(--wp--preset--color--surface-container-lowest);
  color: var(--wp--preset--color--on-surface-variant);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.scool-reviewshub__chip.is-active {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}
.scool-reviewshub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.scool-reviewshub__card {
  position: relative;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* mockup/review mobile: badge "HOT" trên card đầu tiên. */
.scool-reviewshub__card-hot {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--wp--preset--color--error);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
}
@media (max-width: 767px) {
  .scool-reviewshub__card:first-child .scool-reviewshub__card-hot {
    display: block;
  }
}
.scool-reviewshub__card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface-container);
}
@media (min-width: 768px) {
  .scool-reviewshub__card-media {
    aspect-ratio: 1 / 1;
  }
}
.scool-reviewshub__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* mockup: badge Sizefeed đè lên ảnh chỉ ở desktop — mobile dùng fit-badge
   ngắn cạnh tên tác giả thay thế (finding P2 #20). */
.scool-reviewshub__card-sizefeed {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}
@media (min-width: 768px) {
  .scool-reviewshub__card-sizefeed {
    display: flex;
  }
}
.scool-reviewshub__card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
/* -- Desktop only: sao đứng riêng + 3 chỉ số (Êm/Bám/Bền). -------------- */
.scool-reviewshub__card-stars-desktop {
  display: none;
}
.scool-reviewshub__card-criteria {
  display: none;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface-variant);
}
@media (min-width: 768px) {
  .scool-reviewshub__card-stars-desktop {
    display: block;
  }
  .scool-reviewshub__card-criteria {
    display: flex;
  }
}
.scool-reviewshub__card-quote {
  font-size: 13px;
  font-style: italic;
  color: var(--wp--preset--color--on-surface);
  flex-grow: 1;
  margin: 0;
}
/* -- Mobile only: mini product-card footer ("Xem"). --------------------- */
.scool-reviewshub__card-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--primary);
  text-align: center;
  border: 1px solid var(--wp--preset--color--primary-fixed);
  border-radius: 999px;
  padding: 8px 16px;
}
/* -- Desktop only: nút full-width "Xem sản phẩm này". -------------------- */
.scool-reviewshub__card-cta-full {
  display: none;
}
@media (min-width: 768px) {
  .scool-reviewshub__card-cta-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary);
    border: 1px solid rgba(166, 59, 0, 0.2);
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
  }
  .scool-reviewshub__card-cta-full:hover {
    background: var(--wp--preset--color--primary);
    color: #fff;
  }
}
/* -- Mobile only: hàng tác giả (avatar/tên/sao) + fit badge. ------------- */
.scool-reviewshub__card-author {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 768px) {
  .scool-reviewshub__card-author,
  .scool-reviewshub__card-product {
    display: none;
  }
}
.scool-reviewshub__card-author-name-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scool-reviewshub__card-stars-mobile .scool-star-icons {
  gap: 1px;
}
.scool-reviewshub__card-fit {
  margin-left: auto;
  background: var(--wp--preset--color--surface-container-low);
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.scool-reviewshub__card-product {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 10px;
  padding: 8px;
}
.scool-reviewshub__card-product img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.scool-reviewshub__card-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  min-width: 0;
}
.scool-reviewshub__card-product-name {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scool-reviewshub__card-product-price {
  font-size: 12px;
  font-weight: 800;
  color: var(--wp--preset--color--error);
}
.scool-reviewshub__card-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--secondary-container);
  color: var(--wp--preset--color--on-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
}
.scool-reviewshub__card-author-name {
  font-weight: 700;
  font-size: 13px;
}

/* -- Mobile: "Cộng Đồng" — real reviews as vertical lifestyle cards, no
   desktop aggregate-stats/filter-grid hybrid (mockup/review mobile has no
   summary bars section at all — finding 43 P1). ------------------------- */
@media (max-width: 767px) {
  .scool-reviewshub__summary {
    display: none;
  }
  .scool-reviewshub__chips {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .scool-reviewshub__chips::-webkit-scrollbar {
    display: none;
  }
  .scool-reviewshub__chip {
    flex: 0 0 auto;
  }
  .scool-reviewshub__grid {
    grid-template-columns: 1fr;
  }
}
.scool-star-icons {
  display: inline-flex;
  gap: 2px;
  color: var(--wp--preset--color--surface-container-highest);
}
.scool-star-icon.is-filled {
  color: var(--wp--preset--color--primary-container);
  fill: currentColor;
}

/* -- 12d. Tra cứu đơn hàng (noindex, không breadcrumb) ------------------- */

.scool-order-lookup {
  max-width: 900px;
}
.scool-order-lookup__tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.scool-order-lookup__tab {
  text-align: left;
  background: var(--wp--preset--color--surface-container-lowest);
  border: none;
  border-left: 4px solid transparent;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--wp--preset--color--on-surface);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(86, 94, 116, 0.08);
}
.scool-order-lookup__tab.is-active {
  color: var(--wp--preset--color--primary);
  border-left-color: var(--wp--preset--color--primary);
}
.scool-order-lookup__panel[hidden] {
  display: none;
}
.scool-order-lookup__hero h1,
.scool-order-lookup__panel > h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  margin: 0 0 24px;
  /* Việc 39: mockup không viết hoa tiêu đề — tắt rule uppercase chung h1
     site-wide riêng cho trang này. */
  text-transform: none;
}
/* Việc 39: tiêu đề đổi theo viewport (desktop "Theo dõi hành trình" / mobile
   "Tra cứu đơn hàng") — cùng kỹ thuật đã dùng ở trang Đánh giá (mục 12c). */
.scool-order-lookup__hero-title--mobile {
  display: inline;
}
.scool-order-lookup__hero-title--desktop {
  display: none;
}
@media (min-width: 768px) {
  .scool-order-lookup__hero-title--mobile {
    display: none;
  }
  .scool-order-lookup__hero-title--desktop {
    display: inline;
  }
}
.scool-order-lookup__sample {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-order-lookup__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px;
}
@media (min-width: 768px) {
  .scool-order-lookup {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1000px;
  }
  .scool-order-lookup__tabs {
    flex: 0 0 220px;
  }
  .scool-order-lookup__panel {
    flex: 1 1 auto;
    background: var(--wp--preset--color--surface-container-lowest);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    padding: 32px;
  }
  .scool-order-lookup__panel .scool-order-lookup__form {
    flex-direction: row;
    align-items: flex-end;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 24px;
  }
  .scool-order-lookup__panel .scool-order-lookup__field {
    flex: 1 1 auto;
  }
  .scool-order-lookup__panel [data-order-lookup-submit] {
    flex: 0 0 auto;
    height: 48px;
  }
}
@media (max-width: 767px) {
  .scool-order-lookup__tabs {
    flex-direction: row;
    gap: 0;
    margin: 0 -16px 24px;
    box-shadow: inset 0 -1px var(--wp--preset--color--surface-container-highest);
  }
  .scool-order-lookup__tab {
    flex: 1 1 0;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .scool-order-lookup__tab.is-active {
    border-bottom-color: var(--wp--preset--color--primary);
  }
}
.scool-order-lookup__field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wp--preset--color--on-surface-variant);
  margin-bottom: 6px;
}
.scool-order-lookup__field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  font-size: 15px;
}
.scool-order-lookup__field input:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary-container);
}
.scool-order-lookup__error {
  background: rgba(186, 26, 26, 0.08);
  color: var(--wp--preset--color--error);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  margin-top: 16px;
}
.scool-order-lookup__note {
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
  margin-top: 16px;
}
.scool-order-lookup__result {
  margin-top: 24px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px;
}
.scool-order-lookup__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.scool-order-lookup__summary h2 {
  font-size: 18px;
  margin: 0;
}
.scool-order-lookup__summary h2 span {
  color: var(--wp--preset--color--primary);
}
.scool-order-lookup__status-badge {
  background: var(--wp--preset--color--secondary-fixed, #dae2fd);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
}
.scool-order-lookup__status-badge.is-negative {
  background: rgba(186, 26, 26, 0.12);
  color: var(--wp--preset--color--error);
}
.scool-order-lookup__date {
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
  margin: 0 0 20px;
}
/* Việc 39 (mockup/tra-cuu-don): timeline DỌC (trước là thanh ngang minh
   hoạ) — dùng chung cho cả sample tĩnh (PHP) lẫn kết quả AJAX thật
   (order-lookup.js render đúng cùng class .scool-order-lookup__step). */
.scool-order-lookup__timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.scool-order-lookup__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding-left: 28px;
}
.scool-order-lookup__step::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -20px;
  width: 2px;
  height: 20px;
  background: var(--wp--preset--color--surface-container-highest);
}
.scool-order-lookup__step:first-child::before {
  display: none;
}
.scool-order-lookup__step span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-highest);
  display: block;
}
.scool-order-lookup__step.is-done span,
.scool-order-lookup__step.is-current span {
  background: var(--wp--preset--color--primary-container);
}
.scool-order-lookup__step.is-negative span {
  background: var(--wp--preset--color--error);
}
.scool-order-lookup__step p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-order-lookup__step.is-done p,
.scool-order-lookup__step.is-current p {
  color: var(--wp--preset--color--on-surface);
}
.scool-order-lookup__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
  padding-top: 16px;
}
.scool-order-lookup__item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.scool-order-lookup__item img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.scool-order-lookup__item-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.scool-order-lookup__item-qty {
  margin: 0;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-order-lookup__item-total {
  margin: 0;
  font-weight: 700;
}
.scool-order-lookup__totals {
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
  margin-top: 16px;
  padding-top: 16px;
}
.scool-order-lookup__totals p {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-order-lookup__totals-grand {
  font-size: 15px !important;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface) !important;
}
.scool-order-lookup__address {
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
  margin: 16px 0;
}
.scool-order-lookup__result [data-order-lookup-reorder] {
  width: 100%;
}

@media (max-width: 600px) {
  .scool-flash-sale__countdown-cell {
    min-width: 52px;
    padding: 10px 8px;
  }
  .scool-flash-sale__countdown-value {
    font-size: 22px;
  }
}

/* ==========================================================================
   13. Job C/3 — Blog (list + bài viết), FAQ, Chính sách đổi trả, Về chúng tôi.
   Dùng lại đúng khung/token đã có ở mục 12 (.scool-breadcrumb, .scool-btn,
   .scool-empty-note, .scool-faq__item dùng chung với .scool-plp-faq__item).
   ========================================================================= */

.scool-blog-list,
.scool-blog-post,
.scool-faq,
.scool-chinh-sach,
.scool-ve-chung-toi {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* -- 13a. Blog list -------------------------------------------------------- */

.scool-blog-list__hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
  /* Việc 20 (audit lần 2/3): mockup viết title-case (không phải chữ hoa nâu
     như rule uppercase chung h1 site-wide) — tắt riêng cho trang này. */
  text-transform: none;
  margin: 0 0 8px;
}
@media (min-width: 900px) {
  .scool-blog-list__hero h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
}
.scool-blog-list__hero p {
  /* Việc 18 (audit lần 2/3): mockup KHÔNG có mô tả dưới H1 ở cả 2 viewport —
     trước đó chỉ ẩn <699px (Việc 23), thiếu phần desktop. Ẩn hẳn mọi kích
     thước thay vì xoá khỏi PHP (giữ nguyên quy ước cũ, chỉ mở rộng CSS). */
  display: none;
}

.scool-blog-list__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 24px 0;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scool-blog-list__chips::-webkit-scrollbar {
  display: none;
}
.scool-blog-list__chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-blog-list__chip.is-active {
  border-color: var(--wp--preset--color--primary-container);
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}

.scool-blog-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  overflow: hidden;
}
.scool-blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.scool-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scool-blog-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wp--preset--color--error);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
}
.scool-blog-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--wp--preset--color--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}
.scool-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.scool-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.scool-blog-card__topic {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--wp--preset--color--primary);
}
.scool-blog-card__title {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
}
.scool-blog-card__date {
  font-size: 14px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* Full-bleed hero treatment (mockup: overlay title on the cover photo,
   not a split image/text card) — image fills the card, gradient + text sit
   on top via absolute positioning. */
.scool-blog-card--featured {
  position: relative;
  display: block;
  margin-bottom: 24px;
  min-height: 320px;
}
.scool-blog-card--featured .scool-blog-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
}
.scool-blog-card--featured .scool-blog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
}
.scool-blog-card--featured .scool-blog-card__body {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  min-height: 320px;
  padding: 24px;
  color: #fff;
}
.scool-blog-card--featured .scool-blog-card__topic {
  color: var(--wp--preset--color--primary-container);
}
.scool-blog-card--featured .scool-blog-card__title {
  color: #fff;
}
.scool-blog-card--featured .scool-blog-card__date {
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 900px) {
  .scool-blog-card--featured {
    min-height: 420px;
  }
  .scool-blog-card--featured .scool-blog-card__body {
    min-height: 420px;
    padding: 40px;
    max-width: 640px;
  }
  .scool-blog-card--featured .scool-blog-card__title {
    font-size: 32px;
    font-weight: 800;
  }
  .scool-blog-card--featured .scool-blog-card__date {
    font-size: 12px;
    letter-spacing: 0.025em;
  }
}

.scool-blog-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) {
  .scool-blog-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Việc 25: mốc 3 cột phải > 1024 (tablet 1024 vẫn 2 cột theo "md" của
   mockup — cũ để 1000px nên tablet 1024 đã rơi vào 3 cột, sai). */
@media (min-width: 1200px) {
  .scool-blog-list__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Việc 23 mobile: card danh sách đổi từ ảnh-trên-chữ-dưới sang hàng ngang
   compact, thumbnail vuông 96×96 bên trái (mockup mobile blog-list). Mô tả
   dưới H1 đã ẩn chung mọi kích thước ở rule `.scool-blog-list__hero p` phía
   trên (Việc 18). */
@media (max-width: 699px) {
  .scool-blog-card:not(.scool-blog-card--featured) {
    flex-direction: row;
  }
  .scool-blog-card:not(.scool-blog-card--featured) .scool-blog-card__media {
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: 1 / 1;
  }
  .scool-blog-card:not(.scool-blog-card--featured) .scool-blog-card__body {
    flex: 1;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
  }
  .scool-blog-card:not(.scool-blog-card--featured) .scool-blog-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.scool-blog-list__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  font-size: 13px;
}
.scool-blog-list__pagination a,
.scool-blog-list__pagination span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-blog-list__pagination .current {
  background: var(--wp--preset--color--on-surface);
  border-color: var(--wp--preset--color--on-surface);
  color: #fff;
}

/* -- 13b. Email capture (Blog list + cuối bài blog) ------------------------
   Việc 24: mobile mặc định thẻ xám pattern + icon thư đỏ + nút đỏ (mockup
   blog-list mobile); ≥900px trên trang Blog list đổi sang section cam
   full-width, viền đen phía trên, form nằm ngang (mockup blog-list desktop).
   Trang blog-post có bộ ghi đè riêng của nó ở mục 13c (mockup khác hẳn:
   banner nâu desktop / thẻ tím nhạt mobile). */

.scool-email-capture {
  position: relative;
  background: var(--wp--preset--color--surface-container);
  background-image: radial-gradient(var(--wp--preset--color--surface-container-highest) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 16px;
  padding: 40px 24px 32px;
  text-align: center;
  margin: 40px 0;
}
.scool-email-capture__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--error);
  color: #fff;
  margin-bottom: 12px;
}
.scool-email-capture h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--wp--preset--color--on-surface);
}
.scool-email-capture p {
  color: var(--wp--preset--color--on-surface-variant);
  margin: 0 0 16px;
}
.scool-email-capture__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.scool-email-capture__form input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--outline-variant);
}
.scool-email-capture__form button {
  background: var(--wp--preset--color--error);
  color: #fff;
}
.scool-email-capture__message {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.scool-email-capture__message.is-error {
  color: var(--wp--preset--color--error);
}

@media (min-width: 900px) {
  .scool-blog-list .scool-email-capture {
    background-image: none;
    background-color: var(--wp--preset--color--primary-container);
    border-radius: 0;
    /* Việc 19 (audit lần 2/3): `on-background` không tồn tại trong
       theme.json (bảng màu mục 1) — var() rỗng khiến cả border-top lẫn nút
       bên dưới không bao giờ lên màu đen như mockup. Đổi sang `on-surface`
       (#191c1e, token thật gần đen nhất đã đăng ký). */
    border-top: 4px solid var(--wp--preset--color--on-surface);
    padding: 40px 24px;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }
  .scool-blog-list .scool-email-capture__icon {
    display: none;
  }
  .scool-blog-list .scool-email-capture h2 {
    /* Việc 19: mockup heading màu đen (tối), không phải trắng. */
    color: var(--wp--preset--color--on-surface);
    font-size: 24px;
    font-weight: 800;
  }
  .scool-blog-list .scool-email-capture p {
    color: var(--wp--preset--color--on-primary-container);
    font-size: 18px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .scool-blog-list .scool-email-capture__form {
    flex-direction: row;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
  }
  .scool-blog-list .scool-email-capture__form input[type="email"] {
    flex: 1 1 auto;
  }
  .scool-blog-list .scool-email-capture__form button {
    background: var(--wp--preset--color--on-surface);
    font-size: 12px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* -- 13c. Bài blog ---------------------------------------------------------- */

.scool-blog-post > .scool-breadcrumb {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.scool-blog-post h1.wp-block-post-title {
  max-width: 720px;
  margin: 0 auto 12px;
  font-size: 32px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
}
@media (min-width: 900px) {
  .scool-blog-post h1.wp-block-post-title {
    font-size: 48px;
    letter-spacing: -0.02em;
  }
}
.scool-post-meta {
  max-width: 720px;
  margin: 0 auto 24px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
@media (min-width: 900px) {
  .scool-post-meta__author {
    font-size: 14px;
    font-weight: 700;
  }
}
.scool-blog-post__hero-image {
  max-width: 720px;
  margin: 0 auto 32px;
  border-radius: 16px;
  overflow: hidden;
}
.scool-blog-post__hero-image img {
  width: 100%;
  object-fit: cover;
}

/* Việc 30 mobile: bỏ breadcrumb + đổi thứ tự hero → metadata → tiêu đề
   (mockup mobile không có breadcrumb, ảnh hero lên đầu ngay dưới app bar).
   Desktop giữ nguyên thứ tự breadcrumb → tiêu đề → meta → hero như cũ. */
@media (max-width: 767px) {
  .scool-blog-post {
    display: flex;
    flex-direction: column;
  }
  .scool-blog-post > .scool-breadcrumb {
    display: none;
  }
  .scool-blog-post__hero-image {
    order: 1;
  }
  .scool-post-meta {
    order: 2;
  }
  .scool-blog-post h1.wp-block-post-title {
    order: 3;
  }
  .scool-blog-post__content {
    order: 4;
  }
  .scool-post-related-products {
    order: 5;
  }
  .scool-email-capture {
    order: 6;
  }
  .scool-related-posts {
    order: 7;
  }
}
.scool-blog-post__content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}
@media (min-width: 900px) {
  .scool-blog-post__content {
    font-size: 18px;
  }
}
.scool-blog-post__content h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
}
.scool-blog-post__content h3 {
  font-size: 18px;
  margin-top: 24px;
}
.scool-blog-post__content .scool-blog-post__duo-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.scool-blog-post__content .scool-blog-post__duo-images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(25, 28, 30, 0.1);
}
.scool-blog-post__content a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}
.scool-post-related-products,
.scool-related-posts {
  max-width: 960px;
  margin: 48px auto 0;
}
.scool-post-related-products h2,
.scool-related-posts h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}
/* Finding blog-post#4 (do-copy): card san pham dung chung
   `ul.products li.product` voi PLP/Home nhung mockup blog-post doi mot
   scale khac (ten/gia lon hon, Montserrat thay vi Inter) — override scope
   rieng, khong dung chung selector voi PLP (them ca ul/li de thang duoc
   rule mobile 767px cua base ul.products). */
.scool-post-related-products ul.products li.product .woocommerce-loop-product__title {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
}
.scool-post-related-products ul.products li.product .price {
  font-size: 20px;
  font-weight: 700;
}
@media (min-width: 900px) {
  .scool-post-related-products ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
  }
}

/* Việc 28: card "Bento" in-flow (mobile), chèn ngay trong post-content
   trước "Kết luận" — thay cho việc phải cuộn tới lưới sản phẩm cuối bài. */
.scool-blog-post__bento-product {
  margin: 24px 0;
}
.scool-blog-post__bento-product a {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}
.scool-blog-post__bento-media {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}
.scool-blog-post__bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scool-blog-post__bento-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scool-blog-post__bento-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--primary);
}
.scool-blog-post__bento-name {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.scool-blog-post__bento-price {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--wp--preset--color--primary);
}
.scool-blog-post__bento-price del {
  color: var(--wp--preset--color--on-surface-variant);
  font-weight: 400;
  opacity: 0.7;
  margin-right: 6px;
}
.scool-blog-post__bento-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
}
@media (min-width: 768px) {
  .scool-blog-post__bento-product {
    display: none;
  }
  .scool-post-related-products--has-inline-bento {
    display: block;
  }
}
@media (max-width: 767px) {
  .scool-post-related-products--has-inline-bento {
    display: none;
  }
}

/* Việc 29: khối đăng ký cuối bài blog RIÊNG với blog-list — mobile thẻ tím
   nhạt + icon thư (không phải xám pattern), desktop banner nâu chữ trái/
   form phải (không phải cam full-width viền đen của blog-list). Màu tím
   nhạt #dae2fd lấy đúng từ token "secondary-container" của mockup Stitch
   (chưa đăng ký trong theme.json nên dùng thẳng giá trị hex nguồn). */
.scool-blog-post .scool-email-capture {
  background: var(--wp--preset--color--secondary-fixed, #dae2fd);
  background-image: none;
}
.scool-blog-post .scool-email-capture__icon {
  background: var(--wp--preset--color--error);
}
.scool-blog-post .scool-email-capture h2 {
  font-size: 24px;
}
.scool-blog-post .scool-email-capture__form button {
  font-size: 12px;
  letter-spacing: 0.05em;
}
@media (min-width: 900px) {
  .scool-blog-post .scool-email-capture {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    background: var(--wp--preset--color--primary);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }
  .scool-blog-post .scool-email-capture__icon {
    display: none;
  }
  .scool-blog-post .scool-email-capture__text {
    max-width: 360px;
  }
  .scool-blog-post .scool-email-capture h2 {
    color: #fff;
  }
  .scool-blog-post .scool-email-capture p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
  }
  .scool-blog-post .scool-email-capture__form {
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
  }
  .scool-blog-post .scool-email-capture__form input[type="email"] {
    width: 260px;
  }
  .scool-blog-post .scool-email-capture__form button {
    background: var(--wp--preset--color--primary-container);
    white-space: nowrap;
  }
}

/* -- 13d. FAQ ---------------------------------------------------------------- */

.scool-faq__hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  text-align: center;
  color: var(--wp--preset--color--primary);
  /* Việc 31: mockup không viết hoa tiêu đề FAQ — tắt riêng rule uppercase
     chung h1 site-wide (mục 1, đầu style.css). */
  text-transform: none;
}
/* Việc 23 (audit lần 2/3): tiêu đề + mô tả đổi theo viewport — cùng kỹ thuật
   đã dùng ở trang Tra cứu đơn (mục 12c của style.css). Mô tả CHỈ hiện
   desktop (mockup mobile không có mô tả dưới H1). */
.scool-faq__hero-title--mobile {
  display: inline;
}
.scool-faq__hero-title--desktop {
  display: none;
}
.scool-faq__hero-desc {
  display: none;
  color: var(--wp--preset--color--on-surface-variant);
  text-align: center;
  max-width: 480px;
  margin: 8px auto 0;
}
@media (min-width: 768px) {
  .scool-faq__hero-title--mobile {
    display: none;
  }
  .scool-faq__hero-title--desktop {
    display: inline;
  }
  .scool-faq__hero-desc {
    display: block;
  }
}
.scool-faq__search {
  max-width: 480px;
  margin: 0 auto 20px;
}
.scool-faq__search input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  /* Việc 27 (audit lần 2/3): mockup viền xám trung tính, không phải
     outline-variant (hồng nhạt) — đổi sang surface-container-highest (token
     xám dùng chung cho input toàn site, xem .scool-order-lookup__field). */
  border: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-faq__search input:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary-container);
}
.scool-faq__chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}
@media (min-width: 768px) {
  .scool-faq__chips {
    justify-content: center;
    flex-wrap: wrap;
  }
}
.scool-faq__chip {
  border: 1px solid var(--wp--preset--color--outline-variant);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
  cursor: pointer;
  white-space: nowrap;
}
.scool-faq__chip.is-active {
  border-color: var(--wp--preset--color--primary-container);
  background: var(--wp--preset--color--primary-container);
  color: #fff;
}
.scool-faq__list {
  max-width: 800px;
  margin: 0 auto;
}
/* Việc 32 (audit lần 2/3): mobile hiện 3 nhóm riêng của mockup mobile,
   desktop hiện 2 cụm gộp của mockup desktop — 2 biến thể cùng render, CSS
   ẩn/hiện theo breakpoint (cùng mốc 768px với CTA bên dưới). */
.scool-faq__list-variant--desktop {
  display: none;
}
@media (min-width: 768px) {
  .scool-faq__list-variant--mobile {
    display: none;
  }
  .scool-faq__list-variant--desktop {
    display: block;
  }
}
.scool-faq__cluster {
  margin-bottom: 28px;
}
.scool-faq__cluster-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  /* Việc 26 (audit lần 2/3): mockup viết Title Case ("Đặt hàng & Thanh
     toán") — tắt rule uppercase chung h1-h4 (nhóm heading này dùng thẻ h2). */
  text-transform: none;
}
.scool-faq__group {
  margin-bottom: 16px;
}
.scool-faq__group:last-child {
  margin-bottom: 0;
}
.scool-faq__item {
  /* Việc 25 (audit lần 2/3): mockup là thẻ trắng có viền + đổ bóng nhẹ, không
     phải khối xám đặc như trước. */
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  box-shadow: 0 1px 3px rgba(25, 28, 30, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.scool-faq__item summary {
  cursor: pointer;
  font-weight: 700;
}
.scool-faq__item p {
  margin: 10px 0 0;
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
  line-height: 1.6;
}
/* Việc 33: desktop giữ banner cam 1 nút (mockup/faq desktop); mobile đổi
   sang thẻ xanh nhạt + 2 nút Chat Zalo/Hotline (mockup/faq mobile) — 2 khối
   riêng, CSS ẩn/hiện theo breakpoint (cùng pattern desktop/mobile khác nhau
   đã dùng ở chính sách đổi trả). */
.scool-faq__cta {
  text-align: center;
  /* Việc 24 (audit lần 2/3): cùng bề rộng cột danh sách FAQ (800px, xem
     .scool-faq__list) thay vì tràn hết 1200px container ngoài. */
  max-width: 800px;
  margin: 40px auto 0;
  padding: 32px 24px;
  background: var(--wp--preset--color--primary-container);
  border-radius: 24px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scool-faq__cta h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0;
  color: var(--wp--preset--color--on-surface);
}
.scool-faq__cta p {
  color: var(--wp--preset--color--on-primary-container);
  font-size: 14px;
  max-width: 480px;
  margin: 0 0 8px;
}
.scool-faq__cta .scool-btn--primary {
  background: #fff;
  color: var(--wp--preset--color--primary);
}
.scool-faq__cta .scool-btn--primary:hover {
  background: var(--wp--preset--color--surface-container-low);
}
.scool-faq__cta-mobile {
  margin-top: 32px;
  padding: 24px;
  background: var(--wp--preset--color--secondary-fixed, #dae2fd);
  border: 1px solid var(--wp--preset--color--secondary-fixed, #bec6e0);
  border-radius: 16px;
  text-align: center;
}
.scool-faq__cta-mobile h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  margin: 0 0 8px;
}
.scool-faq__cta-mobile p {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
  margin: 0 0 16px;
}
.scool-faq__cta-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scool-faq__cta-mobile-actions .scool-btn {
  width: 100%;
  padding: 12px 24px;
}
@media (min-width: 768px) {
  .scool-faq__cta {
    display: flex;
  }
  .scool-faq__cta-mobile {
    display: none;
  }
}

/* -- 13e. Chính sách đổi trả ------------------------------------------------- */

/* Việc 28/32 (audit lần 2/3): H1 nay là con đầu tiên của `.content` (trước
   đó là 1 <header class="hero"> đứng trước cả hàng sidebar/content — không
   nằm trong panel trắng desktop như mockup). Mobile sentence-case đen
   (không có panel bao quanh); desktop title-case đen, xem override 900px
   bên dưới. */
.scool-chinh-sach__content > h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  color: var(--wp--preset--color--on-surface);
  text-transform: none;
  margin: 0 0 16px;
}
.scool-chinh-sach__layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}
/* Việc 34/36: mục lục dùng chung 1 nav (icon + nhãn) — mobile hiện qua
   accordion "Nội dung chính", desktop hiện qua sidebar sticky. CSS ẩn/hiện
   theo breakpoint, không lặp 2 lần trong PHP (đã render sẵn ở cả 2 khối). */
.scool-chinh-sach__toc-mobile,
.scool-chinh-sach__sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scool-chinh-sach__toc-mobile a,
.scool-chinh-sach__sidebar nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
}
.scool-chinh-sach__toc-mobile a svg,
.scool-chinh-sach__sidebar nav a svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--wp--preset--color--primary-container);
}
.scool-chinh-sach__toc-mobile {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.scool-chinh-sach__toc-mobile summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Việc 32 (audit lần 2/3): icon mục lục màu cam trước nhãn "Nội dung chính". */
.scool-chinh-sach__toc-mobile-icon {
  display: inline-flex;
  color: var(--wp--preset--color--primary-container);
}
.scool-chinh-sach__toc-mobile nav {
  padding: 0 18px 16px;
  border-top: 1px solid var(--wp--preset--color--surface-container-highest);
  padding-top: 12px;
}
.scool-chinh-sach__sidebar {
  display: none;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 18px;
}
.scool-chinh-sach__sidebar h3 {
  font-size: 14px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wp--preset--color--surface-container-highest);
}
.scool-chinh-sach__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.scool-chinh-sach__faq h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  margin: 0 0 16px;
}
/* Việc 33/35: desktop giữ CTA cam icon+mô tả+1 nút; mobile đổi thẻ xanh
   nhạt 2 nút Chat Zalo/Hotline (cùng pattern FAQ __cta / __cta-mobile). */
.scool-chinh-sach__cta {
  display: none;
  text-align: center;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scool-chinh-sach__cta-icon {
  color: var(--wp--preset--color--primary-container);
  margin-bottom: 4px;
}
.scool-chinh-sach__cta h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  margin: 0;
}
.scool-chinh-sach__cta p {
  color: var(--wp--preset--color--on-surface-variant);
  max-width: 480px;
  margin: 0 0 8px;
}
.scool-chinh-sach__cta-mobile {
  padding: 24px;
  background: var(--wp--preset--color--secondary-fixed, #dae2fd);
  border: 1px solid var(--wp--preset--color--secondary-fixed, #bec6e0);
  border-radius: 16px;
  text-align: center;
}
.scool-chinh-sach__cta-mobile h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  margin: 0 0 8px;
}
.scool-chinh-sach__cta-mobile p {
  color: var(--wp--preset--color--on-surface-variant);
  font-size: 14px;
  margin: 0 0 16px;
}
.scool-chinh-sach__cta-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scool-chinh-sach__cta-mobile-actions .scool-btn {
  width: 100%;
  padding: 12px 24px;
}
@media (min-width: 900px) {
  .scool-chinh-sach__toc-mobile {
    display: none;
  }
  .scool-chinh-sach__layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .scool-chinh-sach__sidebar {
    display: block;
    flex: 0 0 240px;
    position: sticky;
    top: 24px;
  }
  .scool-chinh-sach__content {
    flex: 1;
    background: var(--wp--preset--color--surface-container-lowest, #fff);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 8px 24px rgba(25, 28, 30, 0.08);
  }
  /* Việc 28 (audit lần 2/3): desktop viết title-case ("Chính Sách Đổi Trả")
     — text nguồn PHP là sentence-case, capitalize là cách duy nhất tạo
     title-case thật từ 1 nguồn văn bản mà không lặp chuỗi cho từng viewport. */
  .scool-chinh-sach__content > h1 {
    font-size: 32px;
    text-transform: capitalize;
    margin: 0 0 24px;
  }
  .scool-chinh-sach__cta {
    display: flex;
  }
  .scool-chinh-sach__cta-mobile {
    display: none;
  }
  /* Việc 29: desktop chỉ hiện bản giới thiệu+2 thẻ chấp nhận/từ chối, ẩn hẳn
     3 chương + timeline dành riêng cho mobile (và ngược lại). */
  .scool-chinh-sach__body-desktop {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .scool-chinh-sach__body-mobile {
    display: none;
  }
  /* Việc 31: FAQ căn giữa trên desktop (mockup), mobile giữ căn trái mặc định. */
  .scool-chinh-sach__faq {
    text-align: center;
  }
  .scool-chinh-sach__faq h2 {
    text-align: center;
  }
  .scool-chinh-sach__faq .scool-faq__item {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

/* -- 3 chương "Điều kiện/Quy trình/Chi phí" (Việc 35, MOBILE-ONLY từ audit
   lần 2/3 — Việc 29 tách riêng bản desktop đơn giản hơn ở dưới). Mobile-first:
   mặc định hiện bản mobile, ẩn bản desktop; override 900px ở khối media query
   phía trên đảo ngược lại. ------------------------------------------------- */
.scool-chinh-sach__body-mobile {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.scool-chinh-sach__body-desktop {
  display: none;
}
.scool-chinh-sach__body-mobile [id],
.scool-chinh-sach__body-desktop [id] {
  scroll-margin-top: 24px;
}
@media (max-width: 899px) {
  .scool-chinh-sach__banner {
    display: none;
  }
}

/* -- Desktop: bold orange callout banner right under the title (mockup),
   same real "đổi size 1-đổi-1" copy already in the callout inside chapter 1
   (.scool-chinh-sach__body #doi-size) — hidden below 900px to avoid dup. -- */
.scool-chinh-sach__banner {
  background: var(--wp--preset--color--primary-container);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  color: #fff;
}
.scool-chinh-sach__banner h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  margin: 0 0 6px;
}
.scool-chinh-sach__banner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
}
.scool-chinh-sach__chapter h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  margin: 0 0 14px;
}
.scool-chinh-sach__chapter-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.scool-chinh-sach__callout {
  background: rgba(255, 95, 0, 0.08);
  border-left: 4px solid var(--wp--preset--color--primary-container);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.scool-chinh-sach__callout h3 {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--primary-container);
}
.scool-chinh-sach__callout p,
.scool-chinh-sach__chapter > p {
  margin: 0;
  color: var(--wp--preset--color--on-surface);
  line-height: 1.6;
}
.scool-chinh-sach__note {
  margin-top: 12px;
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-chinh-sach__timeline {
  position: relative;
  padding-left: 24px;
  border-left: 2px solid var(--wp--preset--color--surface-container-highest);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.scool-chinh-sach__timeline-step {
  position: relative;
  display: flex;
  gap: 12px;
}
.scool-chinh-sach__timeline-step span {
  position: absolute;
  left: -33px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 2px solid var(--wp--preset--color--primary-container);
  color: var(--wp--preset--color--primary-container);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scool-chinh-sach__timeline-step h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.scool-chinh-sach__timeline-step p {
  margin: 0;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-chinh-sach__cost-grid {
  display: grid;
  gap: 12px;
}
.scool-chinh-sach__cost-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 16px;
}
/* Việc 30 (audit lần 2/3): thêm icon cho 2 thẻ chi phí (mockup mobile) —
   trước đó chỉ có tiêu đề/mô tả, không có icon minh hoạ. */
.scool-chinh-sach__cost-card-icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--on-surface-variant);
  margin-top: 2px;
}
.scool-chinh-sach__cost-card h3 {
  margin: 0 0 4px;
  font-size: 13px;
  text-transform: uppercase;
}
.scool-chinh-sach__cost-card p {
  margin: 0;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* Việc 30 (audit lần 2/3): 2 dòng điều kiện có icon check/history (mockup
   mobile) chèn trước đoạn "lỗi sản xuất" thật đã có trong chương 1. */
.scool-chinh-sach__condition-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scool-chinh-sach__condition-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--wp--preset--color--on-surface);
}
.scool-chinh-sach__condition-list svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--wp--preset--color--primary-container);
}

/* Việc 29 (audit lần 2/3, DESKTOP-only — xem `.scool-chinh-sach__body-desktop`
   ở mục "3 chương" phía trên): icon đầu heading chương + 2 thẻ Được chấp
   nhận/Từ chối. */
.scool-chinh-sach__body-desktop .scool-chinh-sach__chapter > h2 > svg {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary-container);
}
.scool-chinh-sach__body-desktop ul {
  margin: 0;
  padding-left: 20px;
  color: var(--wp--preset--color--on-surface-variant);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scool-chinh-sach__accept-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .scool-chinh-sach__accept-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.scool-chinh-sach__accept-card {
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 16px;
}
.scool-chinh-sach__accept-card--no {
  background: rgba(186, 26, 26, 0.06);
}
.scool-chinh-sach__accept-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--wp--preset--color--on-surface);
}
/* Không có token "success/xanh lá" trong theme.json (bảng màu mục 1) — dùng
   hex trực tiếp cho riêng icon trang trí này, cùng quy ước fallback hex đã
   dùng cho secondary-fixed. */
.scool-chinh-sach__accept-card--yes h4 svg {
  color: #2e7d32;
}
.scool-chinh-sach__accept-card--no h4 svg {
  color: var(--wp--preset--color--error);
}
.scool-chinh-sach__accept-card ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}

/* Việc 31 (audit lần 2/3): CTA desktop đổi tông "primary" (nâu đậm) + viền
   ngoài đúng mockup — trước đó dùng "primary-container" (cam sáng) như CTA
   cam toàn site, sai tông so với khối CTA nền xám nhạt của trang này. */
.scool-chinh-sach__cta {
  border: 1px solid var(--wp--preset--color--outline-variant);
}
.scool-chinh-sach__cta-icon {
  color: var(--wp--preset--color--primary);
}
.scool-chinh-sach__cta .scool-btn--primary {
  background: var(--wp--preset--color--primary);
}
.scool-chinh-sach__cta .scool-btn--primary:hover {
  background: var(--wp--preset--color--on-primary-container);
}

/* -- 13f. Về chúng tôi -------------------------------------------------------- */

.scool-ve-chung-toi__hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 0 32px;
}
.scool-ve-chung-toi__hero-title {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  color: var(--wp--preset--color--on-surface);
  margin: 0;
}
.scool-ve-chung-toi__hero-desc {
  color: var(--wp--preset--color--on-surface-variant);
  line-height: 1.6;
  margin: 0;
}
.scool-ve-chung-toi__hero-media {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--wp--preset--color--surface-container-low);
  color: var(--wp--preset--color--on-surface-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  font-size: 13px;
  overflow: hidden;
}
.scool-ve-chung-toi__hero-media--photo {
  padding: 0;
}
.scool-ve-chung-toi__hero-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scool-ve-chung-toi__quality {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}
.scool-ve-chung-toi__quality h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
}
.scool-ve-chung-toi__quality p {
  color: var(--wp--preset--color--on-surface-variant);
  line-height: 1.6;
  margin: 0 0 12px;
}
.scool-ve-chung-toi__quality-link {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  text-decoration: none;
}
.scool-ve-chung-toi__quality-link:hover {
  text-decoration: underline;
}
.scool-ve-chung-toi__story {
  max-width: 720px;
  margin: 0 auto 40px;
  background: var(--wp--preset--color--surface-container-low);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px;
}
.scool-ve-chung-toi__story h2,
.scool-ve-chung-toi__store h2,
.scool-ve-chung-toi__contact h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  margin: 0 0 16px;
}
.scool-ve-chung-toi__story p {
  color: var(--wp--preset--color--on-surface-variant);
  line-height: 1.7;
  margin: 0 0 12px;
}
.scool-ve-chung-toi__story a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}
.scool-ve-chung-toi__quality-callout {
  background: rgba(255, 95, 0, 0.08);
  border-left: 4px solid var(--wp--preset--color--primary-container);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-top: 16px;
}
.scool-ve-chung-toi__quality-callout-label {
  font-weight: 800;
  color: var(--wp--preset--color--primary-container);
  margin: 0 0 6px !important;
}
.scool-ve-chung-toi__quality-callout p:last-child {
  font-style: italic;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .scool-ve-chung-toi__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title media" "desc media";
    align-items: center;
    gap: 40px;
  }
  .scool-ve-chung-toi__hero-title {
    grid-area: title;
  }
  .scool-ve-chung-toi__hero-desc {
    grid-area: desc;
  }
  .scool-ve-chung-toi__hero-media {
    grid-area: media;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 767px) {
  .scool-ve-chung-toi__quality {
    display: none;
  }
}
.scool-ve-chung-toi__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}
.scool-ve-chung-toi__stat {
  background: var(--wp--preset--color--surface-container-low);
  border-radius: 16px;
  padding: 24px 12px;
  text-align: center;
}
.scool-ve-chung-toi__stat:first-child {
  grid-column: 1 / -1;
}
.scool-ve-chung-toi__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--primary-container);
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .scool-ve-chung-toi__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .scool-ve-chung-toi__stat:first-child {
    grid-column: auto;
  }
  .scool-ve-chung-toi__stat-icon {
    display: none;
  }
}
.scool-ve-chung-toi__stat-value {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--wp--preset--color--primary-container);
}
.scool-ve-chung-toi__stat-label {
  display: block;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
  margin-top: 4px;
}
.scool-ve-chung-toi__store {
  margin-bottom: 40px;
}
.scool-ve-chung-toi__store-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.scool-ve-chung-toi__store-info,
.scool-ve-chung-toi__store-map {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 16px;
  padding: 24px;
}
.scool-ve-chung-toi__store-info p {
  margin: 0 0 10px;
}
.scool-ve-chung-toi__store-contacts {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.scool-ve-chung-toi__store-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-ve-chung-toi__store-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--wp--preset--color--on-surface-variant);
  min-height: 160px;
}
.scool-ve-chung-toi__contact {
  max-width: 560px;
  margin: 0 auto;
}
.scool-ve-chung-toi__contact-submit {
  width: 100%;
}
@media (min-width: 768px) {
  .scool-ve-chung-toi__contact {
    max-width: none;
    background: var(--wp--preset--color--surface-container-low);
    border-radius: 16px;
    padding: 32px;
  }
  .scool-ve-chung-toi__contact-submit {
    width: auto;
  }
}
.scool-ve-chung-toi__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.scool-ve-chung-toi__field label {
  font-size: 13px;
  font-weight: 700;
}
.scool-ve-chung-toi__field input,
.scool-ve-chung-toi__field textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--outline-variant);
  font-family: inherit;
}
.scool-ve-chung-toi__contact-message {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.scool-ve-chung-toi__contact-message.is-error {
  color: var(--wp--preset--color--error);
}
@media (min-width: 900px) {
  .scool-ve-chung-toi__store-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* -- Vong UI dot 2, vá tay sau job C2a ---------------------------------- */
/* (17) blog-list: card lưới ảnh 4:3 theo mockup desktop (16:9 chỉ dành cho
   featured); featured chuyển sang ratio thật thay vì absolute-fill min-height
   (đang cho ~2.4:1): mobile 4:3, desktop 16:9, overlay giữ nguyên. */
.scool-blog-card__media {
  aspect-ratio: 4 / 3;
}
.scool-blog-card--featured {
  min-height: 0;
}
.scool-blog-card--featured .scool-blog-card__media {
  position: relative;
  inset: auto;
  height: auto;
  aspect-ratio: 4 / 3;
}
@media (min-width: 782px) {
  .scool-blog-card--featured .scool-blog-card__media {
    aspect-ratio: 16 / 9;
  }
}
.scool-blog-card--featured .scool-blog-card__body {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* (22) blog-post mobile: grid catalogue cuối bài ẨN — mockup mobile chỉ có
   product-card Bento in-flow trước Kết luận (đã render); grid 4 cột là khối
   desktop. Chỉ ẩn khi ĐÃ có bento in-flow (modifier --has-inline-bento) để
   bài không có bento vẫn còn danh sách sản phẩm. */
@media (max-width: 781px) {
  .scool-post-related-products--has-inline-bento {
    display: none;
  }
}

/* JOB C2b (33–39): size guide mirrors the supplied desktop/mobile layouts. */
.scool-size-guide__grid { grid-template-columns: 1fr; }
.scool-size-guide__note { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--wp--preset--color--surface-container-lowest); border-radius: 12px; }
.scool-size-guide__note strong { color: var(--wp--preset--color--on-surface); }
.scool-size-guide__cta .scool-btn--primary { background: var(--wp--preset--color--on-primary-container); }
.scool-size-guide__cta .scool-btn--primary:hover { background: var(--wp--preset--color--primary); }
@media (max-width: 899px) {
  .scool-size-guide__measure { background: transparent; border: 0; padding: 0; }
  .scool-size-guide__steps { gap: 16px; }
  .scool-size-guide__step { background: var(--wp--preset--color--surface-container-lowest); border: 1px solid var(--wp--preset--color--surface-container-highest); border-radius: 16px; padding: 16px; }
  .scool-size-guide__notes { background: var(--wp--preset--color--surface-container-low); border-color: var(--wp--preset--color--surface-container-highest); }
  .scool-size-guide__note { background: transparent; border-radius: 0; border-left: 4px solid var(--wp--preset--color--primary-container); padding: 0 0 0 12px; }
}
@media (min-width: 900px) {
  .scool-size-guide__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scool-size-guide__notes ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* JOB C2b (40–43): order lookup starts as a form-only state. */
.scool-order-lookup { max-width: 1280px; }
@media (max-width: 767px) {
  .scool-order-lookup__panel { background: var(--wp--preset--color--surface-container-lowest); border: 1px solid var(--wp--preset--color--surface-container-highest); border-radius: 16px; padding: 20px 16px; }
  .scool-order-lookup__tabs { margin-left: 0; margin-right: 0; }
}

/* JOB C2b (44–45): the review feed has intentionally different card anatomy by viewport. */
@media (max-width: 767px) {
  .scool-reviewshub__grid { grid-template-columns: 1fr; }
  .scool-reviewshub__card-media { aspect-ratio: 4 / 5; }
  .scool-reviewshub__card-author { display: flex; }
  .scool-reviewshub__card-stars-desktop, .scool-reviewshub__card-criteria, .scool-reviewshub__card-cta-full { display: none; }
}
@media (min-width: 768px) {
  .scool-reviewshub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scool-reviewshub__card-author, .scool-reviewshub__card-product { display: none; }
  .scool-reviewshub__card-stars-desktop { display: block; }
  .scool-reviewshub__card-criteria, .scool-reviewshub__card-cta-full { display: flex; }
}

/* JOB C2b (46–47): keep the about-page heading and intro as one text cluster. */
.scool-ve-chung-toi__hero-title { text-transform: none; font-size: 32px; }
@media (min-width: 768px) {
  .scool-ve-chung-toi__hero-title { font-size: 48px; }
}

/* -- Material Symbols base (fix "font sai mockup" 05/09) ------------------
   Icon render thành CHỮ THÔ ("style", "family_restroom", "cached"...) vì
   ligature vỡ khi thừa hưởng text-transform:uppercase + letter-spacing từ
   heading/label cha ("STYLE" hoa không khớp tên ligature). Base class theo
   đúng recipe Google, reset cứng các thuộc tính phá ligature. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}


/* -- Display heading trang chu theo mockup (fix "font sai" 05/09): ve sau
   cua heading to mau cam (span accent), testimonials len co display
   text-4xl md:text-6xl nhu mockup thay vi 24px mac dinh cua theme.json. */
.scool-display-accent {
  color: var(--wp--preset--color--primary-container);
}
.scool-testimonials > h2 {
  text-align: left; /* mockup can trai + max-w-2xl, khong can giua */
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  max-width: 42rem;
  margin-bottom: 24px;
}

/* ==========================================================================
   Trang chu MOBILE theo mockup/trang-chu/mobile (user review 05/09 - 10 finding)
   ========================================================================= */

/* (10) Header phai dinh khi vuot: sticky phai dat o WRAPPER template-part
   (bai hoc melon - sticky o inner khong bam vi wrapper chi cao bang chinh no). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
}

.scool-header__logo-vn {
  color: inherit;
}

/* Viec 2/4 (header mobile, mockup/menu muc B): logo mobile doi tu "SCOOL."
   nghieng cu (finding #1 doi truoc khi co mockup Stitch that) sang dung
   computed style do duoc — "scool.vn" day du (khong cat ".vn"), thuong,
   cam, weight 900, kem cham tron nhu ban desktop (Viec 1/4) — ap dung ca
   dai 782-1099px (truoc do roi lai kieu mac dinh 26px hoa den, khong dung
   mockup nao) de nhat quan toan bo corridor hamburger/drawer <1100px. */
@media (max-width: 1099px) {
  .scool-header__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: lowercase;
    color: var(--wp--preset--color--primary-container);
  }
  .scool-header__logo::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    align-self: center;
  }
  .scool-header__logo-dot,
  .scool-header__logo-vn {
    color: inherit;
    display: inline;
  }
}

@media (max-width: 781px) {
  /* (1) Header mobile mockup: menu - logo giua - gio hang; KHONG search;
     3 muc items-center thang hang. */
  .scool-header__search {
    display: none;
  }
  .scool-site-header {
    align-items: center;
  }
  .scool-header__hamburger {
    align-self: center; /* do: lech 12px so voi logo/cart (cy 42 vs 54) */
  }

  /* (2)+(5) Hero mobile: anh bo day 40px, gradient hoa xuong nen sang,
     chu toi tren anh sang dung mockup (DEP HE outline - 2026 cam nghieng -
     VELOCITY den dam), mo ta vien trai cam. */
  .scool-hero {
    height: auto;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    border-radius: 0 0 40px 40px;
  }
  .scool-hero-bg-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 45%, var(--wp--preset--color--surface) 100%);
  }
  .scool-hero__content {
    position: relative;
    width: 100%;
    max-width: none;
    margin-inline: 0 !important; /* constrained chen margin auto -> chu tut vao 48px */
    padding: 48px 16px 40px !important;
    text-align: left;
  }
  /* (3) Eyebrow: pill kinh trang vien trai cam nhu mockup */
  .scool-hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.78);
    color: var(--wp--preset--color--on-surface);
    border-left: 4px solid var(--wp--preset--color--primary-container);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .scool-hero__eyebrow-line {
    display: none;
  }
  .scool-hero .wp-block-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--wp--preset--color--on-surface);
    font-size: 60px;
    line-height: 0.9;
    letter-spacing: -0.04em;
  }
  .scool-hero__line1 {
    -webkit-text-stroke: 1.5px rgba(25, 28, 30, 0.5);
    color: transparent;
  }
  .scool-hero__accent {
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
  }
  .scool-hero__velocity {
    display: block;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    color: var(--wp--preset--color--on-surface);
    opacity: 1;
    letter-spacing: -0.02em;
    margin-top: 6px;
  }
  .scool-hero p {
    color: var(--wp--preset--color--on-surface-variant);
    font-size: 15px;
    max-width: 280px;
    border-left: 2px solid rgba(255, 95, 0, 0.3);
    padding-left: 12px;
  }
  /* (3)+(4) MUA NGAY pill toi 80% co vong mui ten; an Xem chi tiet o mobile */
  .scool-hero .wp-block-buttons {
    width: 100%;
  }
  .scool-hero__cta {
    width: 80%;
  }
  .scool-hero__cta .wp-block-button__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--wp--preset--color--on-surface) !important;
    color: #fff !important;
    padding: 14px 12px 14px 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  .scool-hero__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
  }
  .scool-hero .wp-block-buttons .scool-hero__secondary {
    display: none; /* rule .wp-block-button khac co specificity cao hon */
  }

  /* (6) Ban chay mobile: watermark HOT, hang tieu de border-b-2, Ban/Chay
     2 dong den, Xem tat ca ben phai; grid so le; ten sentence-case,
     gia cam + gach xam. */
  .scool-bestsellers {
    position: relative;
    overflow: visible;
  }
  .scool-bestsellers::before {
    content: "HOT";
    position: absolute;
    top: -28px;
    right: -8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 110px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(224, 227, 229, 0.45);
    pointer-events: none;
    z-index: 0;
  }
  .scool-bestsellers__head .scool-bestsellers__viewall {
    font-size: 12px;
    font-weight: 700;
  }
  .scool-bestsellers__head {
    position: relative;
    z-index: 1;
    align-items: flex-end;
    border-bottom: 2px solid var(--wp--preset--color--on-surface);
    padding-bottom: 14px;
    margin-bottom: 28px;
  }
  .scool-bestsellers__head h2 {
    /* chot thao luan Codex 05/09: 18px/600 theo render that cua mockup */
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
  }
  .scool-bestsellers__head h2 .scool-display-accent {
    display: block;
    color: inherit;
  }
  .scool-bestsellers__head p {
    display: none;
  }
  .scool-bs-grid {
    row-gap: 40px;
  }
  /* grid items (big=1, side con 1..3 = vi tri 2,3,4): cot phai = vi tri 2 va 4 */
  .scool-bs-side > *:nth-child(1),
  .scool-bs-side > *:nth-child(3) {
    transform: translateY(32px);
  }
  .scool-bestsellers h3,
  .scool-bs-grid h3,
  .scool-bs-promo__name,
  .scool-bs-big__name {
    text-transform: none;
    letter-spacing: normal;
    font-family: "Inter", sans-serif;
    font-weight: 500;
  }
  /* promo card mobile: anh len TRUOC ten (cung anatomy 4 card nhu mockup) */
  .scool-bs-promo {
    display: flex;
    flex-direction: column-reverse;
  }
  /* gia theo mockup mobile: gia ban cam, gia goc gach xam */
  .scool-bs-grid ins,
  .scool-bs-grid .scool-bs-big__price ins {
    color: var(--wp--preset--color--primary-container);
    text-decoration: none;
  }
  .scool-bs-grid del {
    color: var(--wp--preset--color--on-surface-variant);
  }

  /* (7) Doi size 1-doi-1: card bo goc co le 2 ben, khong full-bleed;
     icon vong vien cam; text can trai nhat quan. */
  .scool-trust-anchor {
    margin: 0 16px !important;
    border-radius: 28px;
    padding: 28px 24px !important;
    text-align: left;
  }
  .scool-trust-anchor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255, 95, 0, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--wp--preset--color--primary-container);
    margin-bottom: 12px;
  }
  .scool-trust-anchor__headline {
    font-size: 28px;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 8px;
  }
  .scool-trust-anchor p,
  .scool-trust-anchor > * {
    /* WP .is-layout-constrained > * chen margin-inline:auto -> cum lech giua */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .scool-trust-anchor p {
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    max-width: 250px;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* (8) #SCOOL VIBES: heading 2 dong + FAB cam; le trai/phai 16px deu. */
  .scool-vibes > .wp-block-group {
    align-items: flex-end;
    padding: 0 16px;
  }
  .scool-vibes h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
  }
  .scool-vibes__break {
    display: block;
  }
  .scool-vibes__fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
  }
  .scool-vibes-card {
    border-radius: 24px;
  }

  /* (9) Tim kiem theo nhu cau: heading 2 dong (dong 2 cam) + mo ta; nhan
     zone label-bold + ly do trang mo. */
  .scool-need-finder-section h2 {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 8px;
  }
  .scool-need-finder-section__break {
    display: block;
  }
  .scool-need-finder-section__desc {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 14px;
    margin: 0 0 24px;
    text-align: left;
  }
  .scool-need-finder__item {
    text-align: center;
  }
  .scool-need-finder__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.35;
    margin-top: 10px;
  }
  .scool-need-finder__reason {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
  }
}

@media (min-width: 782px) {
  /* Desktop giu nut MUA NGAY trang hien tai - an cac phan tu mobile-only */
  .scool-hero__cta-arrow {
    display: none;
  }
  .scool-vibes__fab {
    display: none;
  }
  .scool-need-finder-section__desc {
    display: none;
  }
  .scool-need-finder-section__break,
  .scool-vibes__break {
    display: inline;
  }
}


/* -- Badge/tim card Ban chay trang chu (chot Codex 05/09, phuong an a) --- */
.scool-bs-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.scool-bs-badge--sale {
  background: var(--wp--preset--color--primary-container);
}
.scool-bs-badge--new {
  background: var(--wp--preset--color--on-surface);
}
.scool-bs-heart {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--wp--preset--color--on-surface);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.scool-bs-heart.is-active {
  color: var(--wp--preset--color--primary-container);
}
.scool-bs-row__img,
.scool-bs-promo__imgwrap {
  position: relative;
  display: block;
}
/* desktop promo: giu layout cu — imgwrap chi la khung quanh anh 96px */
.scool-bs-promo__imgwrap {
  flex: 0 0 96px;
}
@media (min-width: 782px) {
  /* desktop khong co badge/tim tren card ban chay (mockup desktop khong ve) */
  .scool-bs-badge,
  .scool-bs-heart {
    display: none;
  }
}
@media (max-width: 781px) {
  .scool-bs-promo__imgwrap {
    flex: none;
  }
  .scool-bs-promo__imgwrap .scool-bs-promo__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}


/* -- Header mobile flex + logo chinh giua + icon tui (finding #1 dot 3) -- */
@media (max-width: 781px) {
  .scool-site-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 64px;
  }
  .scool-header__nav {
    display: none !important;
  }
  .scool-header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .scool-header__hamburger {
    align-self: auto;
    margin: 0 !important; /* is-layout-constrained chen margin-inline auto -> troi vao giua */
  }
  .scool-header__actions {
    margin: 0 !important; /* WP flex-layout chen margin-top 24px lam cart tut xuong */
  }
  /* Icon gio hang: tui outline mau toi + badge tron cam (mockup) — bo o vuong cam */
  .scool-header__cart .wc-block-mini-cart__quantity-badge,
  .wp-block-woocommerce-mini-cart .wc-block-mini-cart__quantity-badge {
    background: transparent;
    position: relative;
    padding: 0;
  }
  .wc-block-mini-cart__icon {
    width: 26px;
    height: 26px;
    color: var(--wp--preset--color--on-surface);
  }
  .wc-block-mini-cart__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    padding: 0 4px;
  }
  .scool-header__cart .wc-block-mini-cart__button {
    background: transparent !important;
    padding: 4px;
  }

  /* (2) Category tiles: nhan sat mep trai-duoi, co chu theo render mockup */
  .scool-cat-tile__eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  .scool-cat-tile .scool-cat-tile__label,
  .scool-cat-tile h3 {
    font-size: 20px;
    letter-spacing: 0;
  }

  /* (5) Vibes card: author + handle xam, tag pill cam nhat theo mockup */
  .scool-vibes-card__handle {
    color: var(--wp--preset--color--on-surface-variant);
    font-size: 11px;
    font-weight: 400;
  }
  .scool-vibes-card__tag {
    background: rgba(255, 95, 0, 0.08);
    color: var(--wp--preset--color--primary-container);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
  }
}


/* Big card Ban chay: mobile an badge chu (BAN CHAY) — he badge -X%/MOI thay
   the theo quy uoc; desktop nguoc lai (bs-badge da an o >=782 phia tren). */
@media (max-width: 781px) {
  .scool-bs-big__badge {
    display: none;
  }
  .scool-bs-big {
    position: relative;
  }
}


/* -- Vong 3 user review: header/hero/vibes/category ---------------------- */
@media (max-width: 781px) {
  /* bo duong ke duoi header (mockup chi co shadow nhe) */
  .scool-site-header {
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }
  /* icon gio to ngang mockup + LUON hien badge so luong that (de doi soat) */
  .scool-header__cart .wc-block-mini-cart__icon,
  .wp-block-woocommerce-mini-cart .wc-block-mini-cart__icon {
    width: 28px !important;
    height: 28px !important;
  }
  .wc-block-mini-cart__badge[hidden] {
    display: inline-block !important;
  }
  /* vien cam mo ta hero ro hon (dang chim tren anh) */
  .scool-hero p {
    border-left-color: rgba(255, 95, 0, 0.55);
  }
  /* category caption: eyebrow + ten xep cot, cung mep trai 16px duoi 16px */
  .scool-cat-tile__caption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 0;
    margin: 0;
  }
  .scool-cat-tile__eyebrow {
    display: block;
    margin: 0;
  }
}
/* vibes: ten tac gia 1 dong (dang gay "Thao P." thanh 2 dong) */
.scool-vibes-card__author strong {
  white-space: nowrap;
}
.scool-vibes-card__author {
  flex-wrap: nowrap;
}


/* -- Muc A/B thao luan Codex 05/09: dong phu card + chips nhu cau phu ---- */
.scool-bs-sub {
  display: inline-block;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 2px;
}
.scool-bs-sub--stock {
  color: #b3261e; /* canh bao vua phai, khong do choi (Codex muc A) */
  font-weight: 600;
}
.scool-bs-sub--chip {
  color: var(--wp--preset--color--on-surface-variant);
  background: var(--wp--preset--color--surface-container);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
}
/* ten card 2 dong co dinh cho deu hang (Codex muc A) */
@media (max-width: 781px) {
  .scool-bs-row__name,
  .scool-bs-promo__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
  }
  /* Muc B: chips nhu cau phu (text, dan collection that) hien duoi grid 4 zone */
  .scool-need-finder-section .scool-situation-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0 0;
  }
  .scool-need-finder-section .scool-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
  }
  .scool-need-finder-section__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: var(--wp--preset--color--primary-container);
    font-size: 13px;
    font-weight: 700;
  }
}
@media (min-width: 782px) {
  .scool-need-finder-section__all {
    display: none;
  }
}


/* -- Khoi cuoi trang chu: tin cay + FAQ + CTA (thao luan Codex + Gemini
   05/09; thay doan SEO thuan — muc tieu keo nguoi luong lu quay lai luong
   mua sau khi da du ly do tin; KHONG them FAQPage schema o home de tranh
   trung voi /faq/). */
.scool-seo-text {
  text-align: left;
}
.scool-seo-text__title {
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.scool-seo-text__desc {
  margin: 0 0 16px;
  font-size: 14px;
}
.scool-seo-faq details {
  background: var(--wp--preset--color--surface-container-lowest);
  border: 1px solid var(--wp--preset--color--surface-container-highest);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.scool-seo-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.scool-seo-faq p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-seo-text__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.scool-seo-text__cta {
  display: inline-block;
  background: var(--wp--preset--color--primary-container);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
}
.scool-seo-text__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
  text-decoration: underline;
}


@media (max-width: 781px) {
  /* Card Ban chay: bo hop trang vien — anh bo goc + text tran tren nen
     trang nhu mockup (anh trong khung, ten/gia ngoai khung). */
  .scool-bs-row,
  .scool-bs-promo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .scool-bs-row__img,
  .scool-bs-promo__imgwrap {
    background: var(--wp--preset--color--surface-container);
    border-radius: 16px;
    overflow: hidden;
  }
  .scool-bs-row__body,
  .scool-bs-promo__body {
    padding: 8px 4px 0 !important;
    background: transparent !important;
  }
  .scool-bs-promo__cta {
    display: none; /* mockup card thuong khong co nut rieng — ca card la link */
  }
}


/* Big card Ban chay mobile: cung anatomy phang voi 3 card kia (mockup: 4 card
   giong nhau) — anh khung bo goc, ten/gia TRAN duoi anh, khong overlay trang */
@media (max-width: 781px) {
  .scool-bs-big {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible;
  }
  .scool-bs-big__img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    background: var(--wp--preset--color--surface-container);
  }
  .scool-bs-big__overlay {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 4px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .scool-bs-big__name {
    color: var(--wp--preset--color--on-surface) !important;
    text-shadow: none !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
  }
  .scool-bs-big__price {
    color: var(--wp--preset--color--on-surface) !important;
    text-shadow: none !important;
  }
  .scool-bs-big__price ins {
    color: var(--wp--preset--color--primary-container);
    text-decoration: none;
  }
  .scool-bs-big__price del {
    color: var(--wp--preset--color--on-surface-variant);
  }
  /* chip phu: gon theo noi dung, khong keo full chieu ngang */
  .scool-bs-sub--chip {
    align-self: flex-start;
    width: fit-content;
  }
  .scool-bs-row__body,
  .scool-bs-promo__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}


/* ==========================================================================
   CHUAN HOA LE MOBILE 16px TOAN TRANG CHU (mo xe vong 5: le dang 0/16/20/24/
   41px moi section mot kieu — mockup dung px-margin-mobile = 16px NHAT QUAN)
   ========================================================================= */
@media (max-width: 781px) {
  /* (anh 1) hero p: max-width 280 + margin auto cua WP lam CA KHOI troi vao
     giua (x=41) — ghim margin 0; vach cam chuyen sang ::before treo TRAI de
     TEXT thang hang 16px voi cac dong tren/duoi nhu mockup. */
  .scool-hero p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: none;
    padding-left: 0;
    position: relative;
  }
  .scool-hero p::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 3px;
    bottom: 3px;
    width: 2px;
    background: rgba(255, 95, 0, 0.55);
  }
  /* (anh 1) badge so bam sat goc tren-phai icon tui nhu mockup */
  .wc-block-mini-cart__badge {
    top: -4px;
    right: -4px;
  }
  /* (anh 2) categories: het full-bleed — le 16px + bo goc thay tile cham mep */
  .scool-categories {
    padding: 0 16px !important;
  }
  .scool-cat-tile,
  .scool-cat-tile__wrap,
  .scool-cat-tile__link {
    border-radius: 24px;
    overflow: hidden;
  }
  /* blob Tre Em giu dang huu co (rule 24px o tren de mat) */
  .scool-cat-tile--treem,
  .scool-cat-tile--treem .scool-cat-tile__wrap,
  .scool-cat-tile--treem .scool-cat-tile__link {
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
  }
  /* caption blob van can giua (gradient chan khong che chu can giua) */
  .scool-cat-tile--treem .scool-cat-tile__link::after {
    height: 100%;
    background: rgba(0, 0, 0, 0.28);
  }
  /* label doc duoc tren anh sang: gradient toi chan tile nhu mockup */
  .scool-cat-tile__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    pointer-events: none;
  }
  .scool-cat-tile__link {
    position: relative;
    display: block;
  }
  .scool-cat-tile__caption,
  .scool-cat-tile__arrow {
    z-index: 1;
  }
  /* bestsellers 24 -> 16 */
  .scool-bestsellers {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* vibes: carousel co le 16 hai ben (card dang cham mep trai) */
  .scool-vibes {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .scool-vibes-track {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px;
  }
  /* need section 20 -> 16 */
  .scool-need-finder-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* seo block het cham mep */
  .scool-seo-text {
    margin-left: 16px !important;
    margin-right: 16px !important;
    border-radius: 20px;
    padding: 20px 16px !important;
    background: var(--wp--preset--color--surface-container-lowest);
  }
  /* mockup mobile khong co 3 service card + testimonials — an dung phan tu
     (an ca section thi trust-anchor con ben trong cung chet) */
  .scool-service-card,
  .scool-testimonials {
    display: none !important;
  }
  .scool-services {
    padding: 0 !important;
  }
}

/* (anh 3) chips duoi ten card — hang wrap toi da 2 */
.scool-bs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
/* (anh 4) ly do zone GAN KET voi ten: mau cam nhat + sat dong tren */
@media (max-width: 781px) {
  .scool-need-finder__reason {
    color: rgba(255, 149, 85, 0.95);
    font-weight: 500;
    margin-top: 2px;
  }
}


/* big card imgwrap: neo badge + tim vao ANH (truoc do heart roi giua text) */
.scool-bs-big__imgwrap {
  position: relative;
  display: block;
}
@media (min-width: 782px) {
  .scool-bs-big__imgwrap {
    position: static; /* desktop big card van la overlay tren anh nen */
  }
}


/* ==========================================================================
   MOCKUP-EXACT vong 6 — giao thuc DO-COPY computed style tu mockup render
   (chot thao luan Codex: mockup render la nguon su that cuoi cung, ke ca
   16px/400; khong suy dien tu token). Moi so duoi day la SO DO THUC TE.
   ========================================================================= */
@media (max-width: 781px) {
  /* -- Le section THEO MOCKUP (khong dong nhat!): hero 16 / tiles 20 /
     bestsellers 24 / vibes 20 / need 20 ------------------------------- */
  .scool-categories {
    padding: 0 20px !important;
  }
  .scool-bestsellers {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .scool-vibes > .wp-block-group {
    padding: 0 20px;
  }
  .scool-vibes-track {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .scool-need-finder-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* -- Header: pad 16x20, logo Montserrat 24/900 italic (da co) -------- */
  .scool-site-header {
    padding: 16px 20px !important;
  }

  /* -- Hero: TOAN BO INTER theo mockup do duoc ------------------------- */
  .scool-hero .wp-block-heading {
    font-family: "Inter", sans-serif;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
  }
  .scool-hero__line1 {
    -webkit-text-stroke: 0;
    color: rgb(143, 112, 101); /* mau nau dac do tu mockup, KHONG vien */
  }
  .scool-hero__accent {
    font-family: "Inter", sans-serif;
    font-style: italic;
    font-size: 16px;
    font-weight: 400;
  }
  .scool-hero__velocity {
    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .scool-hero__eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.6px;
  }
  /* vach cam: TAI duong le (thang hang chu tren/duoi), text thut +14
     (chot Codex cau 3 — dao nguoc ban ::before treo ngoai vong truoc) */
  .scool-hero p {
    border-left: 2px solid rgba(255, 95, 0, 0.3);
    padding-left: 12px;
    font-size: 16px;
    color: rgb(91, 65, 55);
  }
  .scool-hero p::before {
    display: none;
  }
  .scool-hero__cta .wp-block-button__link {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
  }

  /* -- Heading section (Ban chay / VIBES / TIM KIEM): Montserrat 16/400
     uppercase ls -0.8px — dung fallback render mockup ------------------ */
  .scool-bestsellers__head h2,
  .scool-vibes h2,
  .scool-need-finder-section h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.8px;
    text-transform: uppercase;
  }
  .scool-bestsellers__viewall {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
  }

  /* -- Card: ten Inter 16/500, gia Montserrat 16/400 (khong dam) ------- */
  .scool-bs-row__name,
  .scool-bs-promo__name,
  .scool-bs-big__name {
    font-size: 16px;
    font-weight: 500;
  }
  .scool-bs-grid ins,
  .scool-bs-grid del,
  .scool-bs-big__price ins,
  .scool-bs-big__price del {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
  }

  /* -- Category label: eyebrow Inter 16/400 cam, ten Montserrat 16/400 - */
  .scool-cat-tile__eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: normal;
  }
  .scool-cat-tile__caption {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
  }

  /* -- Trust card: body Inter 16/300 ----------------------------------- */
  .scool-trust-anchor p {
    font-size: 16px;
    font-weight: 300;
  }

  /* -- Vibes: quote Inter 16/500 italic, author 10/400 ----------------- */
  .scool-vibes-card__quote,
  .scool-vibes-card p {
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
  }
  .scool-vibes-card__author strong {
    font-size: 10px;
    font-weight: 400;
  }
  .scool-vibes-card__handle {
    font-size: 10px;
  }

  /* -- Need sub: Inter 16/300 trang .6 --------------------------------- */
  .scool-need-finder-section__desc {
    font-size: 16px;
    font-weight: 300;
  }

  /* -- Zone nhu cau: pattern 'thanh cam doc chung' (chot Codex cau 2) --
     cum nhan-loi hua can trai, thanh 3x32 cam, ten 13/700 ls.06em, dien
     giai 13/500 sat 4px — het cam giac caption roi rac. Mau chu doi cho
     nen TOI cua section (Codex spec goc cho nen sang). */
  .scool-need-finder__item {
    text-align: left;
  }
  .scool-need-finder__label {
    position: relative;
    display: block;
    margin-top: 10px;
    padding-left: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    text-align: left;
  }
  .scool-need-finder__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 32px;
    background: #f47a27;
  }
  .scool-need-finder__reason {
    display: block;
    padding-left: 11px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.65);
    text-align: left;
  }
}


/* Zone nhu cau — RESET dut diem (3 vong rule chong nhau lam indent lech
   giua cac o): item la flex column stretch, label/reason full-width cung
   he toa do, moi margin/padding ghim cung. */
@media (max-width: 781px) {
  .scool-need-finder__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .scool-need-finder__item > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .scool-need-finder__label,
  .scool-need-finder__reason {
    width: 100%;
    box-sizing: border-box;
    padding-left: 11px !important;
    text-align: left !important;
  }
  .scool-need-finder__label {
    margin-top: 10px !important;
  }
  .scool-need-finder__reason {
    margin-top: 4px !important;
  }
}


/* Icon gio = TUI xach outline (mockup) thay cart Woo + badge dung so do:
   16px, nho 4px goc tren-phai icon. Glyph ve bang mask de an currentColor. */
@media (max-width: 781px) {
  .scool-header__cart .wc-block-mini-cart__quantity-badge {
    display: block;
    width: 28px;
    height: 28px;
  }
  .scool-header__cart .wc-block-mini-cart__icon {
    display: none;
  }
  .scool-header__cart .wc-block-mini-cart__quantity-badge::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3Cpath d='M2.5 3h2.2l2.4 11.5a1.8 1.8 0 0 0 1.8 1.4h7.9a1.8 1.8 0 0 0 1.8-1.5L20.5 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3Cpath d='M2.5 3h2.2l2.4 11.5a1.8 1.8 0 0 0 1.8 1.4h7.9a1.8 1.8 0 0 0 1.8-1.5L20.5 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--wp--preset--color--on-surface);
  }
  .wc-block-mini-cart__badge {
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    font-size: 10px !important;
  }
}


/* MUA NGAY: mockup viet CONTENT dang HOA (text-transform none nhung chu hoa
   san) — bai hoc: copy typography phai copy ca CASE cua content. */
@media (max-width: 781px) {
  .scool-hero__cta .wp-block-button__link {
    text-transform: uppercase;
  }
}


/* Bottom-nav don dep (user 06/09: 'xau va lon xon') — nhan 1 dong khong
   gay, tab deu nhau, Sale nho vua, active capsule tinh te khong nen nau. */
@media (max-width: 781px) {
  .scool-bottom-nav {
    padding: 0 10px;
    gap: 2px;
  }
  .scool-bottom-nav__tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 14px;
    background: none;
  }
  .scool-bottom-nav__label {
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
  }
  .scool-bottom-nav__tab.is-active {
    background: rgba(255, 255, 255, 0.1);
  }
  .scool-bottom-nav__tab.is-active .scool-bottom-nav__label,
  .scool-bottom-nav__tab.is-active .scool-bottom-nav__icon {
    color: #fff;
  }
  .scool-bottom-nav__icon {
    position: relative;
    display: inline-flex;
    color: rgba(255, 255, 255, 0.85);
  }
  /* Sale: vong cam nho gon, khong lam meo hang */
  .scool-bottom-nav__tab--sale .scool-bottom-nav__icon {
    width: 40px;
    height: 40px;
    margin-top: -14px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 95, 0, 0.4);
  }
  .scool-bottom-nav__tab--sale .scool-bottom-nav__label {
    color: var(--wp--preset--color--primary-container);
    font-weight: 700;
  }
  .scool-bottom-nav__badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 999px;
    background: var(--wp--preset--color--primary-container);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 0 4px;
    text-align: center;
  }
}


/* Sale label hien lai (rule job cu display:none o ~3961 bi ke thua) */
@media (max-width: 781px) {
  .scool-bottom-nav__tab--sale .scool-bottom-nav__label {
    display: block;
  }
}


/* ==========================================================================
   Redesign 'Ban chay' mobile theo chot Codex 06/09 (user yeu cau lam lai):
   grid thang hang (bo stagger), bo watermark HOT, heading 1 dong 20/700,
   card toi gian: anh 4/5 nen #f5f5f5 bo 12, badge sale 11/700, ten 14/500
   clamp 2 dong, gia cam 16/700 + gach 12/400, 1 nhan text manh.
   ========================================================================= */
@media (max-width: 781px) {
  .scool-bestsellers {
    padding: 24px 16px 28px !important;
  }
  .scool-bestsellers::before {
    content: none; /* bo watermark HOT */
  }
  .scool-bestsellers__head {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
  .scool-bestsellers__head h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .scool-bestsellers__head h2 .scool-display-accent {
    display: inline; /* heading 1 dong */
  }
  .scool-bestsellers__viewall {
    font-size: 14px;
    font-weight: 600;
  }
  .scool-bs-grid {
    column-gap: 12px;
    row-gap: 20px;
  }
  /* bo stagger */
  .scool-bs-side > *:nth-child(1),
  .scool-bs-side > *:nth-child(3) {
    transform: none;
  }
  .scool-bs-row__img,
  .scool-bs-promo__imgwrap,
  .scool-bs-big__img {
    background: #f5f5f5;
    border-radius: 12px;
  }
  .scool-bs-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
  }
  .scool-bs-row__name,
  .scool-bs-promo__name,
  .scool-bs-big__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    min-height: 40px;
  }
  .scool-bs-grid ins,
  .scool-bs-big__price ins {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
  }
  .scool-bs-grid del,
  .scool-bs-big__price del {
    font-size: 12px;
    font-weight: 400;
  }
  .scool-bs-sub--plain {
    font-size: 11px;
    color: var(--wp--preset--color--on-surface-variant);
    background: none;
    border-radius: 0;
    padding: 0;
    font-weight: 500;
  }
  /* tim: nho, trong suot, van >=36px vung cham */
  .scool-bs-heart {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
  }
}


/* -- Khoi cam ket mua hang (trust grid 2x2, chot Codex 06/09) ------------ */
.scool-trust-grid {
  margin: 0 16px 48px;
  padding: 24px 20px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #18212b 0%, #25384a 100%);
  color: #fff;
}
.scool-trust-grid__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.scool-trust-grid__icon {
  color: var(--wp--preset--color--primary-container);
  font-size: 28px;
}
.scool-trust-grid__headline {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
}
.scool-trust-grid__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.scool-trust-grid__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  padding-top: 10px;
}
.scool-trust-grid__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-size: 13px;
  line-height: 1.35;
}
.scool-trust-grid__item .material-symbols-outlined {
  font-size: 20px;
  color: var(--wp--preset--color--primary-container);
  flex-shrink: 0;
}
.scool-trust-grid__terms {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
}
@media (min-width: 782px) {
  .scool-trust-grid {
    max-width: 720px;
    margin: 0 auto 56px;
  }
  .scool-trust-grid__items {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* -- Vong 06/09b: 3 fix tay theo user ------------------------------------ */
@media (max-width: 781px) {
  /* (1) badge so BAM goc tui (dang tach roi 12px) — ghi de moi rule cu */
  .scool-header__cart .wc-block-mini-cart__badge {
    top: -3px !important;
    right: -3px !important;
    transform: none !important; /* Woo core translateY(-8) day badge tach roi tui */
  }
  /* (3) heading 'Ban chay' + 'Xem tat ca' GIU NGUYEN mockup (user chi dao):
     tra lai 2 dong 16/400 + border-b + watermark HOT nhu ban do-copy;
     card van giu thiet ke moi. */
  .scool-bestsellers::before {
    content: "HOT";
    position: absolute;
    top: -28px;
    right: -8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 110px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(224, 227, 229, 0.45);
    pointer-events: none;
    z-index: 0;
  }
  .scool-bestsellers__head {
    border-bottom: 2px solid var(--wp--preset--color--on-surface);
    padding-bottom: 14px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
  }
  .scool-bestsellers__head h2 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.8px;
  }
  .scool-bestsellers__head h2 .scool-display-accent {
    display: block;
    color: inherit;
  }
  .scool-bestsellers__viewall {
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
  }
}
/* (5) khoi FAQ cuoi: mau chu dong bo palette trang chu (dang nau #5B4137
   lech han cac heading den con lai) */
.scool-seo-text__title {
  color: var(--wp--preset--color--on-surface);
}
.scool-seo-text__desc {
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-seo-faq summary {
  color: var(--wp--preset--color--on-surface);
}


/* ==========================================================================
   Vong chot thao luan Codex+Gemini 3 vong (06/09) — hero rut gon, nav label,
   proof-slot card, trust block hybrid cam-nau.
   Ghi chu: VELOCITY/hero p lech khoi ban do-copy mockup la CHU DICH — user
   yeu cau thao luan toi uu 2026, consensus vong 2 thang mockup o cac diem nay.
   ========================================================================= */

/* (b) Bottom-nav label: 11px/500 tracking -0.1px (9px qua nho cho 2026) */
@media (max-width: 781px) {
  .scool-bottom-nav__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.1px;
  }
}

/* (a) Hero rut gon: VELOCITY ha thanh nhan phu nho — khong canh tranh H1 */
@media (max-width: 781px) {
  .scool-hero__velocity {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--wp--preset--color--on-surface-variant);
    margin-top: 10px;
  }
  /* chip flash thay VELOCITY khi sale that dang active (1 tang chu, khong
     them lop moi) */
  .scool-hero__content:has(.scool-hero__flash-chip) .scool-hero__velocity {
    display: none;
  }
  /* CTA phu dang text-link (truoc bi an hoan toan tren mobile) */
  .scool-hero .wp-block-buttons .scool-hero__secondary {
    display: block;
    width: 100%;
    margin-top: 4px;
  }
  .scool-hero .wp-block-buttons .scool-hero__secondary .wp-block-button__link {
    background: none !important;
    border: none;
    color: var(--wp--preset--color--on-surface-variant) !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
  }
}
.scool-hero__flash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 95, 0, 0.12);
  color: var(--wp--preset--color--primary-container);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.scool-hero__flash-chip [data-flash-count] {
  font-variant-numeric: tabular-nums;
}

/* (c) Proof slot card Ban chay: 1 tin hieu duy nhat */
@media (max-width: 781px) {
  .scool-bs-sub--stock {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #d93a00;
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .scool-bs-stockbar {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 3px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(217, 58, 0, 0.15);
    overflow: hidden;
  }
  .scool-bs-stockbar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #d93a00;
  }
  .scool-bs-sub--deadline {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--wp--preset--color--on-surface-variant);
    background: none;
    padding: 0;
  }
}

/* (d) Trust block hybrid: gradient cam-nau (giu an tuong thi giac ban cu),
   hero-promise doi size lon, 3 gia tri phu 1 hang, link chinh sach */
.scool-trust-grid--hybrid {
  background: linear-gradient(140deg, #ff5f00 0%, #c24a12 42%, #5b4137 100%);
  border-radius: 20px;
  padding: 26px 20px 20px;
}
.scool-trust-grid--hybrid .scool-trust-grid__head {
  align-items: center;
  gap: 8px;
  padding-bottom: 0;
  border-bottom: none;
}
.scool-trust-grid--hybrid .scool-trust-grid__icon {
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
}
.scool-trust-grid--hybrid .scool-trust-grid__headline {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.scool-trust-grid__promise {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.scool-trust-grid__promise-icon {
  font-size: 30px;
  color: #ffd60a;
  margin-bottom: 6px;
}
.scool-trust-grid__promise-main {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
}
.scool-trust-grid__promise-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.scool-trust-grid--hybrid .scool-trust-grid__items,
.scool-trust-grid--hybrid .scool-trust-grid__items--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 14px;
}
.scool-trust-grid--hybrid .scool-trust-grid__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}
.scool-trust-grid--hybrid .scool-trust-grid__item .material-symbols-outlined {
  font-size: 20px;
  color: #ffd60a;
}
.scool-trust-grid--hybrid .scool-trust-grid__terms {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
@media (min-width: 782px) {
  .scool-trust-grid--hybrid .scool-trust-grid__promise {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .scool-trust-grid--hybrid .scool-trust-grid__promise-icon {
    align-self: center;
    margin-bottom: 0;
  }
}


/* Fix user 06/09b: cum text card Ban chay phai BAM NHAU (bai hoc MediaMart —
   ten/gia/proof doc lien mach, khong khoang chet). Do duoc: promo card gap
   16px anh-text (card khac 8), ten min-height 40px ep cho 2 dong du ten 1
   dong, margin desktop 6+12px lot vao — ten va gia roi nhau ~30px. */
@media (max-width: 781px) {
  .scool-bs-promo {
    gap: 0; /* body da co padding-top 8px nhu cac card khac */
  }
  .scool-bs-row__name,
  .scool-bs-promo__name,
  .scool-bs-big__name {
    min-height: 0;
    margin: 0;
  }
  .scool-bs-row__price,
  .scool-bs-promo__price,
  .scool-bs-big__price {
    margin: 0;
  }
  .scool-bs-row__body,
  .scool-bs-promo__body,
  .scool-bs-big__overlay {
    gap: 2px;
  }
}


/* ==========================================================================
   Hub "Uu dai" tren /flash-sale/ (chot thao luan 06/09, user duyet): trio
   loi ich mo dau + combo card that + section freeship.
   ========================================================================= */
.scool-uu-dai-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 16px 8px;
}
.scool-uu-dai-trio__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--wp--preset--color--surface-container);
  border: 1px solid rgba(255, 95, 0, 0.18);
  text-decoration: none;
  color: var(--wp--preset--color--on-surface);
}
.scool-uu-dai-trio__icon {
  font-size: 20px;
  line-height: 1;
}
.scool-uu-dai-trio__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.scool-uu-dai-trio__title .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.scool-uu-dai-trio__desc {
  font-size: 11px;
  color: var(--wp--preset--color--on-surface-variant);
  line-height: 1.35;
}
.scool-uu-dai-combo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--wp--preset--color--surface-container);
}
.scool-uu-dai-combo-card__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.scool-uu-dai-combo-card__main .material-symbols-outlined {
  font-size: 28px;
  color: var(--wp--preset--color--primary-container);
  flex-shrink: 0;
}
.scool-uu-dai-combo-card__main h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.35;
}
.scool-uu-dai-combo-card__main p {
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
  margin: 0;
  line-height: 1.45;
}
.scool-uu-dai-combo-card .scool-flash-sale__combo-cta {
  align-self: flex-start;
}
.scool-uu-dai-freeship {
  margin: 0 16px 32px;
}
.scool-uu-dai-freeship h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.scool-uu-dai-freeship h2 .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: var(--wp--preset--color--primary-container);
}
@media (max-width: 519px) {
  .scool-uu-dai-trio {
    grid-template-columns: 1fr;
  }
  .scool-uu-dai-trio__card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
  }
  .scool-uu-dai-trio__title {
    flex: 0 0 auto;
  }
  .scool-uu-dai-trio__desc {
    margin-left: auto;
    text-align: right;
  }
}
@media (min-width: 782px) {
  .scool-uu-dai-trio {
    max-width: 960px;
    margin: 28px auto 8px;
  }
  .scool-uu-dai-freeship {
    max-width: 960px;
    margin: 0 auto 40px;
  }
  .scool-uu-dai-combo-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ==========================================================================
   Card Ban chay — vong MediaMart 06/09c (Codex+Gemini hoi tu): 3 lop ly do
   moi card (chip dac trung SKU / gia + "-Xd" tiet kiem / urgency co dieu
   kien) + strip combo cap section. Cam lap 1 dong giong nhau 4 card.
   ========================================================================= */
.scool-bs-combo-strip {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255, 214, 10, 0.22);
  color: var(--wp--preset--color--on-surface);
  /* user 06/09f: strip phai dung 1 DONG */
  white-space: nowrap;
  overflow: hidden;
}
.scool-bs-combo-strip strong {
  font-size: 13px;
  font-weight: 700;
}
.scool-bs-combo-strip span {
  font-size: 12px;
  font-weight: 500;
  color: var(--wp--preset--color--on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vong "nang luong deal" 06/09d (Codex R2 + Gemini hoi tu, doi chieu anh
   gian hang MediaMart that): 3 vai tro mau — VANG noi "day la deal" (khoi
   gia), DO noi "ban tiet kiem bao nhieu" (saving pill), DEN noi "gia phai
   tra". Chip teal don sac = thuoc tinh dang tin (KHONG cau vong sticker —
   dep gia thap se thanh cho troi). */
/* Vong TOI UU 06/09e (Codex+Gemini dong thuan vong 2/5): ANH THANG THE —
   moi anh dong nhat 1:1, khoi gia vang MONG 1 hang (van #ffd60a — "van de
   la chieu cao khoi, khong phai mau"), meta 1 dong text thay 2 pill, ten
   2 dong co dinh + ellipsis (grid thang hang), SP khong sale nen trang
   vien xam (khong muon ngon ngu vang cua deal). */
.scool-bs-meta {
  display: block;
  color: #16766b;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 781px) {
  /* Anh: 1 container vuong duy nhat cho ca 4 kieu card — het cai to cai be */
  .scool-bs-big__img {
    aspect-ratio: 1 / 1 !important;
  }
  .scool-bs-row__img,
  .scool-bs-promo__imgwrap {
    aspect-ratio: 1 / 1;
    width: 100%;
  }
  .scool-bs-row__img img,
  .scool-bs-promo__imgwrap .scool-bs-promo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Ten: 13/18, dung 2 dong co dinh (min-height giu grid thang hang) + ... */
  .scool-bs-row__name,
  .scool-bs-promo__name,
  .scool-bs-big__name {
    font-size: 13px;
    line-height: 18px;
    min-height: 36px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Grid blowout guard: hang gia dai hon 170px tung lam min-content cua
     card no tung 2 cot thanh 1 cot tran man — moi grid item phai duoc
     phep co lai duoi min-content. */
  .scool-bs-grid > *,
  .scool-bs-side > *,
  .scool-bs-big-wrap,
  .scool-bs-row__body,
  .scool-bs-promo__body {
    min-width: 0;
  }
  /* Khoi gia: bo cuc CO DINH 2 hang de moi card DEU SO DONG (user 06/09f)
     — hang 1 gia 17px + gach 9px (vua 150px ke ca gia 6 chu so), hang 2
     pill; SP khong sale 1 hang nhung min-height bang nhau -> luoi deu. */
  .scool-bs-row__price,
  .scool-bs-promo__price,
  .scool-bs-big__price {
    display: inline-flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    border-radius: 6px;
    padding: 3px 8px;
    margin: 2px 0 !important;
    box-sizing: border-box;
  }
  .scool-bs-price--deal {
    background: #ffd60a;
  }
  .scool-bs-price--plain {
    background: #fff;
    border: 1px solid #ececec;
  }
  /* 150px khong du 3 phan tu 1 hang -> bo cuc co dinh 2 hang trong khoi
     vang: hang 1 GIA + gach (order swap vi Woo in del truoc ins), hang 2
     pill Tiet kiem. Chong khoi 3 hang 65px lam anh tut duoi 55%. */
  .scool-bs-grid ins,
  .scool-bs-big__price ins {
    order: 1;
    font-size: 17px;
    font-weight: 800;
    color: #1e1e1e !important;
    line-height: 1.1;
    white-space: nowrap;
  }
  .scool-bs-grid del,
  .scool-bs-big__price del {
    order: 2;
    font-size: 9px;
    color: #4d453f;
    white-space: nowrap;
  }
  .scool-bs-row__price .scool-bs-saving,
  .scool-bs-promo__price .scool-bs-saving,
  .scool-bs-big__price .scool-bs-saving {
    order: 3;
    flex-basis: 100%;
    width: fit-content;
  }
  .scool-bs-sub--deadline {
    font-weight: 600;
    color: #b34400;
  }
  .scool-bs-sub--sales {
    font-size: 11px;
    font-weight: 500;
    color: var(--wp--preset--color--on-surface-variant);
    background: none;
    padding: 0;
  }
  .scool-bs-sub--assure {
    font-size: 10px;
    font-weight: 500;
    color: var(--wp--preset--color--on-surface-variant);
    background: none;
    padding: 0;
  }
  /* Badge MOI VE teal — tach he do/cam cua deal */
  .scool-bs-badge--new {
    background: #007c78;
    color: #fff;
  }
}
.scool-bs-saving {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f04438;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
}
/* Desktop giu nguyen trang do-copy mockup — vong toi uu la mobile. */
@media (min-width: 782px) {
  .scool-bs-meta,
  .scool-bs-saving {
    display: none;
  }
}
@media (min-width: 782px) {
  .scool-bs-combo-strip {
    max-width: none;
    margin-bottom: 18px;
  }
}


/* ==========================================================================
   Vong toi uu 06/09f (Codex+Gemini dong thuan vong 2/5) — 2 cum:
   A. Tile danh muc mobile: bo blob/oval, 3 card bo 16 dong nhat, scrim toi
      3-stop + tint de chu TRANG luon doc duoc, eyebrow #FFD2B5, arrow ca 3.
   B. Hero mobile: chu lan nen anh sang -> scrim gradient 2 lop (trai/duoi)
      + doi HE CHU TRANG. Chu dich lech do-copy mockup: user uu tien DOC
      DUOC/chuyen doi hon trung mockup (mockup goc anh toi hon anh that).
   ========================================================================= */
@media (max-width: 781px) {
  /* --- A. Tiles --- */
  .scool-cat-tile--nam {
    border-radius: 16px;
    height: 220px;
  }
  .scool-cat-tile--nu,
  .scool-cat-tile--treem {
    border-radius: 16px;
    height: 174px;
  }
  .scool-cat-tile--treem .scool-cat-tile__caption {
    left: 12px;
    bottom: 14px;
    transform: none;
    text-align: left;
    font-size: 18px;
  }
  /* blob cu con tai ap len ca __wrap/__link (block mockup-exact ~9129) —
     phai de len dung bo 3 selector do */
  .scool-cat-tile--treem,
  .scool-cat-tile--treem .scool-cat-tile__wrap,
  .scool-cat-tile--treem .scool-cat-tile__link {
    border-radius: 16px;
  }
  .scool-cat-tile__link::after,
  .scool-cat-tile--treem .scool-cat-tile__link::after {
    inset: 0;
    height: 100%;
    background:
      linear-gradient(180deg, rgba(25, 18, 14, 0.08) 0%, rgba(25, 18, 14, 0.22) 45%, rgba(25, 18, 14, 0.78) 100%),
      rgba(47, 31, 24, 0.12);
  }
  .scool-cat-tile__caption {
    left: 16px;
    bottom: 16px;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: 0;
  }
  .scool-cat-tile--nu .scool-cat-tile__caption,
  .scool-cat-tile--treem .scool-cat-tile__caption {
    font-size: 16px;
    left: 12px;
    bottom: 14px;
    right: 54px; /* chua cho arrow 36px + 14 — "DEP TRE EM" khong bi cat */
    max-width: none;
  }
  .scool-cat-tile__eyebrow {
    color: #ffd2b5;
    letter-spacing: 0.08em;
  }
  .scool-cat-tile__arrow {
    right: 14px;
    bottom: 14px;
    width: 36px;
    height: 36px;
  }

  /* --- B. Hero scrim + he chu trang --- */
  .scool-hero-bg-wrap::after {
    background:
      linear-gradient(90deg, rgba(34, 24, 19, 0.72) 0%, rgba(34, 24, 19, 0.48) 52%, rgba(34, 24, 19, 0.12) 100%),
      linear-gradient(0deg, rgba(34, 24, 19, 0.52) 0%, rgba(34, 24, 19, 0) 55%);
  }
  .scool-hero__line1 {
    -webkit-text-stroke: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  }
  .scool-hero__accent {
    color: #ffb27d;
    font-size: 22px;
    font-weight: 700;
  }
  .scool-hero__velocity {
    color: rgba(255, 255, 255, 0.78);
  }
  .scool-hero__flash-chip {
    background: #ff5f00;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    padding: 8px 10px;
  }
  .scool-hero p {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-left-color: #ffb27d;
  }
  .scool-hero p strong {
    color: #fff;
  }
  .scool-hero__cta .wp-block-button__link {
    background: #1f1714 !important;
    min-height: 48px;
  }
  .scool-hero .wp-block-buttons .scool-hero__secondary .wp-block-button__link {
    color: #fff !important;
    text-decoration-color: #ffb27d;
    text-underline-offset: 4px;
  }
}


/* ==========================================================================
   Vong nhan PLP 06/09g (Codex+Gemini dong thuan vong 2/5): 1 badge chinh/
   anh (vang flash GIU rieng PLP — deal marker trong luoi so sanh; MOI VE
   teal cho SP khong sale <=21 ngay); ton chi hien <=5 "Chỉ còn X đôi";
   freeship/da-ban/tiet-kiem KHONG len card PLP (cap trang/home).
   ========================================================================= */
.scool-badge--new-ve {
  background: #007c78;
  color: #fff;
}


/* ==========================================================================
   Bai hoc Shopee 06/09h (Codex+Gemini dong thuan vong 2/5): (1) quick-
   filter chip GIA tren PLP (shortcut ?gia= hien huu, active + click lai
   xoa loc); (2) nang hierarchy GIA tren card PLP — gia sale cam dam
   18px mobile / 20px desktop, gia thuong mau than (chi giam gia moi co
   mau nhan — khong do toan luoi kieu marketplace); deadline <24h dem GIO
   tinh (PHP). KHONG ap: ETA per-card, 'Da ban' PLP, prefix Chinh hang,
   rating/voucher (khong co du lieu that).
   ========================================================================= */
.scool-chip--price {
  border-color: rgba(255, 95, 0, 0.45);
  color: #b34400;
  font-weight: 700;
}
.scool-chip--price.is-active {
  background: var(--wp--preset--color--primary-container);
  border-color: var(--wp--preset--color--primary-container);
  color: #fff;
}
/* Gia card PLP: phan cap manh hon */
.woocommerce ul.products li.product .price {
  font-size: 18px;
  font-weight: 800;
  color: #2b2b31; /* gia thuong: mau than, khong nhan */
}
.woocommerce ul.products li.product .price ins {
  color: #d94f00; /* chi gia SALE moi mang mau nhan cam dam */
  text-decoration: none;
  font-weight: 800;
}
.woocommerce ul.products li.product .price del {
  font-size: 12px;
  font-weight: 400;
  color: #98938e;
}
@media (min-width: 782px) {
  .woocommerce ul.products li.product .price {
    font-size: 20px;
  }
}


/* ==========================================================================
   Vong toi uu PLP-flash 06/09i (Codex+Gemini dong thuan vong 2/5):
   - Thu tu tang moi: anh -> TEN -> chips 1 hang -> meta 1 dong -> [day]
     pricebox (ghim margin-top:auto de gia thang hang).
   - Card FLASH: pricebox nen vang nhat #fff4cc + pill do Tiet kiem; gia
     trong khoi vang mau THAN (3 vai tro mau); KHONG vien/nen ca card.
   - Sale khong dat chuan flash: giu cam #d94f00 (vong Shopee); thuong: than.
   - Strip flash cap trang dau PLP.
   ========================================================================= */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .scool-card-pricebox {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  width: fit-content;
  max-width: 100%;
}
.woocommerce ul.products li.product .scool-card-pricebox .price {
  margin: 0;
}
.woocommerce ul.products li.product .scool-card-pricebox.is-flash {
  background: #fff4cc;
  border-radius: 8px;
  padding: 6px 10px;
}
.woocommerce ul.products li.product .scool-card-pricebox.is-flash .price ins {
  color: #1e1e1e; /* trong khoi vang: DEN noi "gia phai tra" */
}
.scool-card-saving {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f04438;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}
/* Chips: 1 hang text teal thay 2 pill wrap */
.scool-card-chips--line {
  color: #16766b;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.scool-card-chips--line .scool-card-chip {
  all: unset;
}
/* Meta: 1 dong, khong uppercase */
.scool-card-meta {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Ten: giu cho 2 dong de luoi deu */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
/* Strip flash cap trang */
.scool-plp-flash-strip {
  margin: 10px 0 4px;
}
.scool-plp-flash-strip a {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #fff4cc;
  color: var(--wp--preset--color--on-surface);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.scool-plp-flash-strip strong {
  font-weight: 800;
}
.scool-plp-flash-strip__time {
  color: #7a5c00;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scool-plp-flash-strip__time [data-plpflash-count] {
  font-variant-numeric: tabular-nums;
  color: #b34400;
}
.scool-plp-flash-strip__cta {
  margin-left: auto;
  font-weight: 700;
  color: #b34400;
  flex-shrink: 0;
}


/* ==========================================================================
   Vong toi uu 06/09j (dong thuan vong 2/5 — Codex giu 3 chot cu khi bi
   chat van): LUOI SACH + flash no dung lieu, DAU TRANG ~200px.
   - Pricebox TRANG moi card (bo nen vang full-width — nguon 'dai vang');
     flash = vien trai vang 3px; pill Tiet kiem CHI khi han <72h.
   - Gia + gach CUNG hang; meta gop 1 dong; card vien bo, anh nen xam.
   - Dau trang: H1 1 dong, chips 1 hang cuon ngang khong hop/label, strip
     flash mong truoc grid, trust strip xuong cuoi luoi.
   ========================================================================= */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.woocommerce ul.products li.product .scool-card-media {
  background: #f5f5f5;
}
.woocommerce ul.products li.product .scool-card-media img {
  mix-blend-mode: multiply; /* anh studio nen trang hoa vao nen xam */
}
/* content padding hong ro rang */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .scool-card-meta,
.woocommerce ul.products li.product .scool-card-pricebox,
.woocommerce ul.products li.product .scool-card-stock {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
/* Pricebox: TRANG, gon 2 hang, gia + gach CUNG hang */
.woocommerce ul.products li.product .scool-card-pricebox,
.woocommerce ul.products li.product .scool-card-pricebox.is-flash {
  background: none;
  border-radius: 0;
  padding: 2px 0 10px;
  gap: 2px 8px;
}
.woocommerce ul.products li.product .scool-card-pricebox.is-flash {
  border-left: 3px solid #ffd60a;
  padding-left: 8px;
  margin-left: 10px !important;
}
.woocommerce ul.products li.product .scool-card-pricebox .price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}
.woocommerce ul.products li.product .scool-card-pricebox .price ins {
  order: 1;
  white-space: nowrap;
}
.woocommerce ul.products li.product .scool-card-pricebox .price del {
  order: 2;
  font-size: 11px;
  white-space: nowrap;
}
.woocommerce ul.products li.product .scool-card-pricebox.is-flash .price ins {
  color: #d94f00 !important; /* giu CAM dam da chot — khong do, khong den */
}
.scool-card-pricebox .scool-card-saving {
  flex-basis: 100%;
  width: fit-content;
}
/* Meta gop: 1 dong, ellipsis CUOI dong */
.woocommerce ul.products li.product .scool-card-meta {
  color: #667085;
  font-size: 12px;
  font-weight: 500;
}
/* Dau trang */
@media (max-width: 781px) {
  .woocommerce-products-header h1,
  .scool-plp h1.woocommerce-products-header__title {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scool-plp-chips-row {
    background: none;
    border: none;
    padding: 0;
    margin: 6px 0 4px;
  }
  .scool-plp-chips-row .scool-situation-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .scool-plp-chips-row .scool-situation-chips::-webkit-scrollbar {
    display: none;
  }
  .scool-plp-chips-row .scool-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .scool-plp-flash-strip {
    margin: 0 0 10px;
  }
  .scool-plp-flash-strip a {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
  }
  /* trust strip gio nam cuoi luoi — margin tho */
  .scool-trust-strip {
    margin-top: 18px;
  }
}


/* Vong SEO+CRO 06/09k: dong social/urgency duoi gia PDP */
.scool-pdp-social-urgency {
  margin: 4px 0 10px;
  font-size: 13px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-pdp-sold {
  font-weight: 600;
}
.scool-pdp-deadline {
  color: #b34400;
  font-weight: 600;
}


/* ==========================================================================
   Vong 06/09l (dong thuan vong 2/5): he nhan PLP 3 tang phan vung —
   CHUC NANG = sticker goc duoi anh; DE XUAT = pill cam nhat duoi ten;
   KY THUAT = meta text. + Xem them 12/AJAX + trust strip dai kem.
   ========================================================================= */
/* Sticker chuc nang goc duoi anh (<=2) — nen than 72%, chu trang, 22px */
.scool-card-stickers {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
  max-width: calc(100% - 16px);
  overflow: hidden;
}
.scool-card-sticker {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(30, 30, 30, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
/* Pill de xuat duoi ten — cam nhat, sao nho; Duoc yeu thich cung nhom */
.scool-card-endorse {
  display: inline-block;
  width: fit-content;
  margin: 2px 10px !important;
  padding: 3px 9px;
  border-radius: 6px;
  background: #fff1e8;
  color: #c74e14;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
/* Xem them: nut + bo dem */
.scool-plp-load-more__count {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
}
.scool-plp-load-more__done {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
  padding: 10px 0;
}
/* Trust strip redesign: dai kem, heading + 3 muc */
.scool-trust-strip--band {
  display: block;
  background: #fff8f2;
  border: none;
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin-top: 20px;
}
.scool-trust-strip__heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wp--preset--color--on-surface);
}
.scool-trust-strip--band .scool-trust-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.scool-trust-strip--band .scool-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}
.scool-trust-strip--band .scool-trust-strip__item svg {
  color: var(--wp--preset--color--primary-container);
  flex-shrink: 0;
}
.scool-trust-strip__sub {
  font-size: 11px;
  font-weight: 500;
}
.scool-trust-strip__sub a {
  color: #b34400;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* fix 06/09l: pill Tiet kiem tran full-width (flex-basis 100% + fit-content
   -> basis thang) — pricebox ve column align-start, pill tu co theo noi dung */
.woocommerce ul.products li.product .scool-card-pricebox {
  flex-direction: column;
  align-items: flex-start;
}
.woocommerce ul.products li.product .scool-card-pricebox .scool-card-saving {
  flex-basis: auto;
  width: fit-content;
  margin-top: 3px;
}


/* ==========================================================================
   Vong KHAT KHE 06/09m (phuong phap scarcity <=25%, Codex+Gemini):
   1 sticker hero/anh, chu >=12px cao 28px doc ro tren dien thoai, khong
   ellipsis (khong du cho thi khong hien — copy co dinh ngan luon vua);
   chip filter thuoc tinh thay cho sticker pho bien.
   ========================================================================= */
.scool-card-sticker {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(24, 24, 24, 0.78); /* tuong phan >=4.5:1 tren anh sang */
}
.scool-card-stickers {
  max-width: none;
  overflow: visible; /* cam cat chu — copy co dinh da do vua 166px */
}
.scool-chip--attr {
  border-color: rgba(22, 118, 107, 0.45);
  color: #16766b;
  font-weight: 700;
}
.scool-chip--attr.is-active {
  background: #16766b;
  border-color: #16766b;
  color: #fff;
}


/* Vong jobs-first 06/09n: sticker FOMO ton do khan cap (khac nen than
   cua thuoc tinh) */
.scool-card-sticker--fomo,
.scool-card-stickers .scool-card-sticker:first-child:last-child {
  /* giu style chung; FOMO ton dung mau do dat */
}


/* ==========================================================================
   MOCKUP PLP v2 — DO-COPY 07/09 (mockup/product-list, user cap tu lenh
   Stitch 07-plp-stitch-v2): so do render that cua mockup la chuan.
   KHONG ap tu mockup: "Giao hoa toc 2H", "chinh xac 99%", bottom-nav
   "Tra cuu", cau FAQ claim chong truot cho MOI doi (chi 35% SKU), dong
   "Gia pho bien re nhat" (claim kho kiem chung).
   ========================================================================= */
/* Badge %+han: 1 DONG, nen amber-400 chu amber-950, 10px extrabold, bo 4 */
.scool-badge--flash {
  display: inline-block;
  background: #fbbf24 !important;
  color: #451a03 !important;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
}
.scool-badge--flash small {
  display: inline;
  font-size: inherit;
}
.scool-badge--new-ve {
  background: #10b981 !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
}
/* Sticker hero: 24px cao, 11px medium, nen slate-950/75, bo 4 */
.scool-card-sticker {
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: rgba(2, 6, 23, 0.75);
  letter-spacing: -0.01em;
}
.scool-card-stickers {
  left: 6px;
  bottom: 4px;
}
/* Saving pill: chu do tren nen do nhat (het pill do dac) */
.scool-card-saving,
.scool-bs-saving {
  background: #fef2f2;
  color: #dc2626;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 14px;
}
/* Endorse pill: cam #ff5f00 tren cam nhat, 10px bold */
.scool-card-endorse {
  background: #fff7ed;
  color: #ff5f00;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 14px;
}
/* Gia card PLP theo mockup: 14px extrabold; sale #ff5f00, thuong slate-900 */
.woocommerce ul.products li.product .price {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.woocommerce ul.products li.product .scool-card-pricebox .price ins,
.woocommerce ul.products li.product .scool-card-pricebox.is-flash .price ins {
  color: #ff5f00 !important;
  font-weight: 800;
}
@media (min-width: 782px) {
  .woocommerce ul.products li.product .price {
    font-size: 15px;
  }
}
/* Dong phu card thuong */
.scool-card-subline {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}
/* Chips: nen slate-100 bo full; active cam dac trang */
.scool-plp-chips-row .scool-chip {
  background: #f1f5f9;
  border: none;
  color: #334155;
  font-weight: 600;
}
.scool-plp-chips-row .scool-chip.is-active,
.scool-plp-chips-row .scool-chip[aria-current] {
  background: #ff5f00;
  color: #fff;
}
/* Nut Sap xep/Bo loc + badge dem */
.scool-plp-mobile-trigger__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  background: #ff5f00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
/* Strip flash: mong 36px, nen #fefce8 vien y #fef08a, khong bo goc */
.scool-plp-flash-strip a {
  height: 36px;
  padding: 0 14px;
  border-radius: 0;
  background: #fefce8;
  border-top: 1px solid #fef08a;
  border-bottom: 1px solid #fef08a;
  font-size: 12px;
  color: #78350f;
}
.scool-plp-flash-strip a strong {
  font-weight: 800;
}
.scool-plp-flash-strip__cta {
  color: #ff5f00;
}
/* Load-more: nut full-width 44px vien slate-300 bo full; dem duoi giua */
.scool-plp-load-more {
  display: block;
}
.scool-plp-load-more__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* box-sizing + padding 0: rule cu padding 12px 28px + width 100%
     (content-box) lam nut rong 401px > khung 375 -> PLP trang ngang
     (defect QA 07/09) */
  box-sizing: border-box;
  padding: 0;
  height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.02em;
}
.scool-plp-load-more__count {
  text-align: center;
  font-size: 11px;
  color: #64748b;
}
/* Trust strip theo mockup: nen vang kem vien amber, heading cam icon shield,
   items chia dong ke, label trai + action phai */
.scool-trust-strip--band {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.scool-trust-strip__heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.scool-trust-strip__heading svg {
  color: #f59e0b;
}
.scool-trust-strip--band .scool-trust-strip__items {
  display: block;
}
.scool-trust-strip--band .scool-trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(253, 230, 138, 0.6);
  font-size: 12px;
}
.scool-trust-strip--band .scool-trust-strip__item:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}
.scool-trust-strip__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #1e293b;
}
.scool-trust-strip__sub a {
  color: #ff5f00;
  font-weight: 700;
  text-decoration: none;
}
.scool-trust-strip__sub-muted {
  color: #94a3b8;
  font-weight: 500;
}
/* "Co the ban quan tam": chips tu khoa, heading trai nho */
.scool-plp-recommended--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}
.scool-plp-recommended__chip {
  display: inline-block;
  background: rgba(241, 245, 249, 0.8);
  color: #334155;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
}
.scool-plp-recommended__chip:hover {
  background: rgba(226, 232, 240, 0.8);
}
@media (max-width: 781px) {
  .scool-plp-recommended-section h2 {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
  }
}


/* fix v2: nut Xem them theo mockup — khong uppercase, 12px */
.scool-plp-load-more__link {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}


/* ==========================================================================
   Vong 07/09b (3-ben dong thuan vong 2): ICON cho MOI nhan (chi dao user)
   + PDP reorder (trust/gap sau CTA, mau truoc size, sticker hero gallery).
   ========================================================================= */
/* icon nam trong nhan: canh giua, cach chu 3-4px, khong lon hon chu */
.scool-badge svg,
.scool-card-sticker svg,
.scool-card-endorse svg,
.scool-card-saving svg,
.scool-bs-saving svg,
.scool-chip--attr svg {
  display: inline-block;
  vertical-align: -1.5px;
  margin-right: 3px;
  flex-shrink: 0;
}
.scool-card-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.scool-card-sticker svg {
  vertical-align: middle;
  margin-right: 4px;
}
.scool-chip--attr {
  display: inline-flex;
  align-items: center;
}
/* PDP: MAU truoc SIZE — DOM Woo da render Mau truoc Size san (kiem tra
   07/09b), khong can dao gi. */
/* Sticker hero dong bo tren gallery PDP */
.single-product .woocommerce-product-gallery .scool-card-stickers,
.scool-pdp-gallery-badges + .scool-card-stickers {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
}
.single-product .woocommerce-product-gallery {
  position: relative;
}


/* Sticker hero overlay anh chinh gallery PDP (nam TRONG gallery__image) */
.single-product .woocommerce-product-gallery__image {
  position: relative;
}
.single-product .woocommerce-product-gallery__image .scool-card-stickers {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
}


/* Vong 07/09c: cham mau bien the goc duoi PHAI anh card */
.scool-card-swatches {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px 5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
}
.scool-card-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  margin-left: -3px;
}
.scool-card-swatch:first-child {
  margin-left: 0;
}
.scool-card-swatch--more {
  width: auto;
  height: 12px;
  border: none;
  box-shadow: none;
  background: none !important;
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  line-height: 12px;
  padding-left: 2px;
}


/* ==========================================================================
   PDP THEO MOCKUP STITCH V2 — DO-COPY RENDER 07/09d
   (mockup/product-detail; so do tu Playwright computed: gia 32/800 cam,
   del 14 xam #565e74, pill saving #93000a/#ffdad6 bo full, size active
   nen cam trang bo 8, 2 nut cung hang h48 bo 12, trust ngang 11px chia
   vach, freeship khoi vien cam, USP grid 2x2, tab pill segmented).
   ========================================================================= */
@media (max-width: 781px) {
  /* Gia */
  .single-product .summary .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
  }
  .single-product .summary .price ins,
  .single-product .summary .price > .woocommerce-Price-amount {
    font-size: 32px;
    font-weight: 800;
    color: #ff5f00 !important;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  .single-product .summary .price del,
  .single-product .summary .price del .woocommerce-Price-amount {
    font-size: 14px;
    font-weight: 400;
    color: #565e74 !important;
  }
}
.scool-pdp-savings {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffdad6;
  color: #93000a;
  /* Inter + pad 2/8 nhu mockup (do 07/09e): Montserrat pad 3/9 lam pill
     140px -> hang gia 348 > 343 va pill roi xuong hang 2 */
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}
.scool-pdp-social-urgency {
  font-size: 13px;
  color: #565e74;
}
/* Picker labels + size chips */
.single-product form.variations_form .variations label {
  font-size: 14px;
  font-weight: 600;
  color: #191c1e;
}
.single-product form.variations_form .scool-variation-chip.is-selected,
.single-product form.variations_form .scool-size-chip.is-selected {
  background: #ff5f00;
  color: #fff;
  border-color: #ff5f00;
  border-radius: 8px;
}
/* 2 nut cung hang: ATC vien + Mua ngay cam (buy-now da chuyen vao form).
   FIX vo 07/09d: flex phai WRAP + note doi-size chiem hang rieng, qty an
   tren mobile (mockup mua 1 mac dinh) — khong de min-content keo tran
   ca summary. */
.single-product form.cart .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.single-product form.cart .scool-pdp-exchange-proof,
.single-product form.cart .woocommerce-variation-availability,
.single-product .single_variation {
  flex-basis: 100%;
  min-width: 0;
}
.single-product form.cart .single_add_to_cart_button {
  white-space: nowrap;
}
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 0;
  height: 48px;
  /* !important: thang rule toan cuc 999px !important dau file */
  border-radius: 12px !important;
  background: #fff !important;
  color: #ff5f00 !important;
  border: 1.5px solid rgba(255, 95, 0, 0.55);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}
.single-product form.cart .scool-buy-now-button {
  flex: 1.4 1 0;
  height: 48px;
  border-radius: 12px !important;
  background: #ff5f00;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(255, 95, 0, 0.25);
  margin: 0;
}
/* Trust bar: 3 muc NGANG chia vach, icon tren nhan duoi 11px */
.scool-pdp-trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wp--preset--color--surface-container-low, #f4f4f6);
  border-radius: 12px;
  padding: 10px 6px;
  margin: 12px 0;
}
.scool-pdp-trust-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #565e74;
  text-align: center;
  border-right: 1px solid rgba(100, 110, 130, 0.18);
  padding: 0 4px;
}
.scool-pdp-trust-bar__item:last-child {
  border-right: none;
}
.scool-pdp-trust-bar__item svg,
.scool-pdp-trust-bar__item .material-symbols-outlined {
  color: #191c1e;
  font-size: 18px;
}
/* Freeship gap: khoi vien cam bo 16 */
.scool-pdp-freeship-gap {
  border: 1px solid rgba(255, 95, 0, 0.45);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0;
}
.scool-pdp-freeship-gap__head {
  display: flex;
  flex-wrap: wrap; /* 375px khong du 2 cum 1 hang — cum "Da co" tut xuong */
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.scool-pdp-freeship-gap__title {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* khong cho "Freeship tu" gay dong giua cum */
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #ff5f00;
}
.scool-pdp-freeship-gap__title .woocommerce-Price-amount,
.scool-pdp-freeship-gap__title .woocommerce-Price-amount bdi {
  color: inherit;
  font-size: 14px !important; /* thang rule gia to toan cuc len bdi */
  font-weight: inherit;
  font-family: inherit;
}
.scool-pdp-freeship-gap__have {
  font-size: 12px;
  color: #565e74;
  white-space: nowrap;
}
.scool-pdp-freeship-gap__have .woocommerce-Price-amount {
  font-size: inherit;
  color: inherit;
}
/* USP: grid 2x2 the xam nhat */
.scool-pdp-usp-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.scool-pdp-usp-bar > * {
  background: var(--wp--preset--color--surface-container-low, #f4f4f6);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
/* Tabs: pill segmented */
.single-product .wc-tabs,
.single-product ul.tabs {
  display: flex;
  gap: 4px;
  background: var(--wp--preset--color--surface-container-low, #f0f1f3);
  border-radius: 12px;
  padding: 4px;
  border-bottom: none !important;
}
.single-product .wc-tabs li {
  flex: 1;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  border-radius: 8px;
  text-align: center;
}
.single-product .wc-tabs li a {
  display: block;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #565e74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: none !important; /* bo gach chan he tab cu (underline cam) */
}
.single-product .wc-tabs li.active {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.single-product .wc-tabs li.active a {
  color: #ff5f00;
  border-bottom: none !important;
}


/* Ton kho PDP: an khi >5 (dong bo he — ton cao phan tac dung); Woo stock
   text van in cho <=5 */
.single-product .stock.in-stock {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================================
   Vong QA "vo hinh/lech" 07/09 (3-ben): cac va layout phat hien qua
   screenshot 375/768/1024/1440.
   ========================================================================= */
/* (QA-2) Ten card bi cat NUA dong 3 o 375px: CSS ngoai (Woo blocks) de
   display:flow-root len ten -> -webkit-line-clamp chet, ten 3 dong bi
   overflow:hidden cat giua glyph. Khoi phuc -webkit-box de clamp 2 dong +
   dau "..." chay lai. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Chrome 151 (spec line-clamp moi) van de lo nua dong 3 khi hop cao hon
     2 dong (padding-top cong vao chieu cao): khoa cung 2 dong, doi
     padding-top -> margin-top de max-height 2.6em = dung 2 x line-height. */
  line-height: 1.3 !important;
  max-height: 2.6em;
  padding-top: 0 !important;
  /* padding-bottom PHAI 0: overflow:hidden clip o PADDING EDGE — nua dong 3
     tran vao vung padding-bottom (0.5em tu global styles) van hien ra. */
  padding-bottom: 0 !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}
/* (QA-3) 2 nut "Sap xep: Mac dinh"/"Bo loc" cao thap lech o 375 vi text
   nut sort wrap 2 dong: khoa 1 dong, ha padding ngang + co chu 1 nac de
   "Sắp xếp: Mặc định" + icon vua khung ~165px. */
.scool-plp-mobile-trigger {
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 429px) {
  .scool-plp-mobile-trigger {
    font-size: 12px;
    padding: 12px 6px;
    gap: 5px;
  }
}
/* (QA-7) Khoi lien he PDP: dong ETA da go (trust bar noi roi) — don duong
   ke border-top lo lung con lai tren cum Chat Zalo/Hotline; them caption
   ngu canh (de xuat Codex) cho khoi khoi trong. */
.scool-pdp-delivery__contact {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 6px !important;
}
.scool-pdp-delivery__ask {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--on-surface-variant);
}
/* (QA-11) Link "Xóa lựa chọn": gon, ro la hanh dong phu cua picker. */
.single-product .reset_variations {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--wp--preset--color--on-surface-variant);
  text-decoration: underline;
}
/* (QA-bo-sung, ca Codex + Gemini canh bao): thanh fixed day man hinh
   (sticky ATC tren PDP, bottom-nav noi 24px tren cac trang khac) che
   phan cuoi footer khi cuon het trang — dem padding-bottom cho body,
   cong them safe-area (iPhone tai tho). Cart/Checkout da co dem rieng. */
@media (max-width: 767px) {
  body.single-product {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  body:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
}
/* (QA-8 + vong do-copy spacing 07/09e) Nhip doc PDP theo DUNG so do render
   mockup mobile (mockup-lines.txt): H1->rating 12, rating->gia 12, gia->
   social 8, social->ben 8, ben->picker 20, label->o 8, size label mt 16,
   note doi size mt 8, CTA mt 16, trust mt 32, freeship mt 28, mo ta mt 28,
   USP mt 16. MOBILE LA CHUAN (chi dao user 07/09) — ap moi kho, khong
   media query rieng. */
.single-product .product .summary > * {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
.single-product .product .summary .product_title {
  margin-bottom: 8px !important;
}
.single-product .scool-pdp-rating {
  margin: 0 0 12px !important;
}
.single-product .product .summary > p.price {
  margin: 0 0 8px !important;
}
.single-product .scool-pdp-social-urgency {
  margin: 0 0 8px !important;
}
.single-product .scool-pdp-price-per-day {
  margin: 0 0 20px !important;
}
.single-product .product_meta {
  margin: 8px 0 !important;
}
.single-product .woocommerce-Tabs-panel {
  min-height: 0 !important;
}
/* Hang gia (mockup: 1 HANG — ins 32/800 cam TRUOC, del 14 xam SAU, pill
   cuoi; Woo in del truoc ins -> order swap nhu card PLP) */
.single-product .product .summary > p.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.single-product .product .summary > p.price ins {
  order: 1;
  text-decoration: none;
  background: none;
}
.single-product .product .summary > p.price del {
  order: 2;
  font-size: 14px;
  font-weight: 400;
  color: #565e74;
  opacity: 1;
}
.single-product .product .summary > p.price .scool-pdp-savings {
  order: 3;
}
/* Dong "Đã bán · Ưu đãi..." (13/400 lh 19.5 + icon dong ho 16 cam) */
.scool-pdp-social-urgency {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.scool-pdp-social-urgency__icon {
  flex-shrink: 0;
  color: #ff5f00;
}
/* Dong ben -> badge pill XANH emerald (12/700 #065f46 + icon #047857).
   inline-block (KHONG flex): text phai chay tu nhien wrap 2 dong nhu
   mockup — flex tach strong/note thanh cot rieng nhin roi. */
.scool-pdp-price-per-day {
  display: inline-block;
  background: #ecfdf5;
  color: #065f46 !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 14px;
}
.scool-pdp-price-per-day__icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
  color: #047857;
}
.scool-pdp-price-per-day strong {
  color: inherit;
  font-weight: 700;
}
.scool-pdp-price-per-day__note {
  font-weight: 400;
}
/* Picker: label 14/600, hang mau mb 8, size label cach swatch 16 */
.single-product form.variations_form .variations {
  margin-bottom: 0;
}
.single-product form.variations_form .variations td.value {
  padding-bottom: 8px;
}
/* Note doi size + CTA */
.single-product form.cart .scool-pdp-exchange-proof {
  margin: 8px 0 16px;
  font-size: 12px;
  color: #565e74;
}
/* CTA chu thuong 400 theo mockup (de global rule uppercase 700 thua) */
.single-product form.cart .single_add_to_cart_button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px;
  font-weight: 400;
  /* !important: rule khac de display:block lam ::before inline mat kich
     thuoc (icon gio khong hien) */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.single-product form.cart .single_add_to_cart_button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  /* data URI phai URL-encode (%3C/%3E/%22) — ban tho co the bi parser CSS
     bo qua im lang */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1.5'/%3E%3Ccircle cx='19' cy='21' r='1.5'/%3E%3Cpath d='M2 2h3l2.6 12.5a2 2 0 0 0 2 1.5h8.7a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1.5'/%3E%3Ccircle cx='19' cy='21' r='1.5'/%3E%3Cpath d='M2 2h3l2.6 12.5a2 2 0 0 0 2 1.5h8.7a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.single-product form.cart .scool-buy-now-button {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Trust bar mt 32; label 11/500; icon 18 den */
.scool-pdp-trust-bar {
  margin: 32px 0 0 !important;
}
.scool-pdp-trust-bar__item svg {
  width: 18px;
  height: 18px;
}
/* Freeship mt 28; title 14/400; message 12/400 lh 18 + strong 700 den */
.scool-pdp-freeship-gap {
  margin: 28px 0 0 !important;
}
.scool-pdp-freeship-gap__title {
  font-weight: 400;
}
.scool-pdp-freeship-gap__message {
  margin: 6px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #565e74;
}
.scool-pdp-freeship-gap__message strong {
  font-weight: 700;
  color: #191c1e;
}
.scool-freeship-suggest__name {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: #191c1e;
}
.scool-freeship-suggest__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.scool-freeship-suggest__price,
.scool-freeship-suggest__price .woocommerce-Price-amount {
  font-size: 12px !important;
  font-weight: 700;
  color: #ff5f00 !important;
}
.scool-freeship-suggest__add {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ff5f00;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}
/* Mo ta ngan 14/400 lh 1.625 xam, mt 28 */
.single-product .woocommerce-product-details__short-description {
  margin: 28px 0 0 !important;
  font-size: 14px;
  line-height: 1.625;
  color: #565e74;
}
/* USP: icon 20 nau + label 11 xam tren / value 12 den duoi */
.scool-pdp-usp-bar {
  margin: 16px 0 0 !important;
}
.scool-pdp-usp-bar > * {
  align-items: center;
  gap: 10px;
}
.scool-pdp-usp-bar svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #a63b00;
}
.scool-pdp-usp-bar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.scool-pdp-usp-bar__label {
  font-size: 11px;
  line-height: 1.5;
  color: #565e74;
}
.scool-pdp-usp-bar__value {
  font-size: 12px;
  line-height: 1.5;
  color: #191c1e;
}
/* Tabs 14/400, active cam */
.single-product .wc-tabs li a {
  font-size: 14px !important;
  font-weight: 400 !important;
}
/* USP: de ROW (icon trai + text 2 dong phai) — de nguoc rule column
   uppercase cua block cu */
.scool-pdp-usp-bar__item {
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.scool-pdp-usp-bar__item span {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Picker xep DOC nhu mockup: label hang rieng tren, o chon full-width
   duoi (bo bang 2 cot label trai cua Woo) */
.single-product form.variations_form .variations,
.single-product form.variations_form .variations tbody,
.single-product form.variations_form .variations tr,
.single-product form.variations_form .variations td,
.single-product form.variations_form .variations th {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}
.single-product form.variations_form .variations td.label,
.single-product form.variations_form .variations th.label {
  margin: 16px 0 8px;
}
.single-product form.variations_form .variations tr:first-child td.label,
.single-product form.variations_form .variations tr:first-child th.label {
  margin-top: 0;
}
.single-product form.variations_form .variations td.value {
  padding-bottom: 0;
}
/* Link "Xóa lựa chọn" bi .is-layout-constrained margin-inline:auto keo
   vao giua — tra ve trai */
.single-product .reset_variations {
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* O size het hang: mo + gach cheo + "Hết" 9px duoi so (mockup) */
.scool-variation-chip--size.is-oos {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.1;
  color: rgba(86, 94, 116, 0.55);
  background:
    linear-gradient(to top right, transparent 47%, rgba(86, 94, 116, 0.35) 47%, rgba(86, 94, 116, 0.35) 53%, transparent 53%),
    #fafafa;
  border-color: rgba(86, 94, 116, 0.25);
  cursor: not-allowed;
}
.scool-variation-chip__oos {
  font-size: 9px;
  line-height: 1.4;
  font-weight: 400;
}
/* Swatch mau 40px nhu mockup */
.scool-variation-chip--color {
  width: 40px !important;
  height: 40px !important;
}
/* Meta -> tabs: mockup gap lon nhung khong rong hoac — siet vung tabs */
.single-product .woocommerce-tabs {
  margin-top: 32px;
}
.single-product .woocommerce-Tabs-panel {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Vong do-copy 07/09f (12 diem user soi canh mockup): font/mau nen/gap.
   ========================================================================= */
/* (f1) Gallery -> H1: mockup gap ~20px (live 68 = row-gap 40 cua grid
   .product + summary mt 20) — mobile ha row-gap 20 + mt 0; desktop 2 cot
   giu gap 40 */
.single-product .woocommerce-product-gallery {
  margin-bottom: 0 !important;
}
.single-product .product .summary {
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* meta->tabs ~62px nhu mockup (12+32+20) */
  padding-top: 0 !important;
}
@media (max-width: 767px) {
  /* div. (KHONG li.): li card related cung mang class product
     type-product — selector cu lam card related gian gap 20px giua
     ten/nhan/gia, lech he card PLP (user bat 07/09r) */
  .single-product div.product.type-product {
    row-gap: 20px;
  }
}
/* (f2) H1 20/700 nhu mockup (live 26/800) */
.single-product .product_title {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
/* (f3) "Đã bán · Ưu đãi kết thúc" CUNG 1 mau xam 400, 1 dong (mockup) —
   truoc deadline nau #b34400/600 lam cum thanh 2 tong 2 dong */
.scool-pdp-social-urgency .scool-pdp-sold,
.scool-pdp-social-urgency .scool-pdp-deadline {
  color: #565e74 !important;
  font-weight: 400 !important;
}
/* (f4) Note "Đổi size 1-đổi-1..." tinh te nhu mockup: 12/400 xam, KHONG
   nen xam to, icon nho nau */
.single-product .scool-pdp-proof {
  background: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #565e74 !important;
  height: auto !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.single-product .scool-pdp-proof svg {
  color: #a63b00;
}
/* (f5) Freeship: thanh tien do 6px track xam / fill cam theo % that */
.scool-pdp-freeship-gap__bar {
  height: 6px;
  border-radius: 999px;
  background: #eceef0;
  overflow: hidden;
  margin: 8px 0 10px;
}
.scool-pdp-freeship-gap__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ff5f00;
}
/* (f6) Message freeship: chi DAM so tien (strong), cau con lai 400 */
.scool-pdp-freeship-gap__message {
  font-weight: 400 !important;
}
/* (f7) USP value dung font mockup (Montserrat — trong dam/ro hon label
   Inter xam) */
.scool-pdp-usp-bar__value {
  font-family: "Montserrat", sans-serif;
}
/* (f8) Tabs wrap dung mau mockup #f2f4f6, tab a pad 8 0 */
.single-product .wc-tabs,
.single-product ul.tabs {
  background: #f2f4f6 !important;
}
/* (f9) Mo ta: bullet check cam + tieu de dam + text lui vao thang hang
   (hanging indent qua flex) */
.scool-desc-points {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.scool-desc-points li {
  /* block + padding trai (KHONG flex: flex tach <strong> va text node
     thanh 2 cot doc — strong phai chay inline trong doan) */
  display: block;
  position: relative;
  margin: 0 0 12px !important;
  padding: 0 0 0 28px !important;
  font-size: 16px;
  line-height: 1.5;
  color: #565e74;
}
.scool-desc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: #ff5f00;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scool-desc-points li strong {
  color: #191c1e;
  font-weight: 700;
}
.scool-desc-note {
  font-size: 11px;
  color: var(--wp--preset--color--on-surface-variant);
}
/* (f10) Gia tri dang chon canh label picker: mau = xam 400, size = cam 700 */
.single-product form.variations_form .variations td.label,
.single-product form.variations_form .variations th.label {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.scool-picker-current {
  font-size: 14px;
  font-weight: 400;
  color: #565e74;
}
.scool-picker-current--size {
  color: #ff5f00;
  font-weight: 700;
}
/* (f11) Nen cum dung mau mockup #f2f4f6 (live dung token #f4f4f6 lech nhe) */
.scool-pdp-trust-bar,
.scool-pdp-usp-bar > * {
  background: #f2f4f6 !important;
}

/* ==========================================================================
   Vong DO-GAP 07/09g: user do khoang cach web vs mockup van lech —
   THU PHAM HE THONG: .summary flex GAP 14px cong chong len moi margin
   (moi khoang deu du dung 14px). Gap ve 0, margin tung khoi lam chu
   nhip theo dung so do mockup: H1 12 / rating 12 / gia 8 / da-ban 8 /
   ben 20 / [trong form: label 8-16, note 16] / CTA->trust 32 /
   trust->freeship 28 / freeship->mo-ta 54 / mo-ta->USP 16.
   ========================================================================= */
.single-product .product .summary {
  gap: 0 !important;
}
.single-product .product .summary .product_title {
  margin-bottom: 12px !important;
}
/* hang gia cao 38px nhu mockup (lh 1.2 tren ins 32px, truoc 48px) */
.single-product .summary .price ins,
.single-product .summary .price > .woocommerce-Price-amount {
  line-height: 1.2 !important;
}
.single-product .product .summary > .scool-pdp-social-urgency {
  margin-bottom: 8px !important;
}
.single-product .product .summary > .scool-pdp-price-per-day {
  margin-bottom: 20px !important;
  padding: 6px 10px !important;
  line-height: 1.4 !important;
}
.single-product .product .summary > form.cart {
  margin-top: 0 !important; /* ben-badge mb 20 da lam chu gap */
  margin-bottom: 32px !important; /* CTA -> trust bar */
}
.single-product form.cart .variations {
  margin-bottom: 8px !important; /* chips -> dong ton kho */
}
.single-product .stock.in-stock {
  margin: 0 0 8px !important;
}
.single-product .scool-pdp-proof {
  margin: 0 0 16px !important; /* note -> CTA 16 */
}
.single-product .product .summary > .scool-pdp-trust-bar {
  margin-bottom: 28px !important; /* trust -> freeship */
}
.single-product .product .summary > .scool-pdp-freeship-gap {
  margin-bottom: 54px !important; /* freeship -> mo ta (mock 54) */
}
.single-product .product .summary > .woocommerce-product-details__short-description {
  margin-bottom: 16px !important; /* mo ta -> USP */
}
.single-product .woocommerce-product-details__short-description p {
  margin: 0 !important; /* wpautop p mt/mb 14 lam gap doi */
}
.single-product .product .summary > .scool-pdp-usp-bar {
  margin-bottom: 16px !important;
}
.single-product .product .summary > .scool-pdp-delivery {
  margin-bottom: 12px !important;
}
/* Dong ton kho do trong summary: mock KHONG co (sticker "Chỉ còn X đôi"
   tren anh da noi) — an thi giac, DOM giu cho a11y/test */
.single-product .summary .stock.in-stock {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: 0 !important;
}
/* margin noi bo vung variation: don du 20-30px con lai */
.single-product .single_variation {
  margin: 0 !important;
  min-height: 0 !important;
}
.single-product .woocommerce-variation-availability {
  margin: 0 !important;
}
.single-product .reset_variations {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  font-size: 11px;
}
/* Hang label picker cao dung 21-24px nhu mock (dang 38 do margin/baseline
   trong label) */
.single-product .variations .label label {
  margin: 0 !important;
  line-height: 1.5;
}
.single-product form.variations_form .variations td.label,
.single-product form.variations_form .variations th.label {
  align-items: center !important;
  flex-wrap: nowrap;
  min-height: 0;
}
/* O size 44px dung mock (dang 50 do padding doc) */
.single-product .scool-variation-chip--size {
  height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}
/* note -> nut 16: form flex gap 10 da cong san -> mb 6 */
.single-product .scool-pdp-proof {
  margin-bottom: 6px !important;
}
/* Panel tab: noi dung ngay sau hang tab ~20px nhu mock (heading da
   screen-reader-text) */
.single-product .woocommerce-Tabs-panel {
  padding-top: 20px !important;
  margin-top: 0 !important;
}
.single-product .wc-tabs,
.single-product ul.tabs {
  margin-bottom: 0 !important; /* hang tab -> panel: chi con pt 20 cua panel */
}



/* ==========================================================================
   Vong 07/09h — soat lai canh mock (user: "van sai khac nhieu"):
   2 badge gallery lech co nhu mock, link Bang size, chip active cam dac,
   swatch check, o Het, label ':', pill vua kho hep 366px.
   ========================================================================= */
/* (h1) 2 badge goc anh KHAC CO nhu mock: flash 12/700 amber pad 4/10 r6;
   doi-size NHO NHE hon 11/400 nen than pad 2/8 r6 (dang 2 pill bang nhau) */
.scool-pdp-gallery-badges .scool-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  color: #451a03 !important;
  background: #fde68a !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}
.scool-pdp-gallery-ribbon {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #eff1f3 !important;
  background: rgba(45, 49, 51, 0.9) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
/* (h2) Link "Bảng size": 12/700 #a63b00 + icon thuoc, KHONG gach chan */
.scool-size-guide-link {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  color: #a63b00 !important;
  text-decoration: none !important;
  float: none;
  margin-bottom: 0;
}
/* (h3) O size dang chon: NEN CAM DAC chu TRANG nhu mock (dang cam nhat
   chu cam) */
.single-product .scool-variation-chip--size.is-active {
  background: #ff5f00 !important;
  color: #fff !important;
  border-color: #ff5f00 !important;
  font-weight: 400 !important;
}
/* (h4) Swatch mau dang chon: co dau CHECK giua (mock icon check 18px) */
.scool-variation-chip--color.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  z-index: 2;
  background: #fff;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* (h5) O size het: nen #f2f4f6, so mo .4, "HẾT" 9px uppercase nhu mock */
.scool-variation-chip--size.is-oos {
  background:
    linear-gradient(to top right, transparent 47%, rgba(86, 94, 116, 0.35) 47%, rgba(86, 94, 116, 0.35) 53%, transparent 53%),
    #f2f4f6 !important;
  color: rgba(86, 94, 116, 0.4) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.scool-variation-chip__oos {
  text-transform: uppercase;
  color: rgba(86, 94, 116, 0.5);
}
/* (h6) Label picker co DAU HAI CHAM nhu mock: "Màu sắc:" */
.single-product .variations .label label::after {
  content: ":";
}
/* (h7) Hang gia gap 8 (dang 10): pill vua ca kho hep 366px
   (131+57+126+16=330) */
.single-product .product .summary > p.price {
  gap: 4px 8px !important;
}

/* (h7b) pill 366px con thieu 3px: pad 2/6 + icon 10 -> tong 330 <= 334 */
.scool-pdp-savings {
  padding: 2px 6px !important;
}
.scool-pdp-savings svg {
  width: 10px;
  height: 10px;
}


/* ==========================================================================
   Vong 07/09i — 5 anh user khoanh do: dots gallery, icon lua sticker,
   USP the roi, an SKU-meta, heading related + Xem tat ca, ATC khong vien.
   ========================================================================= */
/* (i1) Dots gallery nhu mock: cham 6px xam #e0e3e5, active = THANH CAM
   20x6 bo full (thay thumbnail anh mo lem nhem) */
@media (max-width: 767px) {
  .flex-control-thumbs li {
    flex: 0 0 auto !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px;
    background: #e0e3e5;
    overflow: hidden;
    transition: width 0.2s ease, background 0.2s ease;
  }
  .flex-control-thumbs li img {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .flex-control-thumbs li:has(img.flex-active) {
    width: 20px !important;
    background: #ff5f00;
  }
}
/* (i2) Icon LUA mau cam trong sticker "Chỉ còn X đôi" (mock 🔥 cam) */
.scool-card-sticker .scool-sticker-flame {
  color: #ff5f00;
  fill: #ff5f00;
}
/* (i3) Nut Them gio: mock TRANG KHONG VIEN (dang vien cam 1.5px) */
.single-product form.cart .single_add_to_cart_button {
  border: none !important;
}
/* (i4) USP: 4 THE XAM ROI tren nen trang (dang 1 khoi xam to lien) —
   wrap trong suot pad 0, item tu mang nen #f2f4f6 bo 12 pad 10 */
.scool-pdp-usp-bar {
  background: none !important;
  padding: 0 !important;
  gap: 9px !important;
}
.scool-pdp-usp-bar > * {
  border-radius: 12px !important;
  padding: 10px !important;
}
/* (i5) SKU/Danh muc: mock KHONG co — an thi giac, DOM giu cho SEO/test */
.single-product .product_meta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: 0 !important;
}
/* (i6) Heading related: 20/700 + link "Xem tất cả" 12/700 #a63b00 phai */
.single-product .related.products > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.scool-related-see-all {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #a63b00 !important;
  text-decoration: none;
}


/* ==========================================================================
   Vong 07/09j — 2 anh user: dai cham mau tren anh gallery + CARD TRANG
   boc cum (mo ta + USP) va cum tabs nhu mock.
   ========================================================================= */
/* (j1) Dai cham mau goc duoi PHAI anh (pill trang nhu card PLP) */
.single-product .woocommerce-product-gallery > .scool-card-swatches {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  top: auto;
  z-index: 5;
}
/* (j2) Card trang mo ta + USP: bo 16 pad 16 tren nen trang (mock);
   margin ben trong: desc mb 16, usp mb 0 (rule > cua summary het ap vi
   2 khoi gio nam TRONG card) */
.single-product .product .summary > .scool-pdp-info-card,
.scool-pdp-info-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 16px !important;
}
.scool-pdp-info-card .woocommerce-product-details__short-description {
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 1.625;
  color: #565e74;
}
.scool-pdp-info-card .woocommerce-product-details__short-description p {
  margin: 0 !important;
}
.scool-pdp-info-card .scool-pdp-usp-bar {
  margin: 0 !important;
}
/* (j3) Cum tabs cung nam trong CARD TRANG bo 16 pad 16 (mock) */
.single-product .woocommerce-tabs {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
}

/* (j4, sua 07/09q) Flexslider lam tron width len 367px o viewport le ->
   tran 1px; max-width thang width inline JS. NHUNG gallery mobile
   full-bleed bang margin-inline -16px — max-width 100% (=content cha
   334px) CAT mat phan bu 32px lam khung anh dinh trai, ho phai 27px
   (regression user bat 07/09q). Gallery duoc phep 100% + 32px;
   flex-viewport ben trong clamp 100% cua gallery la du chan tran. */
@media (max-width: 767px) {
  .single-product .woocommerce-product-gallery {
    /* 100vw (KHONG dua vao % cha): calc(100%+32) bi vong lap layout
       (gallery no -> docW no -> % cha doi) ra 371px o viewport 366.
       Full-bleed mobile = dung be rong man hinh, margin -16 san co
       keo ve le trai. */
    width: 100vw !important;
    max-width: 100vw !important;
  }
}
.single-product .woocommerce-product-gallery .flex-viewport {
  max-width: 100% !important;
}


/* ==========================================================================
   Vong 07/09k — 2 anh user: tab active dung hieu ung mock, tab Danh gia
   TRAN man hinh, bo divider + khoang trang truoc related, khung anh card
   ho trang tren, (khoi Zalo/Hotline da go o PHP).
   ========================================================================= */
/* (k1) Tab Danh gia tran 518px: grid 2 cot minmax(220px,1fr) 2fr van ap
   o mobile -> 1 cot + min-width 0 */
@media (max-width: 767px) {
  .scool-reviews__layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .scool-reviews,
  .scool-reviews * {
    min-width: 0;
    max-width: 100%;
  }
}
/* (k2) Hieu ung tab active nhu mock: wrap xam pad 4 bo 12, active pill
   TRANG bo 8 noi ro */
.single-product .wc-tabs,
.single-product ul.tabs {
  padding: 4px !important;
  border-radius: 12px !important;
}
.single-product .wc-tabs li.active {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
/* (k3) Bo divider cam + khoang trang lon truoc related (mock lien mach):
   border/pt cua .related + margin phia tren */
.single-product .related.products {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 24px !important;
}
.single-product .woocommerce-tabs {
  margin-bottom: 0 !important;
}
.scool-desc-note {
  margin-bottom: 0 !important;
}
/* (k4) Khung anh card ho TRANG 21px phia tren: the <a> LoopProduct-link
   RONG (title/price da doi ra ngoai) van la FLEX ITEM cua li (row-gap 20
   tren PDP related) nen an 1 khoang gap -> bien thanh STRETCHED LINK phu
   ca card: absolute thoat flow (het 21px) + ca card bam duoc (chuan
   e-com; truoc do link rong h0 gan nhu KHONG bam duoc). Nut tuong tac
   trong card noi z-index len tren. */
.woocommerce ul.products li.product {
  position: relative;
}
.woocommerce ul.products li.product > .woocommerce-LoopProduct-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0 !important;
}
.woocommerce ul.products li.product .scool-wishlist-toggle,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   Vong 07/09l — tab label bi cat, sticky bar mock (thumb + variant + nut
   icon), card review theo dung mock.
   ========================================================================= */
/* (l1) "Đánh giá (2)" bi cat: li flex:1 nhung min-width auto giu
   min-content -> tong 3 tab > wrap va pill tran; min-width 0 + fs 13
   de nhan dai vua o ~98px */
.single-product .wc-tabs li {
  min-width: 0;
}
.single-product .wc-tabs li a {
  font-size: 13px !important;
  padding: 8px 4px !important;
}
/* (l2) Sticky bar mock: [thumb 44 bo 8] [gia 16 + dong bien the 11]
   [nut cam bo 12 h44 icon tui "Thêm giỏ" chu thuong] */
.scool-sticky-atc.is-visible {
  gap: 10px;
}
.scool-sticky-atc__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.scool-sticky-atc__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}
.scool-sticky-atc__price {
  font-size: 16px;
  line-height: 1.2;
}
.scool-sticky-atc__variant {
  font-size: 11px;
  font-weight: 400;
  color: #191c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scool-sticky-atc__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px !important;
  border-radius: 12px !important;
  background: #ff5f00 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
/* (l3) Card review mock: trang vien nhe bo 16 pad 16; avatar 2 chu cam
   nhat; ten dam + badge Da mua xanh; diem X.X ★ cam phai; meta 11 xam;
   hang chi so trong o vien; quote 14 + chip Demo */
.scool-review {
  background: #fff;
  border: 1px solid #eef0f3 !important;
  border-radius: 16px !important;
  padding: 16px !important;
}
.scool-review__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.scool-review__avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px;
  background: #fff1e8 !important;
  color: #ff5f00 !important;
  font-size: 12px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.scool-review__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scool-review__author {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #191c1e;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.scool-review__bought {
  font-size: 10px;
  font-weight: 600;
  color: #047857;
  background: #d1fae5;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.scool-review__meta {
  font-size: 11px;
  color: #565e74;
}
.scool-review__score {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #ff5f00;
  white-space: nowrap;
}
.scool-review-criteria {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: space-between;
  margin: 10px 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  font-size: 11px;
  color: #565e74;
}
.scool-review-criteria li {
  margin: 0 !important;
}
.scool-review-criteria strong {
  color: #191c1e;
  font-weight: 700;
}
.scool-review__body {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55;
  color: #191c1e !important;
}
.scool-review__demo {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #565e74;
  background: #eef0f3;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: 2px;
}


/* ==========================================================================
   Vong 07/09o — flash <=24h + he 2-tag mo rong (nhan social "hot").
   ========================================================================= */
.scool-card-endorse--hot {
  color: #d94f00 !important;
  background: #fff1e8;
}


/* ==========================================================================
   Vong 07/09p — icon tron kieu Shopee + fix menu accordion + siet gap.
   ========================================================================= */
/* (p1) Menu mobile: JS set [hidden] nhung rule display:flex cua panel DE
   thuoc tinh hidden (UA display:none khong important) -> accordion khong
   bao gio thu gon duoc. */
.scool-drawer__accordion-panel[hidden] {
  display: none !important;
}
/* (p2) Toan bo icon stroke bo tron dau net — phong cach Shopee mem mai */
svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* (p3) Siet cac khoang user gach do (cam nhan user thang so mock):
   freeship->mo ta 54->24, summary->tabs bo mt 32 (con 16+20=36),
   tabs->related 24->16, related->pre-footer sat lai */
.single-product .product .summary > .scool-pdp-freeship-gap {
  margin-bottom: 24px !important;
}
.single-product .woocommerce-tabs {
  margin-top: 0 !important;
}
.single-product .related.products {
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}
.single-product .scool-prefooter {
  margin-top: 16px !important;
}

/* (q2) Sticker anh khong duoc DE len dai swatch goc phai (card hep +
   copy fallback): chua cho 62px + cat cung khong ellipsis (copy he
   nhan da chot ngan) */
.scool-card-media:has(.scool-card-swatches) .scool-card-stickers,
.woocommerce ul.products li.product:has(.scool-card-swatches) .scool-card-stickers {
  max-width: calc(100% - 62px);
  overflow: hidden;
}
.scool-card-sticker {
  white-space: nowrap;
}


/* ==========================================================================
   Vong 07/09s — trang flash-sale hoc Shopee: san pham la noi dung chinh,
   card day nhan FOMO, thong tin phu nen thanh strip.
   ========================================================================= */
/* Hero nen gon */
.scool-flash-sale__hero--compact {
  padding: 16px 16px 14px !important;
  text-align: center;
}
.scool-flash-sale__hero--compact h1 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.04em;
}
.scool-flash-sale__hero--compact h1 span.scool-flash-sale__hero-bolt {
  font-size: 20px;
  margin-right: 6px;
}
.scool-flash-sale__hero--compact .scool-flash-sale__hero-badge {
  font-size: 12px;
  margin-bottom: 10px;
}
/* Trio -> strip mong cuon ngang */
.scool-uu-dai-trio--strip {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto;
  padding: 10px 16px !important;
  margin: 0 0 4px !important;
  scrollbar-width: none;
}
.scool-uu-dai-trio--strip::-webkit-scrollbar {
  display: none;
}
.scool-uu-dai-trio--strip .scool-uu-dai-trio__card {
  flex: 0 0 auto;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: #fff4cc !important;
  border: 1px solid #fde68a !important;
  white-space: nowrap;
}
.scool-uu-dai-trio--strip .scool-uu-dai-trio__icon {
  font-size: 13px !important;
}
.scool-uu-dai-trio--strip .scool-uu-dai-trio__title {
  font-size: 12px !important;
  font-weight: 700 !important;
}
.scool-uu-dai-trio--strip .scool-uu-dai-trio__desc {
  display: none !important;
}
/* Luoi card flash: 2 cot mobile */
.scool-flash-sale__cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 768px) {
  .scool-flash-sale__cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
.scool-flash-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f1e9de;
  display: flex;
  flex-direction: column;
}
.scool-flash-card--desktop-only {
  display: flex !important;
}
.scool-flash-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
}
.scool-flash-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.scool-flash-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #d0011b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
}
/* Cum tem doc goc phai kieu Shopee */
.scool-flash-card__stamps {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}
.scool-flash-card__stamp {
  background: #ff5f00;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  padding: 3px 6px;
  border-radius: 3px 0 0 3px;
  min-width: 58px;
  letter-spacing: 0.02em;
}
.scool-flash-card__stamp strong {
  font-size: 10px;
  font-weight: 800;
}
.scool-flash-card__stamp:nth-child(2) {
  background: #d0011b;
}
.scool-flash-card__stamp:nth-child(3) {
  background: #b34400;
}
.scool-flash-card__stock-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(45, 49, 51, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
/* Dai campaign duoi anh (nhu dai 9.9) */
.scool-flash-card__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(90deg, #ff5f00, #ffb100);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.scool-flash-card__body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.scool-flash-card__title {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.6em;
}
.scool-flash-card__title a {
  color: #191c1e;
}
.scool-flash-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  font-family: "Montserrat", sans-serif;
}
.scool-flash-card__price ins {
  order: 1;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  color: #d0011b;
}
.scool-flash-card__price del {
  order: 2;
  font-size: 11px;
  color: #565e74;
}
.scool-flash-card__percent {
  order: 3;
  background: #ffdad6;
  color: #d0011b;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}
.scool-flash-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #565e74;
}
.scool-flash-card__rating {
  color: #b47800;
  font-weight: 700;
}
.scool-flash-card__meta-sep {
  width: 1px;
  height: 10px;
  background: #d5d9e0;
}
.scool-flash-card__stock {
  display: none; /* thay bang stock-tag tren anh */
}
.scool-flash-card__cta {
  margin-top: auto;
}
.scool-flash-card__cta .button {
  width: 100%;
  text-align: center;
  background: #ff5f00 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* hero badge dang-dien-ra: 1 dong gon, khong wrap 3 dong */
.scool-flash-sale__hero--compact .scool-flash-sale__hero-badge {
  font-size: 11px !important;
  line-height: 1.5;
  padding: 6px 12px !important;
  display: block !important;
}
.scool-flash-sale__hero--compact .scool-flash-sale__hero-badge-dot {
  display: none !important;
}


/* ==========================================================================
   Vong 07/09t — nen dau trang PLP, icon chip kieu dang, strip flash co
   nhom + "sẽ", can giua strip.
   ========================================================================= */
/* (t1) Dau PLP thu nho de khach thay san pham som (user): breadcrumb 11,
   H1 16, margins bop lai */
@media (max-width: 767px) {
  .scool-plp .scool-breadcrumb,
  .post-type-archive-product .scool-breadcrumb,
  .tax-product_cat .scool-breadcrumb {
    font-size: 11px !important;
    margin: 6px 0 4px !important;
  }
  .scool-plp h1.page-title,
  .woocommerce-products-header h1,
  h1.woocommerce-products-header__title {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
  }
  .scool-situation-chips {
    margin: 0 0 8px !important;
  }
  .scool-plp-mobile-triggers {
    margin: 0 0 10px !important;
  }
  .scool-plp-mobile-trigger {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  .scool-plp-flash-strip {
    margin: 6px 0 8px !important;
  }
}
/* (t2) Chip kieu dang co icon 12px truoc text */
.scool-situation-chips .scool-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.scool-situation-chips .scool-chip svg {
  flex-shrink: 0;
  opacity: 0.75;
}
/* (t4) Strip flash "lech len tren": can giua doc that + padding can */
.scool-plp-flash-strip a {
  align-items: center !important;
  padding: 10px 14px !important;
  line-height: 1.4 !important;
}

/* (u1) Strip flash uu tien SO GIO (hoc Shopee): ten nhom co gian + "..."
   o GIUA, cum gio + CTA khong bao gio cat */
.scool-plp-flash-strip a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.scool-plp-flash-strip__group {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scool-plp-flash-strip__time {
  flex: 0 0 auto;
  white-space: nowrap;
}
.scool-plp-flash-strip__bolt {
  flex: 0 0 auto;
}
.scool-plp-flash-strip__cta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
}

/* (u2) Strip 1 dong -> O MONG (user: khong can khung to): padding doc 7,
   chu 12, bot khoang quanh */
.scool-plp-flash-strip a {
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.scool-plp-flash-strip {
  margin: 4px 0 6px !important;
}
.scool-plp-flash-strip__bolt {
  font-size: 12px;
}

/* (u3) CTA strip = chevron trong VONG TRON CAM 18px (Codex+Gemini hoi tu:
   mui ten tran de doc nham "con tiep"; vong tron = affordance nut ro,
   khong ton them chieu ngang) */
.scool-plp-flash-strip__cta {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ff5f00;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}


/* ==========================================================================
   Vong 07/09v — NEN CUM DAU PLP (thao luan Codex+Gemini hoi tu):
   hang 1 breadcrumb + H1 that 12px gop; hang 2 chips 32; hang 3
   sort-tab kieu Shopee 38; strip flash giu. Card dau muc tieu ~y260.
   ========================================================================= */
@media (max-width: 767px) {
  /* (v1) Breadcrumb + H1 chung 1 hang: 2 block -> inline, H1 that
     12/600 (KHONG visually-hidden — Codex: giu ngu nghia nguoi dung);
     muc cuoi breadcrumb trung ten H1 -> an */
  .post-type-archive-product .scool-breadcrumb,
  .tax-product_cat .scool-breadcrumb {
    display: inline !important;
    margin: 0 !important;
  }
  .post-type-archive-product .scool-breadcrumb .is-current,
  .tax-product_cat .scool-breadcrumb .is-current {
    display: none !important;
  }
  .post-type-archive-product h1.page-title,
  .tax-product_cat h1.page-title,
  .woocommerce-products-header h1 {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--on-surface) !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .woocommerce-products-header {
    padding: 8px 0 6px !important;
    margin: 0 !important;
  }
  /* (v2) Chips 40 -> 32px */
  .scool-situation-chips {
    margin: 0 0 6px !important;
  }
  .scool-situation-chips .scool-chip {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}
/* (v3) Sort-tab kieu Shopee: 1 hang 38px, tab active cam gach chan */
.scool-plp-sorttab {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 6px;
  border-bottom: 1px solid #eceef0;
}
.scool-plp-sorttab__tab {
  flex: 1 1 auto;
  text-align: center;
  padding: 9px 4px;
  font-size: 13px;
  font-weight: 500;
  color: #565e74;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.scool-plp-sorttab__tab.is-active {
  color: #ff5f00;
  font-weight: 700;
  border-bottom-color: #ff5f00;
}
.scool-plp-sorttab__filter {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  background: none;
  border: none;
  border-left: 1px solid #eceef0;
  color: #565e74;
  cursor: pointer;
}
.scool-plp-sorttab__filter .scool-plp-mobile-trigger__count {
  position: absolute;
  top: 2px;
  right: 2px;
}

/* (v4) Don not margins vung dau PLP (probe 07/09v): chips-row pt/pb 16
   du 32px; breadcrumb Woo mb13; header pad; notices rong van margin */
@media (max-width: 767px) {
  .post-type-archive-product .woocommerce-breadcrumb,
  .tax-product_cat .woocommerce-breadcrumb {
    font-size: 11px !important;
    margin: 6px 0 2px !important;
  }
  .post-type-archive-product .woocommerce-products-header,
  .tax-product_cat .woocommerce-products-header {
    padding: 0 !important;
  }
  .scool-plp-chips-row {
    padding: 0 !important;
    margin: 4px 0 !important;
  }
  .woocommerce-notices-wrapper:empty {
    margin: 0 !important;
    padding: 0 !important;
  }
  .post-type-archive-product .scool-plp-flash-strip,
  .tax-product_cat .scool-plp-flash-strip {
    margin: 0 0 8px !important;
  }
}

/* (v5) Strip: con cao nhat 18px ma khung 52 (line-box tang hinh) — ep
   height 34 cho dut diem */
.scool-plp-flash-strip a {
  height: 34px !important;
  padding: 0 12px !important;
}

/* (v6) Gop breadcrumb Woo + H1 chung 1 hang (ca 2 inline, header inline) */
@media (max-width: 767px) {
  .post-type-archive-product .woocommerce-breadcrumb,
  .tax-product_cat .woocommerce-breadcrumb {
    display: inline !important;
  }
  .post-type-archive-product .woocommerce-products-header,
  .tax-product_cat .woocommerce-products-header {
    display: inline !important;
  }
  /* chips la block dau tien sau cum inline -> tu xuong dong */
}

/* ==== 08/09 go-live: menu "Tất cả Dép X" (phương án B) + nhãn sao Shopee ==== */
.scool-drawer__style-item--all {
  color: #ff5f00;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.scool-drawer__style-all-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #b45309;
}
.scool-mega__item--all {
  color: #ff5f00;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.scool-mega__all-count {
  font-size: 11px;
  font-weight: 600;
  background: #fff1e8;
  color: #c2410c;
  border-radius: 999px;
  padding: 1px 8px;
}

/* ==== 08/09b: cum noi voucher/messenger/hotline + Shopee proof + fix nen sticky ==== */
/* Fix "chu ma": wrapper sticky header khong co nen -> khoang giua topbar va nav trong suot */
header.wp-block-template-part {
  background: #f7f9fb;
}
.scool-header__utility-hotline a {
  color: inherit;
  text-decoration: none;
}
.scool-footer__nap-strong a {
  color: inherit;
  text-decoration: none;
}
.scool-hero__proof {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ffd9a8;
  letter-spacing: 0.2px;
}
/* Shopee proof (thay testimonial demo) */
.scool-testimonials__source {
  margin: 4px 0 18px;
  font-size: 13px;
  color: #64748b;
}
.scool-shopee-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 781px) {
  .scool-shopee-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.scool-shopee-proof__card {
  background: #fff;
  border: 1px solid #ffe1c7;
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  text-decoration: none;
}
.scool-shopee-proof__num {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #ff5f00;
}
.scool-shopee-proof__num span {
  font-size: 15px;
  font-weight: 700;
  color: #f59e0b;
}
.scool-shopee-proof__label {
  font-size: 12.5px;
  color: #475569;
}
.scool-shopee-proof__cta {
  margin-top: 14px;
  text-align: center;
}
.scool-shopee-proof__cta a {
  font-weight: 700;
  color: #ff5f00;
}
/* Cum noi goc duoi-phai */
.scool-float {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 781px) {
  .scool-float {
    bottom: 96px; /* tren bottom-nav 64px + safe area */
  }
}
.scool-float__voucher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5f00, #e11d48);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35);
  animation: scool-float-pulse 2.2s infinite;
}
@keyframes scool-float-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35); }
  50% { transform: scale(1.05); box-shadow: 0 8px 24px rgba(225, 29, 72, 0.5); }
}
.scool-float__btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}
.scool-float__btn--mess { background: #0084ff; }
.scool-float__btn--tel { background: #16a34a; }
/* Popup voucher */
.scool-float-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
}
.scool-float-pop[hidden] { display: none !important; }
.scool-float-pop__panel {
  position: relative;
  width: min(360px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}
.scool-float-pop__close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}
.scool-float-pop__title {
  margin: 0 0 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.scool-float-pop__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px dashed #fdba74;
  border-radius: 12px;
  background: #fff8f2;
  margin-bottom: 8px;
}
.scool-float-pop__code {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  color: #c2410c;
}
.scool-float-pop__desc {
  font-size: 12.5px;
  color: #475569;
}
.scool-float-pop__cta {
  display: block;
  margin-top: 12px;
  text-align: center;
  background: #ff5f00;
  color: #fff !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 11px 0;
  text-decoration: none;
}
/* Toast moi voucher */
.scool-float-toast {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 59;
  width: min(300px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #ffe1c7;
  border-radius: 14px;
  padding: 14px 36px 14px 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.scool-float-toast[hidden] { display: none !important; }
@media (max-width: 781px) {
  .scool-float-toast { bottom: 160px; }
}
.scool-float-toast__close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
}
.scool-float-toast__title {
  margin: 0 0 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.scool-float-toast__desc {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #475569;
}
.scool-float-toast__btn {
  border: 0;
  background: #fff1e8;
  color: #c2410c;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
/* 4 the dich vu PC cao deu nhau (finding Muse/Gemini): flex stretch + cung min-height */
@media (min-width: 1100px) {
  .scool-services {
    align-items: stretch !important;
  }
  .scool-services .scool-service-card {
    min-height: 260px;
    height: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==== 08/09c: bai SEO PLP + FAQ PDP ==== */
.scool-plp-seo {
  max-width: 860px;
  margin: 28px auto 8px;
  padding: 20px 16px 4px;
  border-top: 1px solid #e2e8f0;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}
.scool-plp-seo h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #0f172a;
}
.scool-plp-seo h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: #0f172a;
}
.scool-plp-seo a {
  color: #c2410c;
  font-weight: 600;
}
.scool-pdp-seo {
  max-width: 860px;
  margin: 32px auto 12px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
}
.scool-pdp-seo h2 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #0f172a;
}
.scool-pdp-seo__faq {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scool-pdp-seo__faq details {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
}
.scool-pdp-seo__faq summary {
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}
.scool-pdp-seo__faq p {
  margin: 8px 0 0;
}

/* ==== 08/09d: intro 1 cau duoi H1 + clamp mobile bai SEO (chot Gemini+Muse) ==== */
.scool-plp-intro {
  margin: 2px 0 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #64748b;
  max-width: 720px;
}
.scool-plp-seo__more {
  display: none;
  margin: 10px 0 0;
  border: 0;
  background: #f1f5f9;
  color: #c2410c;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}
@media (max-width: 781px) {
  .scool-plp-seo:not(.is-open) {
    max-height: 10.5em;
    overflow: hidden;
    position: relative;
  }
  .scool-plp-seo:not(.is-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.2em;
    background: linear-gradient(to bottom, rgba(247, 249, 251, 0), #f7f9fb);
  }
  .scool-plp-seo__more {
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  .scool-plp-seo:not(.is-open) .scool-plp-seo__more {
    position: absolute;
    bottom: 6px;
    left: 16px;
    z-index: 2;
  }
}