/* Production-only glue for the Mẫu 04 visual system. */
.site-nav .nav-inner { gap: 28px; }
.site-nav .nav-inner > a.is-current,
.site-nav .nav-menu-group.is-current > .nav-menu-trigger { color: var(--blue); font-weight: 600; }
.site-nav .nav-menu-group { position: relative; height: 53px; display: flex; align-items: center; }
.site-nav .nav-menu-trigger { display: inline-flex; align-items: center; gap: 7px; }
.site-nav .nav-menu-trigger .nav-chevron { width: 16px; height: 16px; color: var(--muted); stroke-width: 1.8; margin-top: 2px; }
.site-nav .nav-submenu { display: none; position: absolute; z-index: 20; top: 48px; left: -15px; min-width: 210px; padding: 8px 15px; border: 1px solid var(--line); background: #fff; box-shadow: 0 8px 24px #1c355012; }
.site-nav .nav-menu-group:hover .nav-submenu,
.site-nav .nav-menu-group:focus-within .nav-submenu { display: block; }
.site-nav .nav-submenu a { display: block; padding: 9px 0; border-bottom: 1px solid #eff1f3; font-size: 13px; color: var(--muted); }
.site-nav .nav-submenu a:last-child { border-bottom: 0; }
.site-nav .nav-submenu a:hover { color: var(--blue); }
.site-nav .nav-submenu a.is-current { color: var(--blue); font-weight: 600; }
.hero { min-height: 416px; }
.hero-slider { position: absolute; inset: 0; overflow: hidden; background: #f6f3ed; }
.hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transform: scale(1.018); transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 1.1s; pointer-events: none; }
.hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; pointer-events: auto; }
.hero-slide.is-leaving { z-index: 0; opacity: 0; visibility: visible; transform: scale(1.01); transition-delay: 0s; }
.hero-picture { position: absolute; inset: 0; display: block; }
.hero-slide .hero-photo { position: absolute; inset: 0; transform: scale(1.06); transition: transform 8s cubic-bezier(.22, .61, .36, 1); }
.hero-slide.is-active .hero-photo { transform: scale(1); }
.hero-slide .shell { height: 100%; }
.hero-slide .hero-copy { position: relative; z-index: 1; pointer-events: auto; }
.hero-slide .hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
.hero-slide.is-active .hero-copy > * { opacity: 1; transform: translateY(0); }
.hero-slide.is-active .hero-copy > :nth-child(1) { transition-delay: .08s; }
.hero-slide.is-active .hero-copy > :nth-child(2) { transition-delay: .15s; }
.hero-slide.is-active .hero-copy > :nth-child(3) { transition-delay: .22s; }
.hero-slide.is-active .hero-copy > :nth-child(4) { transition-delay: .29s; }
.hero-fallback { min-height: 416px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.hero-fallback img { width: 100%; height: 100%; object-fit: cover; }
.hero .shell { z-index: 1; pointer-events: none; }
.hero-caption { z-index: 2; }

@media (min-width: 1700px) {
    .hero { min-height: 475px; }
}

@media (max-width: 1199px) {
    .hero { min-height: 370px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide .hero-photo,
    .hero-slide .hero-copy > * { transition: none; transform: none; }
}

.product-category { color: var(--blue); font-size: 12px; margin: 0 0 3px; }
.product-status { position: absolute; top: 10px; right: 10px; padding: 4px 7px; border-radius: 3px; background: #fff; color: #b44545; font-size: 11px; box-shadow: 0 2px 8px #1c355014; }
.choose.is-disabled { color: #9aa3ad; border-color: #e1e4e8; background: #f7f8f9; cursor: default; }
.card-detail-link { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.card-detail-link:hover { color: var(--blue); }
.card-detail-link .icon { width: 15px; height: 15px; }
.pd-meta .is-stock { color: #238456; }
.pd-meta .is-out { color: #b44545; }
.pd-short-description { color: var(--muted); font-size: .9375rem; line-height: 1.8; margin: 0 0 20px; }
.pd-price-rules { margin: -6px 0 20px; padding: 12px 14px; border: 1px solid var(--line); background: #fbfcfd; }
.pd-price-rules h2 { margin: 0 0 7px; font-size: .875rem; font-weight: 500; }
.pd-price-rules ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .8125rem; line-height: 1.75; }
.pd-price-rules a { color: var(--blue); }
.pd-price-rules strong { color: var(--blue); font-weight: 600; }
.cart-message { color: #8b6b38 !important; font-size: 11px !important; line-height: 1.45 !important; margin-top: 7px !important; }
.cart-row .quantity-control { align-items: center; }
.cart-row .quantity-control a,
.cart-row .quantity-control span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 32px; }
.cart-row .quantity-control a { color: var(--ink); background: #f7f9fb; font-size: 18px; }
.cart-row .quantity-control a:hover { color: var(--blue); background: var(--light); }

.home-product-grid { margin-top: 24px; }
.home-category-strip { padding-top: 23px; }
.home-category-strip .category { width: 100%; }
.home-category-strip .category-photo img { object-fit: contain; }
.home-color-filter button.is-active { border-color: #dceafd; background: var(--light); color: var(--blue); font-weight: 500; }
.home-color-filter button { display: inline-flex; align-items: center; }
.home-catalog-end { text-align: center; }
.home-catalog-end[hidden] { display: none; }
.home-extra-card { min-height: 112px; }
.home-extra-card > div { min-width: 0; overflow-wrap: anywhere; }
.home-extra-card .text-link { display: flex; width: fit-content; max-width: 100%; font-size: 14px; margin-top: 5px; padding: 0; text-align: left; }
.home-guide-note { color: var(--muted); font-size: 14px; line-height: 1.8; }
.home-guide-note a { color: var(--blue); text-decoration: underline; }

.commerce-main { background: #fff; min-height: 470px; }
.commerce-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; padding: 20px 0 23px; color: var(--muted); font-size: 13px; }
.commerce-breadcrumb a:hover { color: var(--blue); }
.commerce-section { padding: 10px 0 50px; }
.commerce-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.commerce-heading h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.8px; }
.commerce-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.commerce-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.commerce-toolbar form { display: flex; gap: 9px; align-items: center; }
.commerce-toolbar label { color: var(--muted); font-size: 13px; }
.commerce-toolbar select { border: 1px solid #c9d3df; background: #fff; padding: 9px 12px; font-size: 13px; }
.filter-tabs { display: flex; gap: 7px; overflow-x: auto; }
.filter-tabs button { min-height: 39px; padding: 7px 13px; border: 1px solid transparent; background: #fff; color: var(--muted); font-size: 13px; white-space: nowrap; }
.filter-tabs button.is-active { border-color: #dceafd; background: var(--light); color: var(--blue); font-weight: 500; }
.price-filter { display: flex; flex-wrap: wrap; gap: 9px 15px; padding: 13px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.price-filter label { color: var(--muted); font-size: 12px; }
.price-filter input { margin-right: 5px; accent-color: var(--blue); }
.commerce-empty { padding: 55px 20px; border: 1px solid var(--line); background: #f8fafc; text-align: center; }
.commerce-empty h2 { font-size: 22px; font-weight: 500; }
.commerce-empty p { color: var(--muted); }
.commerce-empty a { color: var(--blue); }

.content-html { color: var(--muted); font-size: .9375rem; line-height: 1.85; }
.content-html img { height: auto; margin: 15px auto; }
.content-html h1, .content-html h2, .content-html h3 { color: var(--ink); font-weight: 500; line-height: 1.45; }
.content-html h2 { margin-top: 28px; font-size: 1.45rem; }
.content-html h3 { margin-top: 21px; font-size: 1.15rem; }
.content-html table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 18px 0; }
.content-html td, .content-html th { border: 1px solid var(--line); padding: 8px 10px; }
.content-html a { color: var(--blue); text-decoration: underline; }
.cms-page-card { margin-bottom: 48px; padding: 33px 40px 45px; border: 1px solid var(--line); background: #fff; }
.cms-page-card h1 { margin: 0 0 8px; color: var(--blue); font-size: 2rem; font-weight: 500; }
.cms-page-card .cms-lead { max-width: 740px; margin: 0 0 24px; color: var(--muted); line-height: 1.8; }
.cms-page-card .cms-lead p { margin: 0; }
.cms-page-card .content-html { padding-top: 24px; border-top: 1px solid var(--line); }

.blog-main { background: #fff; min-height: 470px; }
.blog-section { padding: 10px 0 50px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.blog-card { min-width: 0; border: 1px solid var(--line); background: #fff; }
.blog-card-image { display: block; aspect-ratio: 1.45; background: #f5f5f3; overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-content { padding: 16px 17px 19px; }
.blog-card h2 { margin: 0 0 8px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.blog-card .blog-date { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.blog-card .blog-description { color: var(--muted); font-size: 13px; line-height: 1.7; min-height: 44px; }
.blog-card .text-link { margin-top: 9px; font-size: 13px; }
.blog-article { max-width: 900px; margin: 0 auto; padding: 35px 40px 48px; border: 1px solid var(--line); }
.blog-article h1 { margin-bottom: 8px; font-size: 31px; font-weight: 500; }
.blog-article-meta { color: var(--muted); font-size: 12px; margin-bottom: 24px; }

.cart-page .commerce-section { padding-bottom: 55px; }
.cart-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.cart-table { width: 100%; min-width: 700px; border-collapse: collapse; }
.cart-table th, .cart-table td { padding: 16px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
.cart-table th { background: #f8fafc; color: var(--muted); font-weight: 500; }
.cart-table tr:last-child td { border-bottom: 0; }
.cart-product-cell { display: flex; align-items: center; gap: 13px; min-width: 270px; }
.cart-product-cell img { width: 72px; height: 64px; object-fit: contain; background: #f5f5f3; }
.cart-product-cell a:hover { color: var(--blue); }
.cart-product-cell p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.cart-quantity { display: inline-flex; align-items: center; border: 1px solid #c9d3df; }
.cart-quantity a, .cart-quantity span { width: 31px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.cart-quantity a { background: #f7f9fb; font-size: 18px; }
.cart-quantity a:hover { color: var(--blue); }
.cart-summary { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 24px; }
.cart-summary strong { color: var(--blue); font-size: 22px; }
.cart-empty-page { padding: 65px 20px; border: 1px solid var(--line); text-align: center; }
.cart-empty-page .icon { width: 45px; height: 45px; color: #9bb4cf; margin-bottom: 17px; }
.cart-empty-page h2 { font-size: 22px; font-weight: 500; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 35px; align-items: start; }
.checkout-card { padding: 27px; border: 1px solid var(--line); background: #fff; }
.checkout-card h2 { margin: 0 0 8px; font-size: 21px; font-weight: 500; }
.checkout-card > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.checkout-field { display: block; margin-bottom: 15px; color: var(--ink); font-size: 13px; font-weight: 500; }
.checkout-field input, .checkout-field textarea { display: block; width: 100%; margin-top: 7px; border: 1px solid #c9d3df; border-radius: 4px; padding: 11px 12px; font-size: 14px; }
.checkout-field textarea { min-height: 112px; resize: vertical; }
.payment-note { padding: 13px 14px; background: #f5f9fe; border-left: 2px solid #91b5e3; color: #59708a; font-size: 13px; line-height: 1.7; }
.checkout-items { background: #f8fafc; }
.checkout-item { display: grid; grid-template-columns: 65px 1fr auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.checkout-item:first-child { padding-top: 0; }
.checkout-item:last-child { border-bottom: 0; }
.checkout-item img { width: 65px; height: 58px; object-fit: contain; background: #fff; }
.checkout-item h3 { margin: 0 0 3px; font-size: 13px; font-weight: 500; }
.checkout-item p { margin: 0; color: var(--muted); font-size: 11px; }
.checkout-item strong { color: var(--blue); font-size: 13px; white-space: nowrap; }
.checkout-total { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; margin-top: 15px; border-top: 1px solid var(--line); }
.checkout-total strong { color: var(--blue); font-size: 21px; }
.success-card { max-width: 900px; margin: 0 auto; padding: 38px 40px 46px; border: 1px solid var(--line); }
.success-card h1 { color: #238456; font-size: 26px; font-weight: 500; }
.success-card > p { color: var(--muted); line-height: 1.8; }
.success-customer { padding: 16px; background: #f8fafc; color: var(--muted); font-size: 13px; line-height: 1.8; }

.site-v4-contact-band { margin-top: 0; }
.use-tabs a { border: 1px solid transparent; background: #fff; padding: 7px 13px; font-size: 14px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.use-tabs a.is-active { background: var(--light); border-color: #dceafd; color: var(--blue); font-weight: 500; }
.use-tabs a:hover { color: var(--blue); }
.site-pagination { margin-top: 30px; }
.site-pagination ul { display: flex; justify-content: center; gap: 7px; list-style: none; margin: 0; padding: 0; }
.site-pagination li a, .site-pagination li span { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; color: var(--muted); }
.site-pagination li.active span, .site-pagination li a:hover { border-color: var(--blue); color: var(--blue); }
.category-search-box input { flex: 1; min-width: 0; border: 1px solid #c9d3df; padding: 10px 12px; background: #fff; }
.category-search-box button { flex-shrink: 0; }
.quote-details { margin: 20px 0 0; font-size: 13px; }
.quote-details div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 9px 0; }
.quote-details dt { color: var(--muted); }
.quote-details dd { margin: 0; text-align: right; }
.policy-copy > h1 { margin: 0 0 12px; color: var(--ink); font-size: 2rem; font-weight: 500; letter-spacing: -.7px; }

@media (max-width: 899px) {
    .site-nav .nav-inner { gap: 22px; }
    .site-nav .nav-menu-group { height: 50px; }
    .site-nav .nav-submenu { top: 45px; }
    .hero { min-height: 345px; }
    .hero-fallback { min-height: 345px; }
    .commerce-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .commerce-toolbar { align-items: flex-start; flex-direction: column; }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .checkout-layout { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
    .site-nav .nav-inner { gap: 19px; }
    .site-nav .nav-menu-group { height: 48px; }
    .site-nav .nav-submenu { position: fixed; left: 15px; right: 15px; top: 135px; min-width: 0; }
    /* Match the mobile hero in design-preview/index.html. */
    .hero,
    .hero-fallback { min-height: 500px; }
    .hero .shell { min-height: 500px; }
    .hero-slide .hero-photo { height: 215px; top: auto; bottom: 0; object-position: 100% center; transform: none; }
    .hero-slide.is-active .hero-photo { transform: none; }
    .hero p { font-size: 15px; max-width: 310px; }
    .hero .eyebrow { font-size: 12px; letter-spacing: .5px; }
    .hero-caption { right: 12px; bottom: 7px; }
    .commerce-breadcrumb { padding: 15px 0 18px; font-size: 11px; }
    .commerce-section { padding-bottom: 32px; }
    .commerce-heading h1 { font-size: 25px; }
    .price-filter { gap: 8px 12px; }
    .blog-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
    .blog-card-content { padding: 12px; }
    .use-tabs a { padding: 7px 10px; font-size: 12px; min-height: 36px; }
    .blog-card h2 { font-size: 14px; }
    .blog-card .blog-description { font-size: 11px; }
    .blog-article, .success-card, .cms-page-card { padding: 24px 18px 29px; }
    .blog-article h1 { font-size: 25px; }
    .cart-summary { align-items: flex-end; flex-direction: column; gap: 12px; }
    .checkout-card { padding: 20px; }
    .success-card h1 { font-size: 22px; }
}