/*
 * Section appearance tokens of this storefront.
 *
 * App\Support\SectionRegistry maps a stored token (background: "soft") to one of
 * these classes; the database only ever holds the token. Repainting a token is a
 * change here and nowhere else. Every class the registry can emit must exist in
 * this file or storefront.css — SectionRegistryDriftTest checks it.
 *
 * The wrapper (.client-section) is emitted by x-client::section-list around each
 * section partial. The partials carry inline paddings and colours from the
 * approved design, so a chosen token overrides them with !important; a section
 * nobody touched carries none of these classes and renders exactly as designed.
 */

.client-section { --pd-accent: #239FD9; }

/* ---- Background ---------------------------------------------------------- */
.client-section--bg-light { background: #ffffff; }
.client-section--bg-muted { background: #f5f7fa; }
.client-section--bg-soft { background: #eef7fc; }
.client-section--bg-primary { background: var(--client-section-accent, #239FD9); }
.client-section--bg-dark { background: #0b2233; }
.client-section--bg-light > section,
.client-section--bg-muted > section,
.client-section--bg-soft > section,
.client-section--bg-primary > section,
.client-section--bg-dark > section { background: transparent !important; }
.client-section--bg-primary .home-block-title,
.client-section--bg-primary .home-block-subtitle,
.client-section--bg-primary .pd-testimonials__title,
.client-section--bg-primary .pd-testimonials__eyebrow,
.client-section--bg-primary .pd-testimonials__subtitle,
.client-section--bg-dark .home-block-title,
.client-section--bg-dark .home-block-subtitle,
.client-section--bg-dark .pd-testimonials__title,
.client-section--bg-dark .pd-testimonials__eyebrow,
.client-section--bg-dark .pd-testimonials__subtitle,
.client-section--bg-dark .home-all-button a,
.client-section--bg-primary .home-all-button a { color: #ffffff !important; }
.client-section--bg-dark .home-block-head,
.client-section--bg-primary .home-block-head { border-bottom-color: rgba(255, 255, 255, .2) !important; }
.client-section--bg-dark .pd-testimonials__ambient,
.client-section--bg-primary .pd-testimonials__ambient { display: none; }

/* ---- Heading alignment --------------------------------------------------- */
.client-section--align-left .home-block-head,
.client-section--align-left .pd-testimonials__header { text-align: left !important; justify-content: flex-start !important; margin-left: 0; }
.client-section--align-center .home-block-head,
.client-section--align-center .pd-testimonials__header { text-align: center !important; justify-content: center !important; }
.client-section--align-right .home-block-head,
.client-section--align-right .pd-testimonials__header { text-align: right !important; justify-content: flex-end !important; margin-right: 0; }

/* ---- Vertical spacing ---------------------------------------------------- */
.client-section--pad-none > section { padding-top: 0 !important; padding-bottom: 0 !important; }
.client-section--pad-sm > section { padding-top: 12px !important; padding-bottom: 12px !important; }
.client-section--pad-md > section { padding-top: 32px !important; padding-bottom: 32px !important; }
.client-section--pad-lg > section { padding-top: 64px !important; padding-bottom: 64px !important; }

/* ---- Accent colour picked by the editor (inline custom property) --------- */
.client-section--accent { --pd-accent: var(--client-section-accent, #239FD9); }
.client-section--accent .home-promo-button,
.client-section--accent .button.primary { background-color: var(--pd-accent) !important; border-color: var(--pd-accent) !important; }
.client-section--accent .home-all-button a,
.client-section--accent .pd-testimonials__eyebrow { color: var(--pd-accent) !important; }
.client-section--accent .pd-testimonials__dot.is-active { background: var(--pd-accent) !important; }

/* ---- Parts an editor may hide -------------------------------------------- */
.client-section--no-all .home-all-button { display: none !important; }
.client-section--no-subtitle .home-block-subtitle { display: none !important; }
.client-section--promo-no-button .home-promo-button { display: none !important; }
.client-section--no-dots .pd-testimonials__dots { display: none !important; }

/* ---- Product cards in a product block -------------------------------------- */
.client-section--card-no-rating .product-card-rating { display: none !important; }
.client-section--card-no-price .product-card-pricing { display: none !important; }
.client-section--card-no-badge .product-card-badge-sale { display: none !important; }
.client-section--card-no-buttons .product-card-footer { display: none !important; }
.client-section--card-buy-only .btn-cart-action { display: none !important; }
.client-section--card-buy-only .btn-buynow-action { flex: 1 1 100% !important; width: 100% !important; }
@media (max-width: 549px) {
    .client-section--mobile-cols-1 .products > .col { flex-basis: 100% !important; max-width: 100% !important; }
}
/* "Xem tất cả" under the grid: authored hidden, shown only when an editor turns it on. */
.home-all-button-bottom { display: none; }
.client-section--show-all-bottom .home-all-button-bottom { display: block; }

/* ---- Footer --------------------------------------------------------------- */
/* Commitments: as many columns as items on desktop (the template's 4 when untouched). */
@media (min-width: 850px) {
    .pd-service-row[style*="--pd-svc-cols"] { grid-template-columns: repeat(var(--pd-svc-cols), minmax(0, 1fr)) !important; }
}
.client-section--quote-no-banner .pd-quote-banner { display: none !important; }
.client-section--quote-no-services .pd-service-row { display: none !important; }
/* Columns sharing the width equally (e.g. after hiding one). */
@media (min-width: 850px) {
    .client-section--footer-cols-equal #row-902781877 > .client-section { flex: 1 1 0 !important; max-width: none !important; }
}
.client-section--footer-no-social .footer-social-wrap { display: none !important; }
.client-section--footer-no-credit .footer-copyright-suffix { display: none !important; }
.client-section--footer-no-divider .footer-clean-divider { display: none !important; }
.client-section--float-no-fb .pd-fb-btn,
.client-section--float-no-zalo .pd-zalo-btn,
.client-section--float-no-phone1 .pd-phone-hcm,
.client-section--float-no-phone2 .pd-phone-hn { display: none !important; }
.client-section--float-left .pd-floating-contact { right: auto !important; left: 20px !important; align-items: flex-start !important; }
.client-section--float-small .pd-floating-contact { transform: scale(.82); transform-origin: bottom right; }
.client-section--float-left.client-section--float-small .pd-floating-contact { transform-origin: bottom left; }
/* Floating contact buttons: list items, colour picked per button. */
.pd-float-item { display: flex; justify-content: flex-end; }
.client-section--float-left .pd-float-item { justify-content: flex-start; }
.pd-float-btn:not([class*="pd-float-c-"]):not(.pd-fb-btn):not(.pd-zalo-btn):not(.pd-phone-btn) { background: #239FD9; }
.pd-float-c-blue { background: #239FD9 !important; }
.pd-float-c-facebook { background: #1877F2 !important; }
.pd-float-c-zalo { background: #0068FF !important; }
.pd-float-c-green { background: linear-gradient(135deg, #05c25a 0%, #009e43 100%) !important; }
.pd-float-c-teal { background: #0d9488 !important; }
.pd-float-c-red { background: #e11d48 !important; }
.pd-float-c-orange { background: #f97316 !important; }
.pd-float-c-dark { background: #0f172a !important; }
.pd-float-badge:empty { display: none !important; }
.pd-float-icon .pd-ico > i { font-size: 22px; color: #fff; }
.pd-float-icon .pd-ico-img { width: 28px; height: 28px; border-radius: 50%; }
.client-section--float-no-tips .pd-float-tooltip { display: none !important; }
@media (min-width: 850px) {
    .client-section--float-tips-always .pd-float-tooltip { opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) !important; }
}
.client-section--float-left .pd-float-tooltip { right: auto !important; left: calc(100% + 12px) !important; }

/* Footer social buttons: list items (no box of their own), colour picked per button. */
.pd-social-item { display: contents; }
.pd-social-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pd-social-btn { position: relative; }
.pd-social-btn:not([class*="pd-social-c-"]):not(.pd-s-fb):not(.pd-s-insta):not(.pd-s-tiktok):not(.pd-s-yt):not(.pd-s-zalo) { background: #239FD9; }
.pd-social-c-blue { background: #239FD9 !important; }
.pd-social-c-facebook { background: #1877F2 !important; }
.pd-social-c-zalo { background: #0068FF !important; }
.pd-social-c-red { background: #FF0000 !important; }
.pd-social-c-green { background: #05c25a !important; }
.pd-social-c-orange { background: #f97316 !important; }
.pd-social-c-dark { background: #010101 !important; }
.pd-social-btn .pd-ico > i { font-size: 15px; color: #fff; }
.pd-social-btn .pd-ico-img { width: 20px; height: 20px; border-radius: 50%; }
.client-section--footer-social-square .pd-social-btn { border-radius: 8px !important; }
.client-section--footer-social-large .pd-social-btn { width: 40px !important; height: 40px !important; }

/* Footer icons picked in the editor sit where the template's drawing was. */
.pd-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pd-service-icon .pd-ico > i { font-size: 34px; color: #239FD9; }
.contact-item-icon .pd-ico > i { font-size: 15px; }
.pd-ico-img { display: block; object-fit: contain; }
.pd-service-icon .pd-ico-img { width: 40px; height: 40px; }
.contact-item-icon .pd-ico-img { width: 16px; height: 16px; }

/* ---- About page ------------------------------------------------------------ */
.pd-about-category-cell { display: flex; min-width: 0; }
.pd-about-category-cell > .pd-about-category { flex: 1 1 auto; min-width: 0; }
/* Mosaics hold exactly 4 tiles; any other count flows into an even grid. */
.pd-about-category-grid.pd-about-grid--flow { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: 240px; }
.pd-about-facilities__grid.pd-about-grid--flow { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: 250px; }
/* Rows of N items: as many columns as items on desktop (the design's count when untouched). */
@media (min-width: 1001px) {
    .pd-about-benefit-grid[style*="--pd-cols"],
    .pd-about-traits[style*="--pd-cols"],
    .pd-about-values__grid[style*="--pd-cols"],
    .pd-about-process__grid[style*="--pd-cols"] { grid-template-columns: repeat(var(--pd-cols), minmax(0, 1fr)) !important; }
}
.pd-about-icon .pd-ico > i, .pd-about-trait__icon .pd-ico > i, .pd-about-value__mark .pd-ico > i, .pd-about-mission-card__icon .pd-ico > i { font-size: 22px; }
.pd-about-icon .pd-ico-img, .pd-about-trait__icon .pd-ico-img, .pd-about-value__mark .pd-ico-img, .pd-about-mission-card__icon .pd-ico-img { width: 28px; height: 28px; }
/* The seamless-marquee copy is only needed while the strip runs. */
html[data-client-editing] .pd-about-partners__track { animation: none !important; }
.client-section--about-partners-grid .pd-about-partners__track { animation: none !important; width: auto !important; justify-content: center; }
.client-section--about-partners-grid .pd-about-partners__clone { display: none !important; }
.client-section--about-partners-grid .pd-about-partners__logos { flex-wrap: wrap; justify-content: center; row-gap: 28px; }
.client-section--about-intro-image-left .pd-about-intro__visual { order: -1; }
.client-section--no-buttons .pd-about-actions { display: none !important; }
.client-section--no-numbers .pd-about-category__number,
.client-section--no-numbers .pd-about-step__number { display: none !important; }
.client-section--no-step-images .pd-about-step__image { display: none !important; }
.client-section--no-text-link .pd-about-text-link { display: none !important; }
.client-section--about-no-benefits .pd-about-hero__benefits { display: none !important; }
.client-section--about-no-traits .pd-about-traits { display: none !important; }
.client-section--about-no-badge .pd-about-intro__brand { display: none !important; }
.client-section--about-no-captions .pd-about-facility__caption { display: none !important; }

/* ---- Product listing pages (Sản phẩm + categories) ------------------------ */
.catalog-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.client-section--banner-compact .page-title-inner { min-height: 160px !important; }
.client-section--banner-tall .page-title-inner { min-height: 360px !important; }
.client-section--overlay-light .title-overlay { background-color: rgba(0, 0, 0, .12) !important; }
.client-section--overlay-dark .title-overlay { background-color: rgba(8, 25, 44, .62) !important; }
.client-section--no-breadcrumbs .catalog-breadcrumbs { display: none !important; }
.client-section--align-left .page-title-inner { text-align: left !important; justify-content: flex-start !important; }
@media (min-width: 850px) {
    .client-section--catalog-cols-2 .products.large-columns-3 > .col { flex-basis: 50% !important; max-width: 50% !important; }
    .client-section--catalog-cols-4 .products.large-columns-3 > .col { flex-basis: 25% !important; max-width: 25% !important; }
    .client-section--catalog-cols-5 .products.large-columns-3 > .col { flex-basis: 20% !important; max-width: 20% !important; }
    .client-section--sidebar-right .category-page-row { flex-direction: row-reverse; }
    .client-section--sidebar-hide .catalog-sidebar-col { display: none !important; }
    .client-section--sidebar-hide .catalog-content-col { flex-basis: 100% !important; max-width: 100% !important; }
}
.client-section--no-sidebar-categories .shop-cat-sidebar { display: none !important; }
.client-section--no-price-filter .shop-price-filter,
.client-section--no-price-filter .pd-mobile-filter-trigger { display: none !important; }
.client-section--no-count .shop-total-count { display: none !important; }
.client-section--no-sort .pd-sort-label,
.client-section--no-sort .shop-heading-actions form { display: none !important; }

/* ---- Device visibility (flatsome breakpoints: <550, 550–849, ≥850) -------- */
@media (max-width: 549px) {
    .client-section--hide-mobile,
    .client-section--desktop-only { display: none !important; }
}
@media (min-width: 550px) and (max-width: 849px) {
    .client-section--hide-tablet,
    .client-section--mobile-only { display: none !important; }
}
@media (min-width: 850px) {
    .client-section--hide-desktop,
    .client-section--mobile-only { display: none !important; }
}

/* ---- Section variants (.client-section--<section>-<variant>) -------------- */
@media (min-width: 850px) {
    .client-section--home-new-products-cols-3 .products.large-columns-4 > .col,
    .client-section--home-sale-products-cols-3 .products.large-columns-4 > .col { flex-basis: 33.3333% !important; max-width: 33.3333% !important; }
    .client-section--home-new-products-cols-5 .products.large-columns-4 > .col,
    .client-section--home-sale-products-cols-5 .products.large-columns-4 > .col { flex-basis: 20% !important; max-width: 20% !important; }
    .client-section--home-new-products-cols-6 .products.large-columns-4 > .col,
    .client-section--home-sale-products-cols-6 .products.large-columns-4 > .col { flex-basis: 16.6666% !important; max-width: 16.6666% !important; }
}
.client-section--home-promo-compact .home-sec5-smart-chair,
.client-section--home-promo-compact .home-sec5-scanner { height: 300px !important; }
.client-section--home-promo-compact .home-sec5-bottom-banner { height: 360px !important; }

/* ---- Editor only: a section an editor switched off (visitors get no element) */
.client-section--hidden { opacity: .42; outline: 1px dashed #97a4b8; outline-offset: 2px; }