/*
Theme Name: Paper World
Theme URI: https://paperworldvn.com/
Author: Thế Giới Giấy
Description: Theme viết tay cho web thương hiệu quốc tế song ngữ Paper World (Công ty CP Thế Giới Giấy). Phong cách học từ asiafoods.vn, màu nhận diện Paper World. Dữ liệu gom trong inc/data.php + inc/products.php, schema JSON-LD, form báo giá lưu đơn, không page builder, không jQuery.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: paperworld
*/

/* ==========================================================================
   1. Tokens — đổi giao diện chủ yếu ở đây (màu nhận diện Paper World)
   ========================================================================== */
:root {
	--c-navy: #1F4395;
	--c-navy-dark: #163376;
	--c-navy-deep: #0f2452;
	--c-cyan: #2DABE2;
	--c-cyan-dark: #1585bd;
	--c-yellow: #FEC24F;
	--c-bg: #ffffff;
	--c-bg-alt: #F3F8FD;
	--c-text: #1E2A3B;
	--c-muted: #5B6577;
	--c-border: #DCE6F2;
	--c-white: #ffffff;

	--grad-brand: linear-gradient(160deg, #2DABE2 0%, #2290d3 45%, #1F4395 100%);
	--grad-band: linear-gradient(120deg, #1F4395 0%, #1f6db8 55%, #2DABE2 100%);

	--f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	--fs-h2: clamp(1.75rem, 1.2rem + 2.1vw, 2.9rem);
	--fs-h1: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);

	--radius: 16px;
	--radius-lg: 24px;
	--radius-sm: 10px;
	--radius-pill: 999px;
	--shadow: 0 12px 32px rgba(15, 36, 82, 0.10);
	--shadow-sm: 0 4px 14px rgba(15, 36, 82, 0.08);

	--space-section: clamp(3.5rem, 2.4rem + 4.4vw, 6.5rem);
	--container: 1200px;
	--gutter: 16px;
	--header-h: 64px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.7; color: var(--c-text); background: var(--c-bg); overflow-x: hidden; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-cyan-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-navy); }
h1, h2, h3, h4 { font-family: var(--f-heading); line-height: 1.22; margin: 0 0 0.6em; color: var(--c-navy); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
input, select, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 8px 16px; background: #fff; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-navy-deep); color: rgba(255, 255, 255, 0.85); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--entry { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section__head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan-dark); }
.section__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--c-yellow); }
.section__title { margin-bottom: 0.45em; }
.section__lead { color: var(--c-muted); font-size: var(--fs-lg); margin: 0; }
.section--dark .section__eyebrow { color: var(--c-cyan); }
.section--dark .section__lead { color: rgba(255, 255, 255, 0.78); }
.section__cta { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.section__count { margin: 0 0 1.25rem; font-weight: 600; color: var(--c-muted); }

/* ==========================================================================
   3. Nút, chip, link
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border: 2px solid transparent; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 18px; height: 18px; }
.btn--primary { background: var(--c-navy); color: #fff; }
.btn--primary:hover { background: var(--c-navy-dark); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent { background: var(--c-cyan); color: #fff; }
.btn--accent:hover { background: var(--c-cyan-dark); color: #fff; }
.btn--white { background: #fff; color: var(--c-navy); }
.btn--white:hover { color: var(--c-navy); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.btn--outline-white { border-color: rgba(255, 255, 255, 0.8); color: #fff; background: transparent; }
.btn--outline-white:hover { background: #fff; color: var(--c-navy); }
.btn--ghost { border-color: var(--c-navy); color: var(--c-navy); background: transparent; }
.btn--ghost:hover { background: var(--c-navy); color: #fff; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-navy); text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.link-arrow:hover .icon, a:hover .link-arrow .icon { transform: translateX(4px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips--center { justify-content: center; }
.chip { display: inline-block; padding: 6px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: #fff; color: var(--c-navy); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: 0.2s; }
.chip:hover { border-color: var(--c-cyan); background: var(--c-cyan); color: #fff; }
.chip--lg { padding: 10px 20px; font-size: 0.95rem; }
.checklist { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--c-text); }
.checklist .icon { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--c-cyan); color: #fff; stroke-width: 2.4; }

/* ==========================================================================
   4. Header — thanh navy, logo trong tab trắng nhô xuống (phong cách mẫu)
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--c-navy); color: #fff; transition: box-shadow 0.2s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 36, 82, 0.25); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.site-logo { position: relative; z-index: 2; align-self: flex-start; display: block; padding: 8px 14px 10px; margin-bottom: -14px; background: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 8px 20px rgba(15, 36, 82, 0.18); }
.site-logo img { width: auto; height: 50px; }
.site-header__tools { display: flex; align-items: center; gap: 10px; }
.site-header .btn { white-space: nowrap; }
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); }
.lang-switch__item { min-width: 36px; padding: 4px 9px; border-radius: var(--radius-pill); color: #fff; font-size: 0.78rem; font-weight: 700; text-align: center; text-decoration: none; letter-spacing: 0.04em; }
.lang-switch__item:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }
.lang-switch__item.is-current { background: #fff; color: var(--c-navy); }
.header-cta { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { display: block; width: 24px; height: 2px; background: #fff; position: relative; transition: transform 0.2s; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }
.nav-open .nav-toggle__bar { background: transparent; }
.nav-open .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }
.primary-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 1; background: var(--c-navy-deep); padding: 32px var(--gutter) 40px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.25s, visibility 0.25s; }
.nav-open .primary-nav { transform: none; visibility: visible; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; padding: 13px 0; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.primary-nav .sub-menu a { padding-left: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.8); }
.primary-nav .current-menu-item > a, .primary-nav a:hover { color: var(--c-cyan); }
.primary-nav__cta { margin-top: 24px; width: 100%; }
.primary-nav .primary-nav__cta { color: #fff; border: 0; padding: 12px 24px; }

/* ==========================================================================
   5. Hero ảnh tràn màn hình + khối giới thiệu nền cyan
   ========================================================================== */
.hero-media { position: relative; height: clamp(320px, 62vh, 760px); min-height: 320px; background: var(--c-navy-deep); }
.hero-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 36, 82, 0.25) 0%, rgba(15, 36, 82, 0) 30%, rgba(15, 36, 82, 0) 60%, rgba(15, 36, 82, 0.55) 100%); pointer-events: none; }
.hero-media__bar { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hero-media__caption { margin: 0; max-width: 60%; color: #fff; font-size: 0.8rem; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.hero-media__video { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.95); color: var(--c-navy); font-weight: 700; font-size: 0.85rem; cursor: pointer; box-shadow: var(--shadow-sm); }
.hero-media__play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-cyan); color: #fff; }
.hero-media__play .icon { width: 16px; height: 16px; margin-left: 2px; }
.hero-media__down { position: absolute; left: 50%; bottom: 0; z-index: 2; display: grid; place-items: center; width: 68px; height: 68px; border: 5px solid #fff; border-radius: 50%; background: var(--c-cyan); color: #fff; transform: translate(-50%, 50%); box-shadow: var(--shadow); }
.hero-media__down:hover { color: #fff; background: var(--c-navy); }
.hero-media__down .icon { width: 26px; height: 26px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

.intro { position: relative; padding: clamp(4.5rem, 3.5rem + 4vw, 7rem) 0 clamp(5.5rem, 4rem + 5vw, 9rem); background: var(--grad-brand); color: #fff; overflow: hidden; }
.intro::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%); mask-image: linear-gradient(90deg, transparent 40%, #000 100%); pointer-events: none; }
.intro__inner { position: relative; display: grid; gap: 40px; align-items: center; }
.intro__brand { margin: 0 0 0.1em; font-size: clamp(2.6rem, 1.6rem + 5.2vw, 5.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.intro__eyebrow { display: inline-block; margin-bottom: 0.9rem; padding: 5px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.intro__title { margin-bottom: 0.7em; font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.15rem); font-weight: 700; line-height: 1.3; color: #fff; text-wrap: balance; }
.intro__lead { font-size: var(--fs-lg); font-weight: 600; color: #fff; }
.intro__desc { color: rgba(255, 255, 255, 0.88); margin-bottom: 1.75rem; }
.intro__visual { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }
.intro__ring { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95) 0 52%, rgba(255, 255, 255, 0.18) 52.5% 64%, rgba(255, 255, 255, 0.08) 64.5% 100%); }
.intro__float { position: absolute; width: 44%; height: auto; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px rgba(15, 36, 82, 0.25); animation: float 6s ease-in-out infinite; }
.intro__float--1 { top: 10%; left: 4%; width: 50%; }
.intro__float--2 { top: 4%; right: 2%; width: 36%; animation-delay: -1.5s; }
.intro__float--3 { bottom: 4%; left: 14%; width: 36%; animation-delay: -3s; }
.intro__float--4 { bottom: 10%; right: 6%; width: 40%; animation-delay: -4.5s; }
@keyframes float { 50% { transform: translateY(-12px); } }
.intro__curve { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); fill: var(--c-bg); }

/* ==========================================================================
   6. Số liệu
   ========================================================================== */
.stats { position: relative; z-index: 1; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.intro + .stats { margin-top: clamp(-4.5rem, -3rem - 2vw, -3rem); padding-top: 0; }
.page-hero + .section, .page-hero + .section--entry { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.stats__list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.stats__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 12px; text-align: center; border-bottom: 1px solid var(--c-border); }
.stats__item:nth-child(odd) { border-right: 1px solid var(--c-border); }
.stats__num { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); font-weight: 800; line-height: 1.05; color: var(--c-navy); letter-spacing: -0.02em; }
.stats__item:nth-child(2) .stats__num, .stats__item:nth-child(4) .stats__num { color: var(--c-cyan-dark); }
.stats__label { font-size: 0.9rem; color: var(--c-muted); font-weight: 600; max-width: 220px; }

/* ==========================================================================
   7. Sản phẩm: tab + lưới thẻ
   ========================================================================== */
.tabs__list { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1) 2rem; padding: 4px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { flex: none; scroll-snap-align: start; padding: 10px 20px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: #fff; color: var(--c-navy); font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap; transition: 0.2s; }
.tabs__tab:hover { border-color: var(--c-cyan); }
.tabs__tab[aria-selected="true"] { background: var(--c-navy); border-color: var(--c-navy); color: #fff; box-shadow: var(--shadow-sm); }
.tabs__panel[hidden] { display: none; }
.js .tabs__panel { animation: fade 0.35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.products__intro { max-width: 760px; margin: 0 auto 1.75rem; text-align: center; }
.products__group { margin-bottom: 0.35em; }
.products__intro p { color: var(--c-muted); margin: 0; }
.products__more { margin: 2rem 0 0; text-align: center; }
.products .tabs__panel + .tabs__panel { margin-top: 3rem; }
.js .products .tabs__panel + .tabs__panel { margin-top: 0; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.product-grid > li { display: flex; }
.product-card { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.product-card__media { position: relative; aspect-ratio: 1; background: #fff; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform 0.35s; }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__brand { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--c-yellow); color: var(--c-navy-deep); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 16px; }
.product-card__code { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--c-cyan-dark); text-transform: uppercase; }
.product-card__title { margin: 4px 0 10px; font-size: 0.98rem; line-height: 1.35; }
.product-card__title a { color: var(--c-navy); text-decoration: none; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card__specs { margin: auto 0 0; display: grid; gap: 4px; font-size: 0.8rem; }
.product-card__specs div { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--c-border); }
.product-card__specs dt { color: var(--c-muted); }
.product-card__specs dd { margin: 0; font-weight: 600; text-align: right; color: var(--c-text); }
.product-card--full .product-card__title { font-size: 1.05rem; }
.product-card--full .product-card__specs { margin-bottom: 16px; }
.product-card__quote { position: relative; z-index: 1; align-self: flex-start; }

.group-grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.group-card__link { display: grid; height: 100%; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; color: inherit; text-decoration: none; transition: 0.25s; }
.group-card__link:hover { color: inherit; box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.group-card__media { display: block; aspect-ratio: 4 / 3; background: var(--c-bg-alt); }
.group-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.group-card__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.group-card__count { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-cyan-dark); }
.group-card__title { margin: 0; font-size: 1.3rem; }
.group-card__text { color: var(--c-muted); font-size: 0.95rem; margin-bottom: 8px; }

/* ==========================================================================
   8. Nhãn hàng, nhà máy, giải pháp
   ========================================================================== */
.brands__list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.brand-card { display: flex; flex-direction: column; align-items: center; padding: 32px 26px 30px; text-align: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: 0.25s; }
.brand-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.brand-card__media { display: grid; place-items: center; width: 170px; height: 170px; margin-bottom: 18px; border: 8px solid #e3f2fb; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #cfe9f8; }
.brand-card__media img { width: 74%; height: 74%; object-fit: contain; }
.brand-card__tag { padding: 3px 12px; border-radius: var(--radius-pill); background: var(--c-yellow); color: var(--c-navy-deep); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.brand-card__name { margin: 10px 0 8px; font-size: 1.7rem; font-weight: 800; }
.brand-card p { color: var(--c-muted); }
.brand-card .link-arrow { margin-top: auto; }

.factory__inner { display: grid; gap: 48px; align-items: center; }
.factory__media { position: relative; padding: 0 8% 14% 0; }
.factory__main { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.factory__main img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.factory__sub { position: absolute; right: 0; bottom: 0; width: 52%; margin: 0; border: 6px solid #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.factory__sub img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.factory__badge { position: absolute; top: -18px; left: -10px; display: grid; place-items: center; align-content: center; width: 104px; height: 104px; border: 5px solid #fff; border-radius: 50%; background: var(--c-yellow); color: var(--c-navy-deep); font-size: 0.85rem; font-weight: 800; line-height: 1.1; text-align: center; box-shadow: var(--shadow); }
.factory__badge strong { display: block; font-size: 0.82rem; }
.play-btn { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 74px; height: 74px; border: 0; border-radius: 50%; background: #fff; color: var(--c-cyan); transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.35); transition: transform 0.2s; }
.play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.play-btn .icon { width: 28px; height: 28px; margin-left: 4px; }
.play-btn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.factory__lead { font-size: var(--fs-lg); color: var(--c-muted); }

.solutions__list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.solution-card { display: flex; flex-direction: column; padding: 28px 26px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: 0.25s; }
.solution-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.solution-card__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 18px; background: linear-gradient(135deg, #e6f5fd, #d3ecfa); color: var(--c-navy); }
.solution-card__icon .icon { width: 30px; height: 30px; }
.solution-card__title { margin-bottom: 0.4em; }
.solution-card p { color: var(--c-muted); }
.solution-card .chips { margin-top: auto; }
.solution-card--cta { justify-content: center; background: var(--grad-band); border: 0; color: #fff; }
.solution-card--cta .solution-card__title { color: #fff; font-size: 1.5rem; }
.solution-card--cta p { color: rgba(255, 255, 255, 0.85); }
.solution-card--cta .btn { align-self: flex-start; }

/* ==========================================================================
   9. Hợp tác (dải cyan mép cong), khách hàng, lý do
   ========================================================================== */
.partner { position: relative; padding: clamp(6rem, 4rem + 6vw, 9rem) 0; background: var(--grad-brand); color: #fff; overflow: hidden; }
.partner::before { content: ""; position: absolute; right: -10%; top: 10%; width: 60vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70%); mask-image: radial-gradient(circle, #000 55%, transparent 70%); pointer-events: none; }
.partner__curve { position: absolute; left: 0; width: 100%; height: clamp(36px, 5vw, 80px); fill: var(--c-bg); }
.partner__curve--top { top: -1px; }
.partner__curve--bottom { bottom: -1px; }
.partner__inner { position: relative; display: grid; gap: 40px; align-items: center; }
.partner .section__eyebrow { color: #fff; }
.partner .section__title { color: #fff; }
.partner__lead { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.9); margin-bottom: 1.75rem; }
.partner__globe { display: none !important; }
.partner__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.partner__step { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: #fff; border-radius: var(--radius); color: var(--c-text); box-shadow: 0 10px 24px rgba(15, 36, 82, 0.18); }
.partner__num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-yellow); color: var(--c-navy-deep); font-weight: 800; }
.partner__step h3 { margin: 0 0 2px; font-size: 1.05rem; }
.partner__step p { margin: 0; color: var(--c-muted); font-size: 0.92rem; line-height: 1.55; }

.customers__rows { display: grid; gap: 18px; }
.customers__row { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--c-border); }
.customers__row:last-child { border-bottom: 0; }
.customers__label { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-cyan-dark); }
.customers__names { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.customers__names li { padding: 10px 18px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-alt); color: #475569; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; transition: 0.2s; }
.customers__names li:hover { color: var(--c-navy); background: #fff; box-shadow: var(--shadow-sm); }

.reasons { position: relative; overflow: hidden; }
.reasons::before { content: ""; position: absolute; left: -15%; bottom: -40%; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(45, 171, 226, 0.25), transparent 65%); pointer-events: none; }
.reasons__list { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.reason { padding: 26px 24px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.04); transition: 0.25s; }
.reason:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(45, 171, 226, 0.6); }
.reason__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; border-radius: 50%; background: var(--c-cyan); color: #fff; }
.reason__icon .icon { width: 26px; height: 26px; }
.reason__title { margin-bottom: 0.35em; }
.reason p { margin: 0; color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   10. Báo giá + form
   ========================================================================== */
.quote__inner { display: grid; gap: 40px; align-items: start; }
.quote__contact { display: grid; gap: 12px; margin-top: 1.75rem; }
.quote__aside { margin: 0 0 4px; font-weight: 700; color: var(--c-navy); }
.contact-line { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-navy); font-weight: 700; text-decoration: none; transition: 0.2s; }
a.contact-line:hover { border-color: var(--c-cyan); color: var(--c-navy); box-shadow: var(--shadow-sm); }
.contact-line .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-cyan-dark); }
.contact-line span { display: flex; flex-direction: column; line-height: 1.3; word-break: break-word; }
.contact-line small { font-size: 0.75rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.form { position: relative; display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); background: #fff; color: var(--c-text); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form__row { display: grid; gap: 16px; }
.form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--c-navy); }
.form label span { color: #d14343; }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-alt); color: var(--c-text); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-cyan); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(45, 171, 226, 0.18); }
.form__hp { position: absolute; left: -9999px; }
.form__note { margin: 0; font-size: 0.8rem; color: var(--c-muted); text-align: center; }
.notice { padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; }
.notice--ok { background: #e7f7ee; color: #1d6b35; }
.notice--err { background: #fdecec; color: #9b1c1c; }

/* ==========================================================================
   11. Tin tức
   ========================================================================== */
.news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 2rem; }
.news__head .section__head { margin-bottom: 0; }
.post-grid { display: grid; gap: 24px; }
.post-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: 0.25s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-bg-alt); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.post-card__date { font-size: 0.8rem; font-weight: 700; color: var(--c-cyan-dark); }
.post-card__title { margin: 6px 0 8px; font-size: 1.12rem; line-height: 1.4; }
.post-card__title a { color: var(--c-navy); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__text { color: var(--c-muted); font-size: 0.93rem; }
.post-card .link-arrow { margin-top: auto; }

/* ==========================================================================
   12. Trang con: dải tiêu đề, nội dung, văn phòng, FAQ
   ========================================================================== */
.page-hero { position: relative; padding: clamp(3rem, 2.4rem + 3vw, 5rem) 0 clamp(4rem, 3rem + 4vw, 6.5rem); background: var(--grad-band); color: #fff; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); pointer-events: none; }
.page-hero__inner { position: relative; max-width: 900px; margin-inline: auto; text-align: center; }
.page-hero__title { margin: 0 0 0.4em; color: #fff; text-wrap: balance; }
.page-hero__lead { max-width: 720px; margin: 0 auto; font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.9); }
.page-hero__meta { margin: 0.6rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; }
.page-hero__curve { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(30px, 4vw, 60px); fill: var(--c-bg); }
.breadcrumb { margin-bottom: 14px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); }
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: #fff; }

.entry { max-width: 820px; margin-inline: auto; font-size: 1.05rem; }
/* Canh đều đoạn văn dài cho cân đối; dòng cuối canh trái; ô bảng/chú thích ảnh giữ canh trái. */
.entry p, .entry li { text-align: justify; text-align-last: left; }
.entry td p, .entry th p, .entry figcaption { text-align: left; }
.entry > :first-child { margin-top: 0; }
.entry h2 { margin-top: 1.8em; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.entry h3 { margin-top: 1.5em; }
.entry ul li::marker { color: var(--c-cyan); }
.entry img { border-radius: var(--radius); }
.entry__thumb { margin-bottom: 1.5rem; }
.entry blockquote { margin: 1.5em 0; padding: 14px 22px; border-left: 4px solid var(--c-cyan); background: var(--c-bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.entry table { display: block; width: 100%; margin: 1.5em 0; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.entry th, .entry td { padding: 12px 14px; border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.entry th { background: var(--c-navy); color: #fff; font-weight: 700; }
.entry tr:nth-child(even) td { background: var(--c-bg-alt); }
.entry--flush { max-width: none; margin: 0; }
.pagination, .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2.5rem; }
.page-numbers { padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); text-decoration: none; }
.page-numbers.current { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }

.offices__list { display: grid; gap: 16px; margin: 0 0 2rem; padding: 0; list-style: none; }
.office { padding: 22px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.office__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%; background: var(--c-bg-alt); color: var(--c-cyan-dark); }
.office__name { margin-bottom: 0.3em; font-size: 1.05rem; }
.office p { margin: 0; color: var(--c-muted); font-size: 0.93rem; }
.map iframe { display: block; width: 100%; height: 380px; border: 0; border-radius: var(--radius-lg); }

.faq { max-width: 860px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__h { margin: 0; font-size: inherit; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 20px 0; border: 0; background: none; text-align: left; font-weight: 700; font-size: var(--fs-lg); color: var(--c-navy); cursor: pointer; }
.faq__q::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-alt); font-size: 1.3rem; line-height: 1; color: var(--c-cyan-dark); transition: transform 0.2s; }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 20px; color: var(--c-muted); }
.faq__a[hidden] { display: none; }

/* ==========================================================================
   13. Footer navy
   ========================================================================== */
.site-footer { position: relative; margin-top: 40px; padding-top: 56px; background: var(--c-navy-deep); color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; }
.site-footer__wave { position: absolute; left: 0; top: -39px; width: 100%; height: 40px; fill: var(--c-navy-deep); }
.site-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--c-cyan); }
.site-footer__top { display: grid; gap: 20px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__logo img { width: 170px; height: auto; }
.site-footer__desc { margin: 0; max-width: 560px; }
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social__label { width: 100%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.social__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: 0.2s; }
.site-footer .social__link:hover { background: var(--c-cyan); color: #fff; }
.site-footer__grid { display: grid; gap: 28px; padding-block: 36px; }
.site-footer__heading { margin: 0 0 14px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.site-footer__info, .site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__info li { margin-bottom: 8px; line-height: 1.6; }
.site-footer__info strong { color: #fff; font-weight: 600; }
.site-footer__links li { margin-bottom: 9px; }
.site-footer__bottom { padding: 18px 0 88px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.site-footer__langs { display: inline-flex; gap: 14px; }
.site-footer__langs a[aria-current] { color: var(--c-cyan); font-weight: 700; }

/* ==========================================================================
   14. Nút liên hệ nổi — mobile: thanh dưới đáy; desktop: cột nút tròn góc phải
   ========================================================================== */
.float-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #fff; box-shadow: 0 -4px 16px rgba(15, 36, 82, 0.15); }
.float-contact__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font-size: 0.72rem; font-weight: 700; color: #fff; text-decoration: none; }
.float-contact__btn:hover { color: #fff; filter: brightness(1.08); }
.float-contact__btn svg { width: 22px; height: 22px; }
.float-contact__phone { background: var(--c-navy); }
.float-contact__zalo { background: #0068ff; }
.float-contact__mail { background: var(--c-cyan-dark); }
.float-contact__quote { background: var(--c-yellow); color: var(--c-navy-deep); }
.float-contact__quote:hover { color: var(--c-navy-deep); }

/* Video modal (bấm mới tải YouTube) */
.video-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 42, 0.9); }
.video-modal__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal__close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--c-navy); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* Hiện dần khi cuộn (JS thêm .reveal; không JS → hiện bình thường) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 599px) {
	.hero-media__caption { display: none; }
	.hero-media__bar { justify-content: center; bottom: 52px; }
	.product-card:not(.product-card--full) .product-card__specs { display: none; }
	.product-card__body { padding: 12px; }
	.product-card__title { font-size: 0.92rem; margin-bottom: 0; }
	.brand-card { padding: 24px 20px; }
	.brand-card__media { width: 132px; height: 132px; }
	.solution-card { padding: 22px 20px; }
	.customers__names { gap: 8px; }
	.customers__names li { padding: 7px 12px; font-size: 0.86rem; }
	.intro__visual { max-width: 340px; }
}
@media (min-width: 600px) {
	.form__row { grid-template-columns: 1fr 1fr; }
	.product-grid { gap: 18px; }
	.offices__list { grid-template-columns: repeat(2, 1fr); }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.group-grid { grid-template-columns: repeat(2, 1fr); }
	.solutions__list, .reasons__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	:root { --gutter: 24px; }
	.stats__list { grid-template-columns: repeat(4, 1fr); }
	.stats__item { border-bottom: 0; border-right: 1px solid var(--c-border); padding: 30px 16px; }
	.stats__item:last-child { border-right: 0; }
	.product-grid { grid-template-columns: repeat(3, 1fr); }
	.brands__list { grid-template-columns: repeat(3, 1fr); }
	.site-footer__top { grid-template-columns: auto 1fr auto; gap: 32px; }
	.social__label { width: auto; margin-right: 6px; }
	.hero-media__caption { font-size: 0.875rem; }
	.partner__globe { display: none; }
}
@media (min-width: 1024px) {
	:root { --header-h: 76px; }
	.site-logo { padding: 10px 18px 14px; margin-bottom: -26px; border-radius: 0 0 24px 24px; }
	.site-logo img { height: 66px; }
	.nav-toggle { display: none; }
	.primary-nav { position: static; display: flex; align-items: center; padding: 0; overflow: visible; background: none; transform: none; visibility: visible; transition: none; margin-left: auto; }
	.primary-nav .primary-nav__cta { display: none; }
	.primary-nav .menu { display: flex; gap: 2px; }
	.tabs__list { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; }
	.primary-nav li { position: relative; }
	.primary-nav .menu > li > a { position: relative; padding: 26px 11px; border: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
	.primary-nav .menu > li > a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 18px; height: 3px; border-radius: 3px; background: var(--c-cyan); transform: scaleX(0); transition: transform 0.2s; }
	.primary-nav .menu > li > a:hover::after, .primary-nav .menu > .current-menu-item > a::after { transform: scaleX(1); }
	.primary-nav .menu > .current-menu-item > a, .primary-nav .menu > li > a:hover { color: #fff; }
	.primary-nav .menu > .menu-item-has-children > a { padding-right: 24px; }
	.primary-nav .menu-item-has-children > a::before { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
	.primary-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 260px; padding: 10px 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: 0.2s; }
	.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.primary-nav .sub-menu a { padding: 9px 20px; border: 0; color: var(--c-navy); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
	.primary-nav .sub-menu a:hover, .primary-nav .sub-menu .current-menu-item > a { color: var(--c-cyan-dark); background: var(--c-bg-alt); }
	.site-header__tools { margin-left: 8px; }
	.hero-media { height: clamp(460px, calc(88vh - var(--header-h)), 820px); }
	.hero-media__bar { bottom: 56px; }
	.intro__inner { grid-template-columns: 1.05fr 1fr; gap: 56px; }
	.product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.product-grid--full { grid-template-columns: repeat(3, 1fr); }
	.group-grid { grid-template-columns: repeat(3, 1fr); }
	.factory__inner { grid-template-columns: 1.05fr 1fr; gap: 72px; }
	.solutions__list { grid-template-columns: repeat(3, 1fr); }
	.reasons__list { grid-template-columns: repeat(3, 1fr); }
	.partner__inner { grid-template-columns: 1fr 1.05fr; gap: 64px; }
	.partner__globe { display: block; position: absolute; left: -40px; bottom: -120px; width: 260px; height: 260px; color: rgba(255, 255, 255, 0.08); }
	.partner__globe .icon { width: 100%; height: 100%; stroke-width: 0.6; }
	.partner__text { position: relative; }
	.customers__row { grid-template-columns: 160px 1fr; align-items: center; }
	.quote__inner { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
	.quote__text { position: sticky; top: calc(var(--header-h) + 40px); }
	.offices__list { grid-template-columns: repeat(3, 1fr); }
	.post-grid { grid-template-columns: repeat(3, 1fr); }
	.site-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
	.float-contact { left: auto; right: 20px; bottom: 20px; grid-auto-flow: row; gap: 12px; background: none; box-shadow: none; }
	.float-contact__btn { width: 54px; height: 54px; min-height: 0; border-radius: 50%; box-shadow: var(--shadow); }
	.float-contact__btn span { display: none; }
	.float-contact__quote { display: none; }
	.site-footer__bottom { padding-bottom: 18px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.primary-nav .menu > li > a { padding-inline: 7px; font-size: 0.74rem; }
	.primary-nav .menu > li > a::after { left: 7px; right: 7px; }
	.header-cta { display: none; }
}
@media (min-width: 1200px) {
	.header-cta { display: inline-flex; min-height: 42px; padding: 8px 20px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; }
}

/* Logo trắng chỉ dùng ở giao diện tối; dải "Nhãn hàng 0X" chỉ hiện ở giao diện tối */
.site-logo__white, .brand-card__step { display: none; }
.hl { color: var(--c-cyan-dark); }

/* ==========================================================================
   17. Trang chủ giao diện tối kiểu Coachio (data.php → home_style = 'toi', body.home-dark) — 27/10/2026
   Nền navy rất đậm cho MỌI khối (không xen nền sáng), thẻ than viền mảnh, nhấn cyan phát sáng (10%),
   vàng cho số liệu/huy hiệu, tiêu đề IN HOA hai tông. Màu vẫn là họ màu Thế Giới Giấy.
   ========================================================================== */
.home-dark {
	--d-950: #040A18;
	--d-900: #07112A;
	--d-850: #0B1731;
	--d-800: #0F1E3C;
	--d-750: #13264A;
	--d-line: #213459;
	--d-line-strong: #36507F;
	--d-mid: #C7D2E6;
	--d-low: #93A3C0;
	--brand: #2DABE2;
	--brand-2: #1F4395;
	--brand-rgb: 45 171 226;
	--gold: #FEC24F;
	--glow: 0 0 20px rgb(var(--brand-rgb) / 0.55);
	--glow-lg: 0 10px 30px rgb(var(--brand-rgb) / 0.4);
	--card-glow: 0 10px 40px rgb(var(--brand-rgb) / 0.15);
	background: var(--d-950);
	color: var(--d-mid);
}
.home-dark :focus-visible { outline-color: var(--brand); }
.home-dark h1, .home-dark h2, .home-dark h3 { color: #fff; }
.home-dark .hl { color: var(--brand); text-shadow: 0 0 20px rgb(var(--brand-rgb) / 0.3); }

/* Header: đen trong suốt mờ, logo trắng không khung */
.home-dark .site-header { background: rgba(4, 10, 24, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.home-dark .site-logo { align-self: center; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; }
.home-dark .site-logo__color { display: none; }
.home-dark .site-logo__white { display: block; height: 42px; width: auto; }
.home-dark .header-cta, .home-dark .primary-nav__cta { background: linear-gradient(90deg, var(--brand), var(--brand-2)); box-shadow: var(--glow); }
@media (max-width: 1023px) { .home-dark .primary-nav { background: var(--d-900); } }
.home-dark .primary-nav .sub-menu { background: var(--d-850); border: 1px solid var(--d-line); }
.home-dark .primary-nav .sub-menu a { color: var(--d-mid); }
.home-dark .primary-nav .sub-menu a:hover { color: #fff; background: var(--d-800); }

/* Khung khối chung */
.home-dark .section, .home-dark .section--alt, .home-dark .section--dark { background: transparent; color: var(--d-mid); }
.home-dark .section__head { margin-bottom: clamp(2.5rem, 2rem + 1.5vw, 3.2rem); }
.home-dark .section__title { color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); font-weight: 800; text-transform: uppercase; line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
.home-dark .section__eyebrow { color: var(--brand); font-weight: 800; letter-spacing: 0.16em; }
.home-dark .section__eyebrow::before { display: none; }
.home-dark .section__lead { color: var(--d-mid); }

/* Nút: một CTA chính gradient phát sáng, phụ là nút viền */
.home-dark .btn--primary, .home-dark .btn--white, .home-dark .btn--accent { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; box-shadow: var(--glow-lg); }
.home-dark .btn--primary:hover, .home-dark .btn--white:hover, .home-dark .btn--accent:hover { color: #fff; box-shadow: 0 15px 40px rgb(var(--brand-rgb) / 0.6); }
.home-dark .btn--ghost, .home-dark .btn--outline-white { border-color: var(--d-line-strong); background: transparent; color: #fff; }
.home-dark .btn--ghost:hover, .home-dark .btn--outline-white:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.home-dark .link-arrow { color: var(--brand); }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0.55); } 70% { box-shadow: 0 0 0 12px rgb(var(--brand-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0); } }

/* Hero */
.hero-dark { position: relative; padding: clamp(4.5rem, 3.5rem + 5vw, 8rem) 0 clamp(4rem, 3rem + 4vw, 6.5rem); text-align: center; overflow: hidden;
	background: radial-gradient(ellipse 70% 55% at 50% 0%, rgb(var(--brand-rgb) / 0.22), transparent 70%), linear-gradient(180deg, rgba(4, 10, 24, 0.78) 0%, rgba(4, 10, 24, 0.9) 60%, var(--d-950) 100%), var(--hero-bg, none) center 40% / cover no-repeat, var(--d-950); }
.hero-dark__inner { position: relative; max-width: 1000px; }
.badge-pulse { display: inline-block; margin-bottom: 1.5rem; padding: 8px 22px; border-radius: var(--radius-pill); background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: var(--glow); animation: pulseRing 2s infinite; }
.hero-dark__title { margin: 0 0 1.25rem; text-transform: uppercase; letter-spacing: -0.015em; }
.hero-dark__l1 { display: block; color: #fff; font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.4rem); font-weight: 800; line-height: 1.15; text-shadow: 0 0 25px rgba(255, 255, 255, 0.25); text-wrap: balance; }
.hero-dark__l2 { display: block; margin-top: 0.2em; color: var(--brand); font-size: clamp(1.45rem, 1rem + 2.2vw, 2.9rem); font-weight: 800; line-height: 1.15; text-shadow: 0 0 40px rgb(var(--brand-rgb) / 0.5); text-wrap: balance; }
.hero-dark__lead { max-width: 780px; margin: 0 auto 0.75rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: #E4EAF5; }
.hero-dark__desc { max-width: 760px; margin: 0 auto 1.25rem; font-size: 0.95rem; color: var(--d-low); }
.hero-dark__flash { margin: 0 auto 2rem; color: var(--gold); font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.92rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-dark__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto 2.5rem; padding: 0; list-style: none; }
.stat-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 16px 10px 14px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-850); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.stat-tile__num { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1.05; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-tile__label { margin-top: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-low); }
.hero-dark__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-main { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; max-width: 380px; padding: 16px 32px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; text-decoration: none; box-shadow: var(--glow-lg); transition: transform 0.2s, box-shadow 0.2s; animation: pulseRing 2s infinite; }
.cta-main:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 15px 40px rgb(var(--brand-rgb) / 0.6); }
.cta-main__label { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.cta-main__sub { font-size: 0.78rem; font-weight: 500; opacity: 0.95; }
.cta-outline { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 380px; min-height: 60px; padding: 14px 32px; border: 2px solid var(--d-line-strong); border-radius: var(--radius-pill); color: #fff; font-weight: 800; text-transform: uppercase; text-decoration: none; transition: 0.2s; }
.cta-outline:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.hero-dark__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 1.75rem; }
.hero-dark__video { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.hero-dark__play { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--brand); border-radius: 50%; color: var(--brand); }
.hero-dark__play .icon { width: 16px; height: 16px; margin-left: 2px; }

/* Sản phẩm */
.home-dark .tabs__tab { border-color: var(--d-line); background: transparent; color: var(--d-mid); }
.home-dark .tabs__tab:hover { border-color: var(--brand); color: #fff; }
.home-dark .tabs__tab[aria-selected="true"] { border-color: transparent; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: var(--glow); }
.home-dark .products__intro p { color: var(--d-low); }
.home-dark .product-card { background: var(--d-850); border-color: var(--d-line); }
.home-dark .product-card:hover { border-color: var(--brand); box-shadow: var(--card-glow); }
.home-dark .product-card__media { background: #fff; }
.home-dark .product-card__code { color: var(--brand); }
.home-dark .product-card__title a { color: #fff; }
.home-dark .product-card__specs div { border-top-color: var(--d-line); }
.home-dark .product-card__specs dt { color: var(--d-low); }
.home-dark .product-card__specs dd { color: #fff; }

/* Nhãn hàng — thẻ kiểu "3 trụ cột": dải nhãn → ảnh 4:3 → tên → slogan nghiêng → mô tả */
.home-dark .brand-card { align-items: stretch; padding: 0 0 26px; text-align: left; overflow: hidden; background: var(--d-850); border-color: var(--d-line); border-radius: 20px; }
.home-dark .brand-card:hover { border-color: var(--brand); box-shadow: var(--card-glow); transform: translateY(-8px); }
.home-dark .brand-card__step { display: block; padding: 12px 22px; border-bottom: 1px solid var(--d-line); background: rgb(var(--brand-rgb) / 0.1); color: var(--brand); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.home-dark .brand-card__media { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 22px; border: 0; border-bottom: 1px solid var(--d-line); border-radius: 0; background: #fff; box-shadow: none; }
.home-dark .brand-card__media img { width: 62%; height: 62%; }
.home-dark .brand-card > :not(.brand-card__step):not(.brand-card__media) { margin-inline: 24px; }
.home-dark .brand-card__name { order: -1; margin-top: 0; margin-bottom: 4px; font-size: 1.5rem; text-transform: uppercase; }
.home-dark .brand-card__tag { align-self: flex-start; padding: 0; background: none; color: var(--brand); font-size: 0.92rem; font-style: italic; font-weight: 600; letter-spacing: 0; text-transform: none; }
.home-dark .brand-card__step, .home-dark .brand-card__media { order: -3; }
.home-dark .brand-card__media { order: -2; }
.home-dark .brand-card p { margin-top: 12px; color: var(--d-low); }

/* Nhà máy */
.home-dark .factory__main { border: 1px solid var(--d-line); box-shadow: 0 0 40px rgb(var(--brand-rgb) / 0.15); }
.home-dark .factory__sub { border-color: var(--d-950); }
.home-dark .factory__badge { border-color: var(--d-950); background: var(--gold); }
.home-dark .factory__lead { color: var(--d-mid); }
.home-dark .checklist li { color: #fff; }
.home-dark .checklist .icon { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Giải pháp — thẻ kiểu "Ai nên sở hữu" */
.home-dark .solution-card { background: var(--d-850); border-color: var(--d-line); border-radius: 18px; }
.home-dark .solution-card:hover { border-color: var(--brand); box-shadow: var(--card-glow); transform: translateY(-6px); }
.home-dark .solution-card__icon { border-radius: 14px; background: rgb(var(--brand-rgb) / 0.1); color: var(--brand); }
.home-dark .solution-card p { color: var(--d-low); }
.home-dark .chip { background: transparent; border-color: var(--d-line); color: var(--d-mid); }
.home-dark .chip:hover { background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; }
.home-dark .solution-card--cta { border: 2px solid var(--brand); background: linear-gradient(160deg, var(--d-750), var(--d-950)); box-shadow: 0 0 30px rgb(var(--brand-rgb) / 0.15); }
.home-dark .solution-card--cta .solution-card__title { color: var(--brand); text-transform: uppercase; }
.home-dark .solution-card--cta p { color: var(--d-mid); }

/* Hợp tác xuất khẩu — các bước là "vùng đọc" nền trắng (ngoại lệ có chủ đích của phong cách) */
.home-dark .partner { padding: var(--space-section) 0; background: transparent; }
.home-dark .partner::before, .home-dark .partner__curve { display: none; }
.home-dark .partner .section__eyebrow { color: var(--brand); }
.home-dark .partner__lead { color: var(--d-mid); }
.home-dark .partner__step { background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.home-dark .partner__num { border: 1.5px solid var(--brand); background: #fff; color: var(--brand-2); }
.home-dark .partner__step h3 { color: #0F1E3C; }
.home-dark .partner__step p { color: #4A5670; }

/* Khách hàng */
.home-dark .customers__row { border-bottom-color: var(--d-line); }
.home-dark .customers__label { color: var(--brand); }
.home-dark .customers__names li { background: var(--d-850); border-color: var(--d-line); color: var(--d-mid); }
.home-dark .customers__names li:hover { background: var(--d-800); border-color: var(--brand); color: #fff; box-shadow: none; }

/* Vì sao chọn — thẻ kiểu "Quyền lợi" */
.home-dark .reasons::before { display: none; }
.home-dark .reason { background: var(--d-850); border-color: var(--d-line); border-radius: 18px; }
.home-dark .reason:hover { background: var(--d-800); border-color: var(--brand); }
.home-dark .reason__icon { width: 50px; height: 50px; border-radius: 10px; background: rgb(var(--brand-rgb) / 0.1); color: var(--brand); }
.home-dark .reason p { color: #AAB6CC; }

/* Báo giá — khung form viền cyan phát sáng */
.home-dark .quote__aside { color: #fff; }
.home-dark .contact-line { background: var(--d-850); border-color: var(--d-line); color: #fff; }
.home-dark a.contact-line:hover { border-color: var(--brand); color: #fff; }
.home-dark .contact-line .icon { background: rgb(var(--brand-rgb) / 0.1); color: var(--brand); }
.home-dark .contact-line small { color: var(--d-low); }
.home-dark .form { border: 2px solid var(--brand); background: linear-gradient(160deg, var(--d-750), var(--d-950)); color: var(--d-mid); box-shadow: 0 0 40px rgb(var(--brand-rgb) / 0.18); }
.home-dark .form label { color: #fff; }
.home-dark .form input, .home-dark .form select, .home-dark .form textarea { border-color: var(--d-line); background: var(--d-900); color: #fff; }
.home-dark .form input:focus, .home-dark .form select:focus, .home-dark .form textarea:focus { border-color: var(--brand); background: var(--d-850); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.25); }
.home-dark .form select option { background: var(--d-850); color: #fff; }
.home-dark .form__note { color: var(--d-low); }
.home-dark .form .btn--primary { animation: pulseRing 2s infinite; }

/* Tin tức */
.home-dark .post-card { background: var(--d-850); border-color: var(--d-line); }
.home-dark .post-card:hover { border-color: var(--brand); box-shadow: var(--card-glow); }
.home-dark .post-card__title a { color: #fff; }
.home-dark .post-card__text { color: var(--d-low); }

/* Chân trang liền màu nền tối */
.home-dark .site-footer { margin-top: 0; background: var(--d-900); border-top: 1px solid var(--d-line); }
.home-dark .site-footer__wave { display: none; }

@media (min-width: 600px) {
	.hero-dark__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
	.home-dark .site-logo__white { height: 50px; }
	.hero-dark__cta { flex-direction: row; justify-content: center; gap: 28px; }
	.cta-main, .cta-outline { width: auto; min-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
	.badge-pulse, .cta-main, .home-dark .form .btn--primary { animation: none; }
}

/* 17b. Hiệu ứng khi cuộn — trang chủ giao diện tối (JS gắn .reveal--*, độ trễ so le qua biến --d) — 27/10/2026 */
.home-dark .reveal { transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
.home-dark .reveal--up { transform: translateY(36px); }
.home-dark .reveal--left { transform: translateX(-56px); }
.home-dark .reveal--right { transform: translateX(56px); }
.home-dark .reveal--pop { transform: scale(0.85); }
.home-dark .reveal.is-in { opacity: 1; transform: none; }

/* Phần đầu trang hiện theo nhịp khi mở trang */
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.js .hero-dark__inner > * { animation: heroIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero-dark__inner > :nth-child(1) { animation-delay: 0.05s; }
.js .hero-dark__inner > :nth-child(2) { animation-delay: 0.18s; }
.js .hero-dark__inner > :nth-child(3) { animation-delay: 0.32s; }
.js .hero-dark__inner > :nth-child(4) { animation-delay: 0.42s; }
.js .hero-dark__inner > :nth-child(5) { animation-delay: 0.52s; }
.js .hero-dark__inner > :nth-child(6) { animation-delay: 0.62s; }
.js .hero-dark__inner > :nth-child(7) { animation-delay: 0.9s; }
.js .hero-dark__inner > :nth-child(8) { animation-delay: 1s; }
.js .hero-dark__inner > .badge-pulse { animation: heroIn 0.8s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both, pulseRing 2s 1s infinite; }
.js .hero-dark__stats { animation: none; }
.js .hero-dark__stats .stat-tile { animation: heroIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero-dark__stats .stat-tile:nth-child(1) { animation-delay: 0.6s; }
.js .hero-dark__stats .stat-tile:nth-child(2) { animation-delay: 0.7s; }
.js .hero-dark__stats .stat-tile:nth-child(3) { animation-delay: 0.8s; }
.js .hero-dark__stats .stat-tile:nth-child(4) { animation-delay: 0.9s; }
.hero-dark::before { content: ""; position: absolute; left: 50%; top: -30%; width: 120%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgb(var(--brand-rgb) / 0.18), transparent 65%); animation: heroGlow 6s ease-in-out infinite; pointer-events: none; }

/* Chữ nhấn trong tiêu đề: vệt sáng lướt qua một lần khi tiêu đề hiện ra */
@keyframes hlSweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.home-dark .section__title .hl { background: linear-gradient(100deg, var(--brand) 0%, var(--brand) 38%, #d4f2ff 50%, var(--brand) 62%, var(--brand) 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgb(var(--brand-rgb) / 0.35)); }
.home-dark .is-in .section__title .hl, .home-dark .section__head.is-in .hl { animation: hlSweep 1.5s 0.35s ease-out both; }

/* Thanh tiến trình cuộn */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 3px; background: linear-gradient(90deg, var(--brand, #2DABE2), #9fe0f8); box-shadow: 0 0 10px rgb(45 171 226 / 0.8); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.js .hero-dark__inner > *, .js .hero-dark__stats .stat-tile, .hero-dark::before { animation: none; }
	.scroll-progress { display: none; }
}

/* ==========================================================================
   17c. Trang chủ tối theo ảnh mẫu chủ web gửi 01/11/2026: hero chia đôi (chữ trái – ảnh nhà máy phải),
   thẻ sản phẩm trắng có icon thông số, dải cam kết, thẻ giải pháp ngang, 3 điểm mạnh hợp tác, 3 băng logo chạy.
   ========================================================================== */
.home-dark {
	--d-950: #06143A;
	--d-900: #081B48;
	--d-850: #0B2256;
	--d-800: #0E2A66;
	--d-750: #12306F;
	--d-line: #1F3F7A;
	--d-line-strong: #3A5C9E;
	--cyan-lt: #6FDDFB;
	background: radial-gradient(1100px 700px at 85% 8%, rgb(45 171 226 / 0.14), transparent 60%), radial-gradient(900px 600px at 0% 55%, rgb(45 171 226 / 0.08), transparent 60%), var(--d-950);
}
.product-card__specs dt .icon { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--c-cyan-dark); }
.product-card__more { display: none; }

/* Nhãn nhỏ có gạch hai bên (— SẢN PHẨM —) */
.home-dark .section__head:not(.section__head--left) .section__eyebrow::before,
.home-dark .section__head:not(.section__head--left) .section__eyebrow::after { content: ""; display: block; width: 36px; height: 1px; background: rgb(45 171 226 / 0.6); }
.home-dark .section__head--left .section__eyebrow::before { display: block; content: ""; width: 0; }
.home-dark .section__lead { max-width: 760px; margin-inline: auto; font-size: 0.98rem; color: #AFC0DD; opacity: 1; }

/* ---------- Hero chia đôi ---------- */
.hero-split { position: relative; display: grid; overflow: hidden; background: linear-gradient(115deg, #0D2E79 0%, #0A2463 38%, #07184A 100%); }
.hero-split__media { position: relative; order: 2; height: 300px; }
.hero-split__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.hero-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 36 99 / 0.5), rgb(6 20 58 / 0.15) 40%, rgb(6 20 58 / 0.65) 100%); }
.hero-split__roll { position: absolute; z-index: 2; height: auto; filter: drop-shadow(0 22px 26px rgb(0 0 0 / 0.45)); }
.hero-split__roll--big { right: 4%; bottom: 6%; width: 46%; max-width: 360px; }
.hero-split__roll--tall { right: 40%; bottom: 8%; width: 22%; max-width: 170px; }
.hero-split__inner { position: relative; z-index: 3; order: 1; padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) 1.5rem; }
.hero-split__text { max-width: 640px; }
.hero-split__badge { display: inline-block; margin-bottom: 1.25rem; padding: 7px 18px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cyan-lt), var(--brand)); color: #08245E; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 6px 22px rgb(45 171 226 / 0.35); }
.hero-split__title { margin: 0 0 1.1rem; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.01em; }
.hero-split__l1 { display: block; color: #fff; font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.2rem); font-weight: 800; }
.hero-split__l2 { position: relative; display: inline-block; padding-bottom: 0.18em; color: var(--brand); font-size: clamp(2rem, 1.3rem + 2.9vw, 3.8rem); font-weight: 800; background: linear-gradient(90deg, var(--cyan-lt), var(--brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 22px rgb(45 171 226 / 0.35)); }
.hero-split__swoosh { position: absolute; right: -4%; bottom: -0.05em; width: 58%; height: 0.32em; overflow: visible; }
.hero-split__swoosh path { fill: none; stroke: var(--cyan-lt); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(111 221 251 / 0.9)); }
.hero-split__sub { max-width: 560px; margin: 0 0 1.75rem; color: #E6EEFA; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.55; }
.hero-split__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2rem; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 26px; border-radius: var(--radius-pill); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.hs-btn .icon { width: 20px; height: 20px; }
.hs-btn .icon:last-child { width: 18px; height: 18px; }
.hs-btn--main { background: linear-gradient(90deg, #4FD0F5, var(--brand)); color: #fff; box-shadow: 0 10px 30px rgb(45 171 226 / 0.45); }
.hs-btn--main:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 40px rgb(45 171 226 / 0.6); }
.hs-btn--outline { border: 2px solid rgb(255 255 255 / 0.85); color: #fff; background: rgb(255 255 255 / 0.02); }
.hs-btn--outline:hover { color: #08245E; background: #fff; transform: translateY(-3px); }
.hero-split__stats { display: flex; flex-wrap: wrap; gap: 14px 0; margin: 0; padding: 0; list-style: none; }
.hero-split__stats li { display: flex; align-items: center; gap: 12px; padding-right: 22px; margin-right: 22px; border-right: 1px solid rgb(255 255 255 / 0.18); }
.hero-split__stats li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-split__icon { color: var(--cyan-lt); }
.hero-split__icon .icon { width: 34px; height: 34px; stroke-width: 1.5; }
.hero-split__stats strong { display: block; color: #fff; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem); font-weight: 800; line-height: 1.15; }
.hero-split__stats small { display: block; color: #C3D2EA; font-size: 0.85rem; }
.hero-split__glow { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; width: 100%; height: 120px; pointer-events: none; }
@keyframes hsIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hsRoll { from { opacity: 0; transform: translateY(40px) scale(0.92); } to { opacity: 1; transform: none; } }
.js .hero-split__text > * { animation: hsIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero-split__text > :nth-child(2) { animation-delay: 0.12s; }
.js .hero-split__text > :nth-child(3) { animation-delay: 0.26s; }
.js .hero-split__text > :nth-child(4) { animation-delay: 0.38s; }
.js .hero-split__text > :nth-child(5) { animation-delay: 0.5s; }
.js .hero-split__roll--big { animation: hsRoll 1s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js .hero-split__roll--tall { animation: hsRoll 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ---------- Sản phẩm: tab viền, thẻ trắng, dải cam kết ---------- */
.home-dark .products__intro, .home-dark .products__more, .home-dark .products .section__cta { display: none; }
.home-dark .products .tabs__list { margin-bottom: 1.75rem; }
.home-dark .tabs__tab { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.home-dark .tabs__tab[aria-selected="true"] { background: linear-gradient(90deg, #4FD0F5, var(--brand)); }
.home-dark .product-card { background: linear-gradient(180deg, #fff 0%, #EEF6FD 100%); border: 1px solid rgb(255 255 255 / 0.6); border-radius: 18px; box-shadow: 0 14px 40px rgb(0 0 0 / 0.35); }
.home-dark .product-card:hover { border-color: var(--brand); box-shadow: 0 18px 48px rgb(45 171 226 / 0.35); }
.home-dark .product-card__media { background: transparent; }
.home-dark .product-card__code { display: none; }
.home-dark .product-card__title a { color: #0D2250; }
.home-dark .product-card__title { font-size: 1rem; }
.home-dark .product-card__specs div { border-top: 1px solid #DCE7F4; }
.home-dark .product-card__specs dt { color: #5A6B86; }
.home-dark .product-card__specs dt .icon { color: var(--brand); }
.home-dark .product-card__specs dd { color: #0D2250; }
.home-dark .product-card__more { display: inline-flex; align-self: center; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 18px; border: 1.5px solid var(--brand); border-radius: var(--radius-pill); color: #1585bd; font-size: 0.85rem; font-weight: 700; transition: 0.2s; }
.home-dark .product-card__more .icon { width: 15px; height: 15px; }
.home-dark .product-card:hover .product-card__more { background: var(--brand); color: #fff; }
.perks { display: grid; gap: 0; margin: 2.25rem 0 0; padding: 0; list-style: none; border: 1px solid rgb(45 171 226 / 0.45); border-radius: 20px; background: linear-gradient(180deg, rgb(14 42 102 / 0.65), rgb(8 27 72 / 0.65)); box-shadow: 0 0 30px rgb(45 171 226 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.06); }
.perks__item { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.perks__item:last-child { border-bottom: 0; }
.perks__icon { flex: none; color: #fff; }
.perks__icon .icon { width: 34px; height: 34px; stroke-width: 1.5; }
.perks strong { display: block; color: #fff; font-size: 1rem; }
.perks small { display: block; color: #AFC0DD; font-size: 0.82rem; }

/* ---------- Giải pháp: thẻ ngang kính mờ ---------- */
.solution-card__body { display: flex; flex-direction: column; flex: 1; }
.home-dark .solution-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 22px 20px; background: linear-gradient(160deg, rgb(20 52 118 / 0.6), rgb(8 27 72 / 0.6)); border: 1px solid rgb(45 171 226 / 0.28); border-radius: 18px; }
.home-dark .solution-card:hover { border-color: var(--brand); box-shadow: 0 0 30px rgb(45 171 226 / 0.2); transform: translateY(-4px); }
.home-dark .solution-card__icon { flex: none; width: 56px; height: 56px; margin: 0; border: 1px solid rgb(45 171 226 / 0.5); border-radius: 14px; background: rgb(45 171 226 / 0.08); color: var(--cyan-lt); }
.home-dark .solution-card__title { margin-bottom: 0.35em; font-size: 1.08rem; }
.home-dark .solution-card p { font-size: 0.9rem; color: #AFC0DD; }
.home-dark .solution-card .chips { margin-top: auto; gap: 6px; }
.home-dark .chip { padding: 4px 11px; border-color: rgb(255 255 255 / 0.25); font-size: 0.76rem; color: #DDE6F5; }
.home-dark .solution-card--cta { align-items: center; border: 1.5px solid var(--brand); background: linear-gradient(160deg, rgb(26 70 150 / 0.7), rgb(8 27 72 / 0.8)); box-shadow: 0 0 34px rgb(45 171 226 / 0.25); }
.home-dark .solution-card--cta .btn { align-self: flex-start; }

/* ---------- Hợp tác: 3 điểm mạnh dưới cột chữ ---------- */
.partner__features { display: grid; gap: 14px; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.partner__features li { display: flex; align-items: center; gap: 12px; }
.partner__ficon { flex: none; color: var(--c-cyan); }
.partner__ficon .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.partner__features strong { display: block; font-size: 0.92rem; color: inherit; }
.partner__features small { display: block; font-size: 0.8rem; opacity: 0.75; }
.home-dark .partner__features { color: #fff; }
.home-dark .partner__ficon { color: var(--cyan-lt); }
.home-dark .partner__step { border-radius: 14px; }

/* ---------- Khách hàng: hàng chỉ số + 3 băng logo chạy ---------- */
.customers__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 0; margin: -0.75rem 0 2.25rem; padding: 0; list-style: none; }
.customers__stats li { display: flex; align-items: center; gap: 12px; padding: 0 28px; text-align: left; }
.customers__stats li + li { border-left: 1px solid rgb(255 255 255 / 0.2); }
.customers__sicon { color: var(--cyan-lt, #2DABE2); }
.customers__sicon .icon { width: 36px; height: 36px; stroke-width: 1.5; }
.customers__stats strong { display: block; color: #fff; font-size: 1.15rem; font-weight: 800; }
.customers__stats small { display: block; max-width: 320px; color: #AFC0DD; font-size: 0.82rem; }
.logo-bands { display: grid; gap: 16px; }
.logo-band { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid rgb(111 221 251 / 0.55); border-radius: var(--radius-pill); background: rgb(8 27 72 / 0.6); box-shadow: 0 0 24px rgb(45 171 226 / 0.25), inset 0 0 18px rgb(45 171 226 / 0.12); }
.logo-band__arrow { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: rgb(255 255 255 / 0.75); }
.logo-band__arrow .icon { width: 20px; height: 20px; }
.logo-band__arrow--l .icon { transform: rotate(180deg); }
.logo-band__viewport { display: flex; flex: 1; min-width: 0; overflow: hidden; border-radius: var(--radius-pill); background: #fff; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-band__track { flex: none; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; animation: logoRun 42s linear infinite; }
.logo-band--reverse .logo-band__track { animation-direction: reverse; animation-duration: 48s; }
.logo-band:hover .logo-band__track { animation-play-state: paused; }
.logo-band__item { display: grid; place-items: center; width: clamp(130px, 9vw + 70px, 190px); height: 74px; padding: 0 22px; border-right: 1px solid #E3EAF4; }
.logo-band__item img { width: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
.logo-band__name { color: #33415C; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; text-align: center; white-space: nowrap; }
@keyframes logoRun { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (min-width: 768px) {
	.perks { grid-template-columns: repeat(3, 1fr); }
	.perks__item { border-bottom: 0; border-right: 1px solid rgb(255 255 255 / 0.12); }
	.perks__item:last-child { border-right: 0; }
	.partner__features { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.hero-split { grid-template-columns: 1fr; min-height: clamp(600px, 78vh, 760px); }
	.hero-split__media { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: auto; }
	.hero-split__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.55) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.55) 22%, #000 48%); }
	.hero-split__media::after { background: linear-gradient(180deg, rgb(6 20 58 / 0) 55%, rgb(6 20 58 / 0.75) 100%); }
	.hero-split__roll--big { right: 3%; bottom: 7%; width: 30%; max-width: 380px; }
	.hero-split__roll--tall { right: 26%; bottom: 9%; width: 13%; max-width: 180px; }
	.hero-split__inner { align-self: center; padding-block: 4.5rem 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.js .hero-split__text > *, .js .hero-split__roll { animation: none; }
	.logo-band__track { animation: none; }
	.logo-band__viewport { overflow-x: auto; }
	.logo-band__track[aria-hidden="true"] { display: none; }
}

/* 17c — chỉnh sau lần soát 1 (01/11/2026) */
.hero-split__text { max-width: 720px; }
.hero-split__l1 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.85rem); }
.hero-split::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 140px; background: linear-gradient(180deg, rgb(6 20 58 / 0), var(--d-950, #06143A)); pointer-events: none; }
.logo-bands { grid-template-columns: minmax(0, 1fr); }
.logo-band { min-width: 0; }
.logo-band__viewport { -webkit-mask-image: none; mask-image: none; }
.partner__features { gap: 12px; }
.partner__features small { font-size: 0.76rem; }
@media (min-width: 1024px) {
	.hero-split__media::after { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
	.hero-split__roll--tall { right: 30%; bottom: 7%; }
	.partner__ficon .icon { width: 26px; height: 26px; }
}

/* 17c — logo từng ô trắng bo góc riêng (chủ web góp ý 01/11/2026); chặn cuộn ngang trên điện thoại */
html { overflow-x: clip; }
.logo-band__viewport { background: transparent; border-radius: var(--radius-pill); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.logo-band__track { gap: 12px; padding: 6px 6px 6px 0; }
.logo-band__item { width: clamp(132px, 8vw + 80px, 184px); height: 66px; padding: 0 18px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.6); transition: transform 0.25s, box-shadow 0.25s; }
.logo-band__item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(45 171 226 / 0.35), inset 0 0 0 1px var(--brand, #2DABE2); }
.logo-band__item img { max-height: 40px; }
.logo-band { padding-block: 6px; }
@media (max-width: 599px) {
	.hero-split__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
	.hero-split__stats li { padding: 0; margin: 0; border: 0; }
	.hero-split__stats li:last-child { grid-column: 1 / -1; }
	.customers__stats li { padding: 0 14px; }
	.logo-band__item { height: 58px; }
}

/* 17c — điện thoại: băng logo bỏ mũi tên cho rộng, hàng chỉ số khách hàng không kẻ dọc */
@media (max-width: 599px) {
	.logo-band { padding-inline: 6px; }
	.logo-band__arrow { display: none; }
	.customers__stats { flex-direction: column; align-items: flex-start; gap: 14px; margin-inline: auto; max-width: 340px; }
	.customers__stats li + li { border-left: 0; }
}

/* 17c — sau góp ý màn hình lớn (01/11/2026): bỏ cuộn giấy tách nền khỏi hero (viền tách nền lộ trên ảnh tối, đè nút nổi);
   quầng sáng nền không đặt ngay dưới hero để không tạo dải ranh. */
.hero-split__roll { display: none !important; }
.home-dark { background: radial-gradient(900px 600px at 0% 45%, rgb(45 171 226 / 0.08), transparent 60%), radial-gradient(1000px 700px at 100% 75%, rgb(45 171 226 / 0.07), transparent 60%), var(--d-950); }
.hero-split::after { height: 180px; }
@media (min-width: 1024px) { .hero-split__photo { object-position: 70% 40%; } }

/* 17d — cân đối trang chủ tối (góp ý 01/11/2026): tiêu đề 1 dòng trên desktop, mô tả cân dòng,
   tab sản phẩm 3 + 3 đều nhau, khoảng cách giữa các khối đồng đều (chỉ đệm trên, không cộng dồn đệm dưới). */
.home-dark { --gap-sec: clamp(3.5rem, 2.6rem + 2.6vw, 5.5rem); }
.home-dark .section, .home-dark .partner, .home-dark .customers { padding-top: var(--gap-sec); padding-bottom: 0; }
.home-dark main > section:last-child, .home-dark #bao-gia { padding-bottom: var(--gap-sec); }
.home-dark .section__head { max-width: 1100px; margin-bottom: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.home-dark .section__title { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.25rem); text-wrap: balance; }
.home-dark .section__lead { max-width: 820px; text-wrap: balance; }
.home-dark .section__head--left .section__title { font-size: clamp(1.55rem, 1.15rem + 1.4vw, 2.1rem); }
.home-dark .perks { margin-top: 2rem; }
.home-dark .customers__stats { margin: -0.5rem 0 2rem; }
@media (min-width: 1024px) {
	.home-dark .products .tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 900px; margin: 0 auto 2rem; }
	.home-dark .products .tabs__tab { width: 100%; text-align: center; }
}

/* Khối hỏi đáp trong nội dung trang (noi-dung/*.html → <section class="faq-block">; theme sinh FAQPage từ khối này) */
.entry .faq-block { margin-top: 2.5rem; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: #fff; }
.entry .faq-block h2 { margin-top: 0; }
.entry .faq-block h3 { margin: 1.4em 0 0.35em; padding-left: 30px; position: relative; font-size: 1.05rem; color: var(--c-navy); }
.entry .faq-block h3::before { content: "?"; position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-cyan); color: #fff; font-size: 0.8rem; font-weight: 800; }
.entry .faq-block h3 + p { padding-left: 30px; color: var(--c-muted); }

/* Khối báo giá: "Sau khi gửi yêu cầu" 3 bước + huy hiệu tin cậy (cân cột trái với form, 02/11/2026) */
.quote__next { margin-top: 1.75rem; }
.quote__steps { counter-reset: qs; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.quote__steps li { counter-increment: qs; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 16px 46px; }
.quote__steps li::before { content: counter(qs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-cyan); color: #fff; font-size: 0.85rem; font-weight: 800; }
.quote__steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: var(--c-border); }
.quote__steps strong { color: var(--c-navy); font-size: 0.98rem; }
.quote__steps span { color: var(--c-muted); font-size: 0.88rem; line-height: 1.5; }
.quote__trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.quote__trust li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; color: var(--c-navy); }
.quote__trust .icon { width: 16px; height: 16px; color: var(--c-cyan-dark); }
.home-dark .quote__steps strong { color: #fff; }
.home-dark .quote__steps span { color: #AFC0DD; }
.home-dark .quote__steps li:not(:last-child)::after { background: rgb(45 171 226 / 0.3); }
.home-dark .quote__steps li::before { background: linear-gradient(135deg, #4FD0F5, var(--brand)); box-shadow: 0 0 14px rgb(45 171 226 / 0.45); }
.home-dark .quote__trust li { border-color: rgb(45 171 226 / 0.35); background: rgb(11 34 86 / 0.6); color: #E6EEFA; }
.home-dark .quote__trust .icon { color: #6FDDFB; }
.quote__form .quote__trust { justify-content: center; margin-top: 1.25rem; }
.quote__next { margin-top: 1.5rem; }
.quote__steps li { padding-bottom: 14px; }
.quote__form .quote__trust { gap: 6px; }
.quote__form .quote__trust li { padding: 6px 11px; font-size: 0.78rem; }
.quote__form .quote__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quote__form .quote__trust li { justify-content: center; text-align: center; min-height: 42px; padding: 6px 10px; border-radius: 12px; line-height: 1.3; }
.quote__form .quote__trust .icon { flex: none; }
@media (min-width: 1024px) { .quote__form .quote__trust { grid-template-columns: repeat(4, 1fr); } }

/* Logo header không bị bóp méo khi menu dài (bản EN): logo không co, header rộng 1440px, menu thu gọn ở màn 1024–1365 */
.site-logo { flex-shrink: 0; }
.site-logo img { max-width: none; }
@media (min-width: 1024px) {
	.site-header__inner { max-width: 1440px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
	.site-header__inner { gap: 12px; }
	.primary-nav .menu > li > a { padding-inline: 7px; font-size: 0.74rem; letter-spacing: 0.02em; }
	.primary-nav .menu > li > a::after { left: 7px; right: 7px; }
	.primary-nav .menu > .menu-item-has-children > a { padding-right: 20px; }
	.site-header__tools { margin-left: 4px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-logo { margin-bottom: -18px; }
	.site-logo img { height: 54px; }
	.primary-nav .menu > li > a { padding-inline: 5px; font-size: 0.72rem; }
}