/* ==========================================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root {
    --as-primary: #4775BC;
    --as-navy: #071A35;
    --as-navy-light: #0D2A52;
    --as-coral: #F45A38;
    --as-ice: #F1F7FC;
    --as-white: #FFFFFF;
    --as-text: #0B2345;
    --as-muted: #617086;
    --as-border: #DCE5EF;
    --font-main: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --container-width: 1440px;
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); color: var(--as-text); line-height: 1.6; background-color: var(--as-white); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: var(--as-primary); transition: all 0.3s ease; }
a:hover { color: var(--as-coral); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; padding-bottom: 10px; }
.section-padding { padding: 60px 0; }
.bg-ice { background-color: var(--as-ice); }
.bg-navy { background-color: var(--as-navy); }
.text-white, .text-white a { color: var(--as-white); }
.mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .mb-4 { margin-bottom: 1.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.fw-bold { font-weight: 700; }
.link-coral { color: var(--as-coral); font-size: 1rem; }

/* Buttons */
.btn-link { background: none; border: none; cursor: pointer; font-size: 14px; font-family: var(--font-main); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-size: 0.95rem; font-weight: 600; border-radius: 4px; text-transform: uppercase; transition: all 0.3s; border: none; cursor: pointer; }
.btn--coral { background: var(--as-coral); color: var(--as-white) !important; }
.btn--coral:hover { background: #d84524; transform: translateY(-2px); }
.btn--partner { border: 2px solid var(--as-coral); color: var(--as-coral) !important; background: transparent; padding: 10px 24px; }
.btn--partner:hover { background: var(--as-coral); color: var(--as-white) !important; }
.btn--outline-navy { border: 2px solid var(--as-navy); color: var(--as-navy); background: transparent; }
.btn--outline-navy:hover { background: var(--as-navy); color: var(--as-white); }
.btn--large { padding: 15px 35px; font-size: 1rem; }
.btn--wide { padding: 15px 50px; display: inline-block; }

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.site-header__inner { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; min-height: 90px; }
.site-branding { flex-shrink: 0; }
.site-branding img { max-height: 55px; width: auto; }
.header-navigation-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.header-top-bar { display: flex; align-items: center; gap: 15px; }
.utility-navigation ul, .main-navigation ul { display: flex; align-items: center; }
.utility-navigation ul { gap: 20px; }
.main-navigation ul { gap: 30px; }
.utility-navigation a { font-size: 0.85rem; font-weight: 500; transition: color 0.3s ease; }
.main-navigation a { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; }
.header-search { position: relative; padding-left: 15px; display: flex; align-items: center; }
.header-search::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background-color: currentColor; opacity: 0.3; }
.search-trigger { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; transition: color 0.3s ease; }
.header-main-bar { display: flex; align-items: center; gap: 35px; }
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; }

/* Header States */
.header--transparent { background: transparent; }
.header--transparent .site-title, .header--transparent .utility-navigation a, .header--transparent .main-navigation a, .header--transparent .search-trigger { color: var(--as-white); }
.header--transparent .utility-navigation a:hover, .header--transparent .main-navigation a:hover { color: var(--as-coral); }
.header--transparent .header-search::before { background-color: var(--as-white); }
.header--transparent .site-branding img { filter: brightness(0) invert(1); transition: filter 0.3s ease; }
.site-header.is-sticky, .header--white { background: var(--as-white); box-shadow: 0 2px 20px rgba(7, 26, 53, 0.08); }
.site-header.is-sticky .site-title, .header--white .site-title, .site-header.is-sticky .utility-navigation a, .header--white .utility-navigation a, .site-header.is-sticky .main-navigation a, .header--white .main-navigation a, .site-header.is-sticky .search-trigger, .header--white .search-trigger { color: var(--as-navy); }
.site-header.is-sticky .utility-navigation a:hover, .header--white .utility-navigation a:hover, .site-header.is-sticky .main-navigation a:hover, .header--white .main-navigation a:hover { color: var(--as-primary); }
.site-header.is-sticky .header-search::before, .header--white .header-search::before { background-color: var(--as-navy); }
.site-header.is-sticky .site-branding img { filter: none; }

/* ==========================================================================
   4. HERO SECTION & PAGE HEADERS
   ========================================================================== */
.hero-section { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; background-size: cover; background-position: center; padding-top: 80px; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(7, 26, 53, 0.8) 0%, rgba(7, 26, 53, 0.2) 60%, transparent 100%); }
.hero-section__inner { position: relative; z-index: 2; }
.hero-section .container { width: 100%; justify-content: flex-start; }
.hero-section__content { max-width: 650px; text-align: left; }
.hero-section__title { font-size: 3.5rem; color: var(--as-white); font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.hero-section__title br { display: block; }
.hero-section__desc { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); max-width: 500px; margin-bottom: 40px; }
.page-hero { text-align: center; border-bottom: 1px solid var(--as-border); }
.page-hero__title { font-size: 2.5rem; color: var(--as-navy); margin-bottom: 10px; font-weight: 700; }
.page-hero__desc { font-size: 1.125rem; color: var(--as-muted); max-width: 600px; margin: 0 auto; }

/* ==========================================================================
   5. GLOBAL COMPONENTS
   ========================================================================== */
.section-heading { margin-bottom: 50px; }
.section-heading.text-center { text-align: center; }
.section-heading__subtitle { display: block; color: var(--as-coral); text-transform: uppercase; font-weight: 600; font-size: 0.875rem; letter-spacing: 1px; margin-bottom: 10px; }
.section-heading__title { font-size: 2.5rem; color: var(--as-navy); font-weight: 700; }

/* Capabilities & Process */
.capabilities-section { padding: 80px 0; background-color: var(--as-white); }
.capabilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; width: 100%; }
.capability-card { position: relative; border-radius: 8px; overflow: hidden; display: block; aspect-ratio: 16 / 10; background: var(--as-navy); text-decoration: none; }
.capability-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); display: block; }
.capability-card:hover img { transform: scale(1.05); }
.capability-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 26, 53, 0.85) 0%, rgba(7, 26, 53, 0.2) 60%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; padding: 25px; }
.capability-card__overlay h3 { color: var(--as-white); font-size: 1.2rem; margin: 0; font-weight: 600; }
.capability-card__arrow { color: var(--as-white); font-size: 1.25rem; transition: transform 0.3s ease, color 0.3s ease; }
.capability-card:hover .capability-card__arrow { transform: translateX(6px); color: var(--as-coral); }

.process-section { position: relative; background-size: cover; background-position: center top; padding-top: 280px; padding-bottom: 50px; background-attachment: fixed; }
.process-section__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 35, 58, 0) 0%, rgba(20, 35, 58, 0.7) 60%, rgba(20, 35, 58, 0.95) 100%); z-index: 1; }
.process-section__inner { position: relative; z-index: 2; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 30px; }
.process-item { text-align: center; padding: 0 15px; border-right: 1px solid rgba(255, 255, 255, 0.15); }
.process-item:last-child { border-right: none; }
.process-item__title { color: var(--as-coral); font-size: 1.125rem; text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.process-item__desc { color: var(--as-white); margin: 0; font-size: 0.95rem; opacity: 0.9; }

/* Solutions Tabs */
.solutions-tabs-container { display: grid; grid-template-columns: 280px 1fr; background: var(--as-white); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(7, 26, 53, 0.06); }
.solutions-tabs-nav { background: var(--as-navy); display: flex; flex-direction: column; padding: 30px 0; }
.tab-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); text-align: left; padding: 20px 40px; font-size: 1.125rem; font-weight: 600; cursor: pointer; border-left: 4px solid transparent; transition: all 0.3s ease; }
.tab-btn:hover, .tab-btn.active { color: var(--as-white); background: rgba(255, 255, 255, 0.05); }
.tab-btn.active { border-left-color: var(--as-coral); }
.tab-pane { display: none; padding: 0; animation: fadeUp 0.5s ease; height: 100%; }
.tab-pane img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 12px 12px 0; }
.tab-pane.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Partners & Support */
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.partner-card { background: var(--as-white); border: 1px solid var(--as-border); border-radius: 8px; overflow: hidden; text-align: center; padding-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.partner-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(7, 26, 53, 0.08); }
.partner-card__title { font-size: 1.125rem; color: var(--as-navy); margin: 0; padding: 20px; background: var(--as-ice); border-bottom: 1px solid var(--as-border); }
.partner-card img { width: 100%; height: 180px; object-fit: cover; }
.partner-card__list { padding: 25px 30px 0; text-align: left; }
.partner-card__list li { font-size: 0.95rem; color: var(--as-muted); margin-bottom: 12px; position: relative; padding-left: 25px; }
.partner-card__list li::before { content: '✓'; position: absolute; left: 0; top: -2px; color: var(--as-primary); font-weight: 700; }
.support-feature__inner { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; }
.support-feature__image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }
.support-feature__content { padding: 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.support-feature__desc { color: var(--as-muted); font-size: 1.125rem; margin-bottom: 30px; }

/* Pre-footer CTA */
.pre-footer-cta { padding: 60px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pre-footer-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.pre-footer-cta__content { display: flex; align-items: center; gap: 20px; }
.pre-footer-cta__content svg { margin-right: 20px; flex-shrink: 0; }
.pre-footer-cta__content h2 { color: var(--as-white); font-size: 1.4rem; margin-bottom: 5px; font-weight: 700; }
.pre-footer-cta__content p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 0.95rem; }

/* Footer */
.site-footer { padding: 80px 0 30px; color: rgba(255,255,255,0.7); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.5fr; gap: 30px; margin-bottom: 60px; align-items: start; }
.footer-title { color: var(--as-white); font-size: 1.125rem; margin: 0 0 20px 0; font-weight: 600; line-height: 1.2; }
.footer-widget ul, .footer-widget div > ul { padding: 0; margin: 0; list-style: none; }
.footer-widget ul li { margin-bottom: 12px; }
.footer-widget ul li a { color: rgba(255,255,255,0.7); font-size: 0.95rem; }
.footer-widget ul li a:hover { color: var(--as-white); padding-left: 5px; }
.footer-contact .contact-item { display: flex; align-items: center; gap: 15px; }
.footer-contact .contact-item a { color: var(--as-white); font-size: 1.125rem; font-weight: 500; }
.footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom .copyright { font-size: 0.9rem; color: rgba(255,255,255,0.5); }
.footer-brand .footer-logo { max-height: 100px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); }

/* ==========================================================================
   6. ARCHIVE & TAXONOMY (SẢN PHẨM)
   ========================================================================== */
.as-product-card:hover, .hl-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: var(--as-primary); }
.as-product-card__info h3 a:hover { color: var(--as-primary); }

/* Menu Phụ (Sub-nav) */
.as-subnav { margin-top: 100px; border-bottom: 1px solid var(--as-border); background: var(--as-white); position: relative; z-index: 10; }
.as-subnav-list { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 40px; }
.as-subnav-item { padding: 15px 0; font-weight: 500; color: var(--as-muted); border-bottom: 3px solid transparent; }
.as-subnav-item.active { color: var(--as-navy); font-weight: 700; border-bottom-color: var(--as-coral); }
.as-subnav-link { color: inherit; text-decoration: none; }

/* Hero Archive */
.taxonomy-hero { position: relative; background-color: #f4f7fa; border-bottom: 1px solid var(--as-border); display: flex; align-items: center; overflow: hidden; min-height: 350px; }
.taxonomy-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 55%; background-repeat: no-repeat; background-position: left center; background-size: cover; }
.taxonomy-hero-overlay { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(to right, #f4f7fa 0%, transparent 100%); }
.taxonomy-hero-container { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-start; }
.taxonomy-hero-content { max-width: 550px; padding: 40px 0; margin: 0; }
.taxonomy-hero-breadcrumbs { margin-bottom: 15px; font-size: 0.95rem; color: var(--as-muted); text-align: left; }
.taxonomy-hero-breadcrumbs a { color: var(--as-navy); text-decoration: none; }
.taxonomy-hero-breadcrumbs .current { color: var(--as-primary); font-weight: 600; }
.taxonomy-hero-title { font-size: 3.2rem; color: var(--as-navy); font-weight: 800; margin-bottom: 15px; line-height: 1.2; text-align: left; }
.taxonomy-hero-desc { font-size: 1.1rem; color: var(--as-muted); line-height: 1.6; text-align: left; }

/* Bộ lọc & Grid */
.archive-layout-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.as-filter-group { margin-bottom: 25px; background: var(--as-white); padding: 15px; border-radius: 8px; border: 1px solid var(--as-border); }
.as-filter-title { font-weight: 700; margin-bottom: 10px; font-size: 1.1rem; color: var(--as-navy); }
.as-filter-list { list-style: none; padding: 0; margin: 0; }
.as-filter-item { margin-bottom: 8px; }
.as-filter-item:last-child { margin-bottom: 0; }
.as-filter-label { display: flex; align-items: center; gap: 10px; color: var(--as-muted); font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
.as-filter-label:hover { color: var(--as-navy); }
.as-filter-list input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.as-filter-list input[type="checkbox"]:checked { background-color: var(--as-navy); border-color: var(--as-navy); }
.as-filter-list input[type="checkbox"]:checked::before { content: "✓"; color: white; font-size: 12px; }
.as-filter-clear { color: var(--as-coral); font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Thanh Tìm kiếm & Grid Sản Phẩm */
.archive-top-bar { display: flex; gap: 20px; margin-bottom: 30px; }
.archive-search-box { flex: 1; border: 1px solid var(--as-border); background: var(--as-white); padding: 10px 15px; border-radius: 6px; display: flex; align-items: center; }
.archive-search-icon { margin-right: 10px; }
.archive-search-input { border: none; outline: none; width: 100%; }
.archive-sort-select { border: 1px solid var(--as-border); background: var(--as-white); padding: 10px 15px; border-radius: 6px; outline: none; cursor: pointer; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.archive-no-results { grid-column: 1 / -1; padding: 50px; text-align: center; background: var(--as-white); border: 1px dashed var(--as-border); border-radius: 8px; }
.archive-no-results-text { color: var(--as-coral); font-size: 1.1rem; margin: 0; }

/* Phân trang */
.as-pagination { margin-top: 40px; text-align: center; }
.as-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 5px; border-radius: 8px; color: var(--as-navy); text-decoration: none; font-weight: 600; transition: 0.3s; }
.as-pagination .page-numbers:hover { background: var(--as-ice); }
.as-pagination .page-numbers.current { background: var(--as-navy); color: var(--as-white); }

/* ==========================================================================
   7. TRANG CHI TIẾT SẢN PHẨM (SINGLE PRODUCT) & LIGHTBOX
   ========================================================================== */
.product-single-top { padding-bottom: 60px; }
.product-single-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
.product-gallery__main { margin-bottom: 15px; position: relative; cursor: zoom-in; }
.product-gallery__main img { width: 100%; border-radius: 12px; background-color: var(--as-ice); border: 1px solid var(--as-border); object-fit: cover; aspect-ratio: 4/3; }
.product-gallery__slider-wrapper { position: relative; display: flex; align-items: center; }
.product-gallery__thumbs { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; padding: 5px; scrollbar-width: none; -ms-overflow-style: none; }
.product-gallery__thumbs::-webkit-scrollbar { display: none; }
.as-thumb-img { flex: 0 0 calc(25% - 11.25px); height: 90px; object-fit: contain; border: 1px solid var(--as-border); border-radius: 8px; cursor: pointer; background: var(--as-ice); transition: border-color 0.3s ease; }
.as-thumb-img:hover, .as-thumb-img.active { border-color: var(--as-primary); }
.gallery-nav-btn { position: absolute; z-index: 10; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--as-border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); color: var(--as-navy); transition: all 0.3s ease; }
.gallery-nav-btn:hover { background: var(--as-primary); color: #fff; border-color: var(--as-primary); }
.gallery-nav-btn.prev-btn { left: 0; transform: translateX(-50%); }
.gallery-nav-btn.next-btn { right: 0; transform: translateX(50%); }

.product-info__subtitle { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.product-info__title { font-size: 2.5rem; color: var(--as-navy); font-weight: 700; margin-bottom: 20px; line-height: 1.2; }
.product-info__excerpt { font-size: 1.05rem; color: var(--as-muted); margin-bottom: 30px; line-height: 1.6; }
.product-info__attributes { margin-bottom: 30px; }
.product-info__attributes li { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--as-border); }
.product-info__attributes li:first-child { border-top: 1px solid var(--as-border); }
.product-info__attributes svg { margin-right: 15px; flex-shrink: 0; }
.product-info__attributes .label { width: 150px; color: var(--as-navy); font-weight: 600; }
.product-info__attributes .value { color: var(--as-muted); }
.product-info__actions { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.product-info__sub-actions { display: flex; gap: 30px; border-top: 1px solid var(--as-border); padding-top: 20px; }
.product-info__sub-actions a { display: inline-flex; align-items: center; gap: 8px; color: var(--as-navy); font-weight: 500; font-size: 0.95rem; }
.product-info__sub-actions a:hover { color: var(--as-primary); }

/* Tabs bám dính */
.as-sticky-tabs { position: sticky; top: 90px; background: var(--as-white); border-top: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); z-index: 100; }
.as-tabs-nav { display: flex; gap: 40px; }
.as-tab-link { display: block; padding: 20px 0; color: var(--as-muted); font-weight: 600; font-size: 1.05rem; position: relative; }
.as-tab-link:hover, .as-tab-link.active { color: var(--as-navy); }
.as-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--as-navy); }
.single-tab-section { display: none; animation: fadeIn 0.4s ease; }
.single-tab-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Spec Table & Related */
.specs-table-wrapper { background: var(--as-ice); border-radius: 8px; padding: 2px; }
.as-specs-table { width: 100%; border-collapse: collapse; }
.as-specs-table th, .as-specs-table td { padding: 15px 20px; border: 1px solid var(--as-white); text-align: left; }
.as-specs-table th { font-weight: 600; color: var(--as-navy); width: 25%; }
.as-specs-table td { color: var(--as-muted); width: 25%; }
.related-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--as-primary); }

/* Lightbox */
.as-lightbox { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease; }
.as-lightbox.show { display: flex; align-items: center; justify-content: center; opacity: 1; }
.as-lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: scale(0.8); transition: transform 0.3s ease; }
.as-lightbox.show .as-lightbox-content { transform: scale(1); }
.as-lightbox-close { position: absolute; top: 20px; right: 40px; color: #f1f1f1; font-size: 45px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 100000; }
.as-lightbox-close:hover, .as-lightbox-close:focus { color: var(--as-primary); text-decoration: none; }

/* ==========================================================================
   8. MASTER RESPONSIVE MEDIA QUERIES (GỘP CHUẨN TỐI ƯU)
   ========================================================================== */
@media (max-width: 1200px) {
    .archive-layout-grid { grid-template-columns: 220px 1fr; gap: 20px; }
    .products-grid, .quick-cats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    /* 8.1 - Grids & Layout Chung */
    .capabilities-grid, .partners-grid, .support-feature__inner, .solutions-tabs-container, .highlights-grid, .archive-layout-grid, div[style*="260px"] { grid-template-columns: 1fr !important; gap: 30px !important; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
    .process-item:nth-child(2) { border-right: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .product-single-grid { grid-template-columns: 1fr; gap: 30px; }
    .overview-grid { grid-template-columns: 1fr !important; }
    
    /* 8.2 - Header & Navigation Mobile */
    .menu-toggle { display: block; color: inherit; }
    .header-navigation-wrapper { align-items: center; flex-direction: row-reverse; }
    .utility-navigation, .main-navigation ul, .btn--partner { display: none; }
    .header-main-bar, .header-top-bar { gap: 15px; }
    
    /* 8.3 - Tabs, Tables & Top Bar */
    .solutions-tabs-nav { flex-direction: row; overflow-x: auto; padding: 0; }
    .tab-btn { border-left: none; border-bottom: 4px solid transparent; white-space: nowrap; padding: 15px 25px; }
    .tab-btn.active { border-bottom-color: var(--as-coral); }
    .as-specs-table th, .as-specs-table td { width: 50%; display: block; }
    .as-specs-table tr { display: flex; flex-wrap: wrap; }
    .archive-top-bar, div[style*="gap:20px; margin-bottom:30px"] { flex-direction: column !important; gap: 15px !important; }
    
    /* 8.4 - Hero Banner (Trang Archive & Page Sản Phẩm) */
    .hero-section__title { font-size: 2.5rem; }
    .archive-hero__inner, .site-main > section:first-child .container > div[style*="display: flex"], .site-main > section:first-child .container > div[style*="display: grid"] { 
        flex-direction: column !important; grid-template-columns: 1fr !important; text-align: center !important; gap: 30px !important; 
    }
    .archive-hero__desc { margin: 0 auto; }
    .site-main > section:first-child .container > div[style*="display: flex"] > div, .site-main > section:first-child .container > div[style*="display: grid"] > div {
        width: 100% !important; max-width: 100% !important; padding-right: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important;
    }
    .site-main > section:first-child h1 { font-size: 2.2rem !important; line-height: 1.3 !important; }
    .site-main > section:first-child img { width: 100% !important; max-width: 400px !important; height: auto !important; margin: 0 auto !important; }
    
    /* 8.5 - Lưới Sản Phẩm & Slider Vuốt Ngang (3 Khối & 4 Icon) */
    #product-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    
    div[style*="repeat(3"], .quick-cats-grid, div[style*="repeat(4"] {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 15px !important; padding-bottom: 15px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    div[style*="repeat(3"]::-webkit-scrollbar, .quick-cats-grid::-webkit-scrollbar, div[style*="repeat(4"]::-webkit-scrollbar { display: none; }
    div[style*="repeat(3"] > div, div[style*="repeat(3"] > a { flex: 0 0 82% !important; scroll-snap-align: start; max-width: none !important; }
    .quick-cats-grid > div, .quick-cats-grid > a, div[style*="repeat(4"] > div, div[style*="repeat(4"] > a { flex: 0 0 47% !important; scroll-snap-align: start; max-width: none !important; min-width: 100px !important; }
    
    /* 8.6 - Sub-nav Danh Mục Vuốt Ngang */
    .as-subnav ul { justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 10px !important; gap: 25px !important; -webkit-overflow-scrolling: touch; }
    .as-subnav ul::-webkit-scrollbar { height: 4px; }
    .as-subnav ul::-webkit-scrollbar-thumb { background: var(--as-border); border-radius: 4px; }
    .as-subnav ul li { flex-shrink: 0 !important; }
}

@media (max-width: 767px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-item { border-right: none; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .process-item:last-child { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 576px) {
    .footer-grid, .pre-footer-cta__inner, .pre-footer-cta__content, .filter-dropdowns { flex-direction: column; grid-template-columns: 1fr; }
    .pre-footer-cta__content svg { margin-right: 0; margin-bottom: 15px; }
    /* Lưới sản phẩm thật ép về 1 cột trên điện thoại nhỏ */
    #product-grid, .products-grid { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
   FIX GIAO DIỆN BỘ LỌC TRÊN MOBILE
   ========================================================================== */
@media (max-width: 991px) {
    .archive-sidebar { display: block !important; margin-bottom: 30px !important; }
    .archive-sidebar .as-filter-group, .archive-sidebar > div { margin-bottom: 15px !important; padding: 15px !important; background: #fff !important; border: 1px solid var(--as-border) !important; border-radius: 8px !important; }
    .archive-sidebar ul { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px 10px !important; }
    .archive-sidebar ul li { display: flex !important; align-items: center !important; margin: 0 !important; }
    .archive-sidebar label { display: flex !important; align-items: center !important; flex-direction: row !important; gap: 8px !important; font-size: 0.9rem !important; margin: 0 !important; cursor: pointer !important; text-align: left !important; width: 100% !important; }
    .archive-sidebar input[type="checkbox"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; margin: 0 !important; flex-shrink: 0 !important; -webkit-appearance: none !important; appearance: none !important; border: 1px solid #ccc !important; border-radius: 4px !important; background: #fff !important; }
    .archive-sidebar input[type="checkbox"]:checked { background-color: var(--as-navy) !important; border-color: var(--as-navy) !important; }
    .archive-sidebar input[type="checkbox"]:checked::before { content: "✓" !important; color: white !important; font-size: 12px !important; line-height: 1 !important; }
    .archive-sidebar .as-filter-clear, .archive-sidebar a[href*="san-pham"] { display: flex !important; width: 100% !important; justify-content: center !important; margin-top: 15px !important; padding: 12px !important; border: 1px dashed var(--as-coral) !important; border-radius: 6px !important; background: #fff !important; font-weight: 600 !important; color: var(--as-coral) !important; }
}

/* ==========================================================================
   CSS CHO THẺ SẢN PHẨM (.as-product-card)
   ========================================================================== */
.as-product-card { background: #fff; border: 1px solid var(--as-border); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.as-product-card__img { display: block; padding: 25px; text-align: center; border-bottom: 1px solid var(--as-border); }
.as-product-card__img img { width: 100%; height: 180px; object-fit: contain; }
.as-product-card__info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.as-product-card__title { font-size: 1.1rem; color: var(--as-navy); font-weight: 700; margin: 0 0 10px 0; line-height: 1.4; }
.as-product-card__title a { color: inherit; text-decoration: none; }
.as-product-card__specs { font-size: 0.85rem; color: var(--as-muted); margin-bottom: 20px; }
.as-spec-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--as-ice); padding-bottom: 8px; margin-bottom: 8px; }
.as-spec-row:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.as-spec-val { color: var(--as-navy); font-weight: 600; }
.as-product-card__btn { font-size: 0.85rem; font-weight: 700; color: var(--as-navy); text-decoration: none; display: flex; align-items: center; gap: 5px; margin-top: auto; text-transform: uppercase; }

@media (max-width: 576px) {
    #product-grid, .products-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .as-product-card__img img { height: 200px !important; }
    .as-product-card__info { padding: 15px !important; }
    .as-product-card__title { font-size: 1.2rem !important; }
    .as-product-card__title a { font-size: 16px; }
    .as-product-card__btn { font-size: 0.75rem; }
}

/* ==========================================================================
   BLOG ARCHIVE STYLES
   ========================================================================== */
.hover-zoom { transition: transform 0.5s ease; }
a:hover .hover-zoom { transform: scale(1.05); }
.blog-card h3 a:hover, .featured-main-post h2 a:hover, .side-post-item h3 a:hover { color: var(--as-primary) !important; }
.cat-btn:hover:not(.active) { border-color: var(--as-navy) !important; background: #f8f9fa !important; }
.blog-cats-nav::-webkit-scrollbar { display: none; }

@media (max-width: 991px) {
    .featured-grid { grid-template-columns: 1fr !important; }
    .posts-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .newsletter-box { flex-direction: column; text-align: center; padding: 30px 20px !important; }
    .newsletter-box > div { flex-direction: column; }
}
@media (max-width: 767px) {
    .blog-hero h1 { font-size: 2.5rem !important; }
    .side-post-item { grid-template-columns: 1fr !important; gap: 15px !important; }
}
@media (max-width: 576px) {
    .posts-grid { grid-template-columns: 1fr !important; }
    .newsletter-box form { flex-direction: column; }
    .newsletter-box button { width: 100%; }
}

/* ==========================================================================
   BLOG ARCHIVE & THẺ BÀI VIẾT
   ========================================================================== */
.blog-hero { background-color: var(--as-ice); padding: 130px 0 60px; border-bottom: 1px solid var(--as-border); position: relative; overflow: hidden; }
.blog-hero__watermark { position: absolute; right: 0; top: 0; opacity: 0.03; transform: scale(1.5) translate(10%, -10%); pointer-events: none; }
.blog-hero__watermark img { width: 500px; }
.blog-hero__container { position: relative; z-index: 2; }
.blog-hero .as-breadcrumbs { margin-bottom: 15px; font-size: 0.95rem; color: var(--as-muted); }
.blog-hero__tag { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; display: block; margin-bottom: 15px; }
.blog-hero__title { font-size: 3.5rem; color: var(--as-navy); font-weight: 800; margin-bottom: 15px; line-height: 1.2; }
.blog-hero__desc { font-size: 1.1rem; color: var(--as-muted); margin-bottom: 40px; max-width: 600px; }

.blog-search-form { max-width: 900px; display: flex; }
.blog-search-form .search-field { flex: 1; padding: 15px 20px; border: 1px solid var(--as-border); border-right: none; border-radius: 8px 0 0 8px; outline: none; font-size: 1rem; }
.blog-search-form button { background: var(--as-coral); color: #fff; border: none; padding: 0 25px; border-radius: 0 8px 8px 0; cursor: pointer; }

/* ==========================================================================
   FEATURED POSTS (BẢN CHUẨN GỐC)
   ========================================================================== */
.feat-grid-master { display: grid; grid-template-columns: 66% 30%; justify-content: space-between; align-items: stretch; }
.feat-main-wrap { display: grid; grid-template-columns: 75% 20%; justify-content: space-between; align-items: center; }
.feat-main-img { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; width: 100%; }
.feat-main-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-main-text { display: flex; flex-direction: column; justify-content: center; }

.feat-side-wrap { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.feat-side-item { display: flex; flex-direction: column; gap: 12px; }
.feat-side-img { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 25/9; width: 100%; }
.feat-side-img img { width: 100%; height: 100%; object-fit: cover; }

.post-cat { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px; margin-bottom: 8px !important; }
.feat-main-text h2 { font-size: 1.8rem; color: var(--as-navy); font-weight: 800; margin: 0 0 15px 0 !important; line-height: 1.3; }
.feat-side-text h3 { font-size: 1.1rem; color: var(--as-navy); font-weight: 700; margin: 0 0 10px 0 !important; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-main-text h2 a, .feat-side-text h3 a { color: inherit; transition: color 0.3s; }
.feat-main-text h2 a:hover, .feat-side-text h3 a:hover { color: var(--as-primary); }

.post-excerpt { color: var(--as-muted); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }
.read-more-btn { display: inline-flex; align-items: center; color: var(--as-navy); font-weight: 700; text-transform: uppercase; margin-top: 15px !important; font-size: 0.85rem; transition: color 0.3s ease; }
.read-more-btn:hover { color: var(--as-primary); }
.post-meta-date { display: flex; align-items: center; gap: 5px; color: var(--as-muted); font-size: 0.85rem; }

@media (max-width: 1200px) {
    .feat-grid-master { grid-template-columns: 65% 32%; }
    .feat-main-wrap { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 991px) {
    .feat-grid-master { grid-template-columns: 1fr; gap: 40px; }
    .feat-side-wrap { grid-template-columns: repeat(2, 1fr); display: grid; gap: 20px; }
}
@media (max-width: 767px) {
    .feat-main-wrap { grid-template-columns: 1fr; gap: 20px; }
    .feat-main-img { aspect-ratio: 16/10; }
}
@media (max-width: 576px) {
    .feat-side-wrap { grid-template-columns: 1fr; gap: 30px; }
}

/* --- CATEGORY NAV & LATEST POSTS --- */
.blog-cats-nav { display: flex; gap: 15px; margin-bottom: 40px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.blog-cats-nav::-webkit-scrollbar { display: none; }
.cat-btn { padding: 10px 25px; border-radius: 4px; font-weight: 600; white-space: nowrap; background: #fff; border: 1px solid var(--as-border); color: var(--as-navy); transition: all 0.3s ease; }
.cat-btn.active { background: var(--as-navy); color: #fff; border-color: var(--as-navy); }
.cat-btn:hover:not(.active) { border-color: var(--as-navy); background: #f8f9fa; }
.latest-posts-title { font-size: 2rem; color: var(--as-navy); font-weight: 800; margin-bottom: 30px; }
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* --- BLOG CARD --- */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card__img { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; margin-bottom: 15px; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card__content { flex-grow: 1; display: flex; flex-direction: column; }
.blog-card__cat { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.blog-card h3 { font-size: 1.3rem; color: var(--as-navy); font-weight: 700; margin: 0 0 10px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--as-primary); }
.blog-card__excerpt { color: var(--as-muted); font-size: 0.95rem; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { margin-top: auto; display: flex; align-items: center; gap: 5px; color: var(--as-muted); font-size: 0.85rem; }

/* --- NEWSLETTER CTA --- */
.newsletter-box { background: var(--as-white); border: 1px solid var(--as-border); border-radius: 12px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.newsletter-box__info { display: flex; align-items: center; gap: 20px; }
.newsletter-box__info img { width: 60px; }
.newsletter-box__info h3 { font-size: 1.5rem; color: var(--as-navy); font-weight: 700; margin: 0 0 5px 0; }
.newsletter-box__info p { color: var(--as-muted); margin: 0; font-size: 0.95rem; }
.newsletter-box form { display: flex; gap: 10px; width: 100%; max-width: 450px; }
.newsletter-box form input[type="email"] { flex: 1; padding: 12px 20px; border: 1px solid var(--as-border); border-radius: 4px; outline: none; }

/* ==========================================================================
   TRANG CHUYÊN MỤC (CATEGORY ARCHIVE) & CLASS RIÊNG
   ========================================================================== */
.cat-hero { background-color: var(--as-navy); padding: 100px 0 60px; position: relative; overflow: hidden; }
.cat-hero__watermark { position: absolute; right: 0; top: 0; opacity: 0.05; transform: scale(1.5) translate(10%, -10%); pointer-events: none; }
.cat-hero__watermark img { width: 500px; }
.cat-hero__container { position: relative; z-index: 2; padding-top: 50px }
.as-breadcrumbs--light, .as-breadcrumbs--light a { color: rgba(255,255,255,0.7); margin-bottom: 15px; font-size: 0.95rem; }
.as-breadcrumbs--light a:hover { color: #fff; }
.as-breadcrumbs--light .current { color: #fff; }
.cat-hero__tag { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; display: block; margin-bottom: 15px; }
.cat-hero__title { font-size: 3rem; color: #fff; font-weight: 800; margin-bottom: 15px; }
.cat-hero__desc { font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 600px; }

.cat-layout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }
.cat-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.widget { background: #fff; border: 1px solid var(--as-border); border-radius: 12px; padding: 30px; margin-bottom: 30px; }
.widget-title { font-size: 1.25rem; color: var(--as-navy); font-weight: 700; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--as-border); }

.widget-search form { display: flex; position: relative; }
.widget-search input { width: 100%; padding: 12px 40px 12px 15px; border: 1px solid var(--as-border); border-radius: 6px; outline: none; }
.widget-search button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--as-navy); cursor: pointer; }

.widget-categories ul { list-style: none; padding: 0; margin: 0; }
.widget-categories li { border-bottom: 1px solid var(--as-border); }
.widget-categories li:last-child { border-bottom: none; }
.widget-categories li a { display: flex; justify-content: space-between; padding: 12px 0; color: var(--as-navy); text-decoration: none; transition: all 0.3s ease; }
.widget-categories li a:hover, .widget-categories li.active a { color: var(--as-primary); font-weight: 600; }

.widget-popular ul { list-style: none; padding: 0; margin: 0; }
.widget-popular li { border-bottom: 1px dashed var(--as-border); padding: 15px 0; }
.widget-popular li:last-child { border-bottom: none; }
.widget-popular li a { color: var(--as-muted); text-decoration: none; line-height: 1.5; transition: color 0.3s ease; }
.widget-popular li a:hover { color: var(--as-primary); }

@media (max-width: 991px) {
    .cat-layout-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
    .cat-posts-grid { grid-template-columns: 1fr; }
    .cat-hero__title { font-size: 2.2rem; }
}

.cat-feat-wrap { margin-bottom: 60px; }
.cat-section-title { font-size: 1.5rem; color: var(--as-navy); font-weight: 800; margin-bottom: 30px; }
.cat-pagination { margin-top: 50px; }
.cat-empty-state { text-align: center; padding: 100px 0; }
.cat-empty-state h2 { color: var(--as-navy); margin-bottom: 15px; }

.feat-main-wrap-1 { display: grid; grid-template-columns: 60% 35%; justify-content: space-between; align-items: center; }
.feat-main-img-1 img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 18/10; border-radius: 10px; }
.cat-section-title-1 { padding-top: 20px; padding-bottom: 20px; }
.cat-sidebar { margin-top: 75px; }

/* ==========================================================================
   TRANG CHI TIẾT BÀI VIẾT (SINGLE POST)
   ========================================================================== */
.single-header { text-align: center; padding: 60px 0 40px; max-width: 800px; margin: 0 auto; }
.single-header .as-breadcrumbs { justify-content: center; margin-bottom: 20px; }
.single-cat-tag { color: var(--as-coral); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; display: inline-block; margin-bottom: 15px; }
.single-title { font-size: 3rem; color: var(--as-navy); font-weight: 800; line-height: 1.25; margin-bottom: 20px; }
.single-excerpt { font-size: 1.2rem; color: var(--as-muted); line-height: 1.6; margin-bottom: 25px; }
.single-meta { font-size: 0.95rem; color: var(--as-navy); font-weight: 600; }
.single-meta .meta-sep { margin: 0 10px; color: #ccc; }

.single-thumbnail { margin-bottom: 60px; }
.single-thumbnail img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 21/9; }

.single-layout-grid { display: grid; grid-template-columns: 80px 1fr 300px; gap: 50px; align-items: start; }
.sticky-box { position: sticky; top: 100px; }

.single-share { text-align: center; }
.share-label { display: block; font-weight: 700; color: var(--as-navy); font-size: 0.9rem; margin-bottom: 15px; }
.share-btn { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--as-border); color: var(--as-navy); background: #fff; margin: 0 auto 10px; transition: 0.3s; cursor: pointer; }
.share-btn:hover { background: var(--as-navy); color: #fff; border-color: var(--as-navy); }

.toc-box { background: #f8fafc; border-radius: 12px; padding: 30px; }
.toc-title { font-size: 1.25rem; color: var(--as-navy); font-weight: 700; margin-bottom: 20px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 15px; }
.toc-list li:last-child { margin-bottom: 0; }
.toc-list a { color: var(--as-navy); text-decoration: none; font-weight: 600; transition: 0.3s; line-height: 1.4; display: block; }
.toc-list a:hover { color: var(--as-primary); }

.as-entry-content { font-size: 1.1rem; line-height: 1.8; color: #333; }
.as-entry-content h2, .as-entry-content h3, .as-entry-content h4 { color: var(--as-navy); font-weight: 700; margin: 40px 0 20px; line-height: 1.3; }
.as-entry-content h2 { font-size: 1.8rem; }
.as-entry-content h3 { font-size: 1.4rem; }
.as-entry-content p { margin-bottom: 20px; }
.as-entry-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 30px 0; }
.as-entry-content ul, .as-entry-content ol { margin-bottom: 20px; padding-left: 20px; }
.as-entry-content li { margin-bottom: 10px; }

.as-box-note { background: #eef2ff; border-radius: 8px; padding: 20px; display: flex; gap: 15px; align-items: flex-start; margin-bottom: 30px; font-size: 0.95rem; }
.as-box-navy { background: var(--as-navy); color: #fff; border-radius: 8px; padding: 30px; display: flex; gap: 20px; align-items: center; margin-bottom: 30px; }
.as-box-navy h4 { margin: 0 0 5px 0 !important; color: #fff !important; }
.as-box-navy p { margin: 0 !important; font-size: 0.95rem; opacity: 0.9; }

.as-box-cta { border: 1px solid var(--as-border); border-radius: 8px; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.as-box-cta-info { display: flex; align-items: center; gap: 20px; }
.as-box-cta h4 { margin: 0 0 5px 0 !important; }
.as-box-cta p { margin: 0 !important; font-size: 0.95rem; }

.author-bio-box { border: 1px solid var(--as-border); border-radius: 8px; padding: 30px; display: flex; align-items: center; gap: 20px; margin-top: 50px; }
.author-icon { width: 60px; height: 60px; background: #f8fafc; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--as-navy); flex-shrink: 0; }
.author-info h4 { margin: 0 0 5px; font-size: 1.1rem; color: var(--as-navy); font-weight: 700; }
.author-info p { margin: 0; font-size: 0.95rem; color: var(--as-muted); line-height: 1.5; }

@media (max-width: 1200px) {
    .single-layout-grid { grid-template-columns: 1fr 300px; gap: 40px; }
    .single-share { display: none; }
}
@media (max-width: 991px) {
    .single-title { font-size: 2.5rem; }
    .single-layout-grid { grid-template-columns: 1fr; }
    .sticky-box { position: static; }
    .as-box-cta { flex-direction: column; text-align: center; }
    .as-box-cta-info { flex-direction: column; }
}
@media (max-width: 767px) {
    .single-title { font-size: 2rem; }
    .single-excerpt { font-size: 1.1rem; }
}
/* --- Chỉnh Icon cho các Box động --- */
.as-box-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mt-5 { margin-top: 3rem !important; }

/* ==========================================================================
   CHI TIẾT GIẢI PHÁP (SINGLE SOLUTION)
   ========================================================================== */
.sol-section { padding: 80px 0; }
.sol-sec-title { font-size: 2.5rem; color: var(--as-navy); font-weight: 800; margin-bottom: 50px; }
.bg-ice { background-color: #fff; }
.bg-white { background-color: #fff; }

/* 1. Hero Section */
.sol-hero { position: relative; padding: 150px 0 100px; background-size: cover; background-position: center; color: #fff; }
.sol-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,25,47,0.9) 0%, rgba(10,25,47,0.4) 100%); }
.sol-hero-content { position: relative; z-index: 2; }
.sol-hero .as-breadcrumbs { margin-bottom: 20px; }
.sol-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; color: #fff; }
.sol-desc { font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; opacity: 0.9; }

/* 2. Bài toán năng lượng */
.sol-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sol-problem-text h2 { font-size: 2.5rem; color: var(--as-navy); font-weight: 800; margin-bottom: 25px; line-height: 1.3; }
.sol-problem-desc { color: var(--as-muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 30px; }
.sol-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sol-feat-item { display: flex; align-items: center; gap: 15px; background: var(--as-ice); padding: 15px; border-radius: 8px; }
.sol-feat-item p { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--as-navy); }
.sol-icon-wrap { width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--as-coral); font-size: 1.2rem; flex-shrink: 0; }
.sol-problem-img img { width: 100%; border-radius: 12px; object-fit: cover; }

/* 3. Cấu trúc giải pháp */
.sol-structure-flow img { max-width: 100%; height: auto; }

/* 4. Thành phần hệ thống */
.sol-components-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sol-comp-card { background: var(--as-ice); border-radius: 12px; overflow: hidden; text-align: left; transition: 0.3s; }
.sol-comp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.sol-comp-img { background: #eef2f6; padding: 20px; display: flex; justify-content: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.sol-comp-img img { height: 180px; object-fit: contain; mix-blend-mode: multiply; }
.sol-comp-card h3 { font-size: 1.25rem; color: var(--as-navy); font-weight: 700; margin: 20px 20px 10px; }
.sol-comp-card p { font-size: 0.95rem; color: var(--as-muted); margin: 0 20px 20px; line-height: 1.6; }

/* 5. Lợi ích (Banner tối) */
.sol-benefits { position: relative; background-size: cover; background-position: center; background-attachment: fixed; color: #fff; }
.sol-benefits-overlay { position: absolute; inset: 0; background: rgba(10,25,47,0.85); }
.sol-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.sol-ben-item { text-align: left; }
.sol-ben-icon { height: 60px; margin-bottom: 20px; }
.sol-ben-item h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; color: var(--as-coral); }
.sol-ben-item p { font-size: 1rem; opacity: 0.85; line-height: 1.6; margin: 0; }

/* 6. Mô hình vận hành */
.sol-models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sol-model-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.sol-model-card img { width: 100%; height: 220px; object-fit: cover; }
.sol-model-info { padding: 25px; }
.sol-model-info h3 { font-size: 1.3rem; color: var(--as-navy); font-weight: 700; margin-bottom: 10px; }
.sol-model-info p { color: var(--as-muted); margin: 0; line-height: 1.6; }

/* 7. Quy trình */
.sol-process-flex { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.sol-step { flex: 1; text-align: left; position: relative; }
.step-num { width: 30px; height: 30px; background: var(--as-navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; position: absolute; top: -15px; left: 20px; border: 3px solid var(--as-ice); z-index: 2; }
.step-box { background: #fff; border: 1px solid var(--as-border); border-radius: 8px; padding: 25px 15px 15px; display: flex; gap: 15px; }
.step-box i { font-size: 2rem; color: var(--as-coral); flex-shrink: 0; }
.step-box h4 { font-size: 1.1rem; color: var(--as-navy); font-weight: 700; margin-bottom: 5px; }
.step-box p { font-size: 0.85rem; color: var(--as-muted); margin: 0; line-height: 1.4; }
.sol-step-arrow { color: #ccc; font-size: 1.5rem; font-weight: bold; padding-top: 10px; }

/* 8. Form CTA */
.sol-cta-wrapper { padding: 0 0 60px; }
.sol-cta-box { background: var(--as-navy); border-radius: 12px; padding: 50px; display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; color: #fff; }
.cta-left h2 { font-size: 2rem; font-weight: 800; margin-bottom: 15px; }
.cta-left p { opacity: 0.8; font-size: 1.05rem; margin: 0; line-height: 1.6; }
.cta-right form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.cta-right form input { padding: 12px 15px; border-radius: 4px; border: none; outline: none; width: 100%; }
.cta-right form .full-w { grid-column: span 2; }
.cta-right form button { background: var(--as-coral); color: #fff; border: none; border-radius: 4px; font-weight: 700; padding: 12px; cursor: pointer; transition: 0.3s; }
.cta-right form button:hover { background: #d64a2f; }
.cta-note { font-size: 0.85rem; opacity: 0.6; margin: 15px 0 0 0; display: flex; align-items: center; gap: 5px; }

/* Responsive */
@media (max-width: 1200px) {
    .sol-components-grid { grid-template-columns: repeat(2, 1fr); }
    .sol-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .sol-process-flex { flex-direction: column; align-items: flex-start; gap: 30px; }
    .sol-step-arrow { display: none; }
    .sol-step { width: 100%; }
}
@media (max-width: 991px) {
    .sol-problem-grid, .sol-cta-box { grid-template-columns: 1fr; gap: 40px; }
    .sol-models-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-right form { grid-template-columns: 1fr 1fr; }
    .cta-right form .full-w { grid-column: span 1; }
}
@media (max-width: 767px) {
    .sol-title { font-size: 2.5rem; }
    .sol-features-grid, .sol-models-grid, .cta-right form { grid-template-columns: 1fr; }
    .sol-sec-title, .sol-problem-text h2 { font-size: 2rem; }
}

/* --- Sơ đồ năng lượng động (Dynamic Flow) --- */
.sol-dynamic-flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 40px;
}
.dflow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 140px;
}
.dflow-icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    color: var(--as-navy);
    transition: transform 0.3s ease;
}
.dflow-item:hover .dflow-icon {
    transform: translateY(-5px);
    color: var(--as-coral);
}
.dflow-icon svg { width: 40px; height: 40px; }
.dflow-name {
    font-size: 1rem;
    color: var(--as-navy);
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
.dflow-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767px) {
    .sol-dynamic-flow-wrapper { flex-direction: column; gap: 20px; }
    .dflow-arrow { transform: rotate(90deg); margin: 10px 0; }
}

/* Styling cho Form của class AutoSolar_Contact_Form */
.as-contact-form-wrapper .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}
.as-contact-form-wrapper button {
    width: 100%;
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}
/* Nếu form đặt trong nền tối (navy) thì chỉnh màu chữ */
.sol-cta-box .as-contact-form-wrapper label { color: #fff; }
.sol-cta-box .as-contact-form-wrapper .form-control { background: #fff; border: none; }

/* --- Tinh chỉnh Form liên hệ chuẩn 3 cột thẳng tắp --- */
#as-contact-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

/* Xóa bỏ cấu trúc flex cũ trong các form-row của class-contact-form.php */
#as-contact-form .form-row {
    display: contents !important;
}

#as-contact-form .form-group {
    margin-top: 0 !important;
    min-width: 0 !important;
}

/* Ép riêng ô "Nội dung chi tiết" chiếm 2 cột đầu cho cân xứng */
#as-contact-form .form-group:has(#c_message) {
    grid-column: span 2;
}
#as-contact-form #c_message {
    height: 110px; /* Cân chỉnh lại chiều cao textarea cho đẹp */
    resize: none;
}

/* Gom nhóm phần Checkbox chính sách và Nút Gửi sang cột thứ 3 cho gọn gàng */
.as-form-bottom-group {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 15px;
    height: 100%;
}

/* Nút gửi full chiều rộng cột, thẳng hàng tuyệt đối */
#as-contact-form #c-submit-btn {
    width: 100% !important;
    margin: 0;
}

/* Responsive trên mobile/tablet */
@media (max-width: 991px) {
    #as-contact-form {
        grid-template-columns: 1fr;
    }
    #as-contact-form .form-group:has(#c_message),
    .as-form-bottom-group {
        grid-column: span 1;
    }
}

/* --- Form ngang trang Giải pháp --- */
.sol-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
}
.sol-input {
    background: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 0.95krem;
    color: #333;
    outline: none;
    width: 100%;
}
.sol-input::placeholder { color: #888; }
.sol-input-wide {
    grid-column: span 3; /* Ô mô tả chiếm 3 cột hàng trên, đẩy nút sang cột 4 */
}
.sol-submit-btn {
    background: #ff5722;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
    height: 100%;
}
.sol-submit-btn:hover { background: #e64a19; }
.sol-form-note {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive cho mobile/tablet */
@media (max-width: 991px) {
    .sol-form-grid {
        grid-template-columns: 1fr;
    }
    .sol-input-wide {
        grid-column: span 1;
    }
}

/* --- Ép chuẩn bố cục form ngang trang Giải pháp --- */
#as-solution-contact-form .sol-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    gap: 15px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ép 3 ô input hàng trên giãn đều 100% chiều rộng cột */
#as-solution-contact-form .sol-form-grid .sol-input:not(.sol-input-wide) {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    box-sizing: border-box !important;
}

/* Ô mô tả chiếm trọn 3 cột đầu ở hàng dưới */
#as-solution-contact-form .sol-form-grid .sol-input-wide {
    grid-column: span 3 !important;
    width: 100% !important;
    height: 48px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    box-sizing: border-box !important;
}

/* Nút gửi nằm ở cột thứ 4, cao chuẩn chỉnh */
#as-solution-contact-form .sol-submit-btn {
    grid-column: 4 / 5 !important;
    background: #ff5722 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 24px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#as-solution-contact-form .sol-submit-btn:hover {
    background: #e64a19 !important;
}

#as-solution-contact-form .sol-form-note {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.82rem !important;
    margin-top: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Responsive cho Mobile / Tablet */
@media (max-width: 991px) {
    #as-solution-contact-form .sol-form-grid {
        grid-template-columns: 1fr !important;
    }
    #as-solution-contact-form .sol-form-grid .sol-input-wide {
        grid-column: span 1 !important;
    }
    #as-solution-contact-form .sol-submit-btn {
        grid-column: span 1 !important;
    }
}

/* --- Ghi đè CSS chung của theme đang làm bóp méo form giải pháp --- */
.cta-right form input[type="text"],
.cta-right form input[type="tel"],
.cta-right form input[type="email"] {
    width: 100% !important;
    max-width: none !important;
}
/* =========================================
   TRANG ARCHIVE GIẢI PHÁP - CSS CHUẨN MẪU
========================================= */

/* Hero Archive */
.arch-hero {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: left;
}
.arch-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.4); /* Mờ vừa đủ để thấy chữ */
}
.arch-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}
.arch-hero h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.2; font-weight: 800; }
.arch-hero p { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.95; line-height: 1.6; }
.btn--coral { display: inline-block; padding: 12px 24px; background: #ff5722; color: #fff; text-decoration: none; font-weight: 600; border-radius: 4px; transition: 0.3s; }
.btn--coral:hover { background: #e64a19; }

/* Intro Section */
.arch-intro { 
    padding: 80px 0 60px; 
    background: #fff; 
    text-align: center; /* Thêm dòng này để ép toàn bộ khối ra giữa */
}
.arch-subtitle { color: #ff5722; font-weight: bold; font-size: 0.9rem; letter-spacing: 1px; display: block; margin-bottom: 15px; text-transform: uppercase; }
.arch-intro h2 { font-size: 2.2rem; color: var(--as-navy, #0a192f); margin-bottom: 20px; font-weight: 700; }
.arch-desc { color: #555; font-size: 1.1rem; line-height: 1.6; max-width: 700px; margin: 0 auto; }

/* Danh sách Giải pháp (Zigzag) */
.arch-list { padding-bottom: 80px; background: #fff; }
.arch-list-wrapper { display: flex; flex-direction: column; gap: 40px; }
.arch-card { display: flex; align-items: stretch; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 25px rgba(0,0,0,0.06); }
.arch-card.row-reverse { flex-direction: row-reverse; }

.arch-card-img { flex: 1; min-width: 50%; }
.arch-card-img a { display: block; height: 100%; }
.arch-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.arch-card-content-wrap { flex: 1; align-items: center; justify-content: center; background: #f8fafc; }
.arch-card-content { padding: 50px; max-width: 450px; width: 100%; }

.arch-card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.arch-icon-box { width: 50px; height: 50px; background: #fff; color: var(--as-navy, #0a192f); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.arch-card-header h3 { margin: 0; font-size: 1.6rem; }
.arch-card-header a { color: var(--as-navy, #0a192f); text-decoration: none; font-weight: 700; }

/* Bullets */
.arch-card-bullets { list-style: none; padding: 0; margin: 0 0 35px 0; }
.arch-card-bullets li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; color: #444; font-size: 1rem; line-height: 1.5; }
.bullet-check { width: 22px; height: 22px; background: var(--as-navy, #0a192f); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }

/* Link */
.arch-btn-link { color: #ff5722; font-weight: 700; text-decoration: none; font-size: 1rem; transition: 0.3s; display: inline-flex; align-items: center; gap: 5px; }
.arch-btn-link:hover { color: #e64a19; gap: 8px; }

/* Process Section */
.arch-process { padding: 80px 0; background: #f4f7fb; }
.arch-process-flex { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 40px; }
.arch-step { flex: 1; padding: 0 15px; position: relative; z-index: 2; }
.arch-step-icon { width: 70px; height: 70px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--as-navy, #0a192f); box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
.arch-step h4 { font-size: 1.1rem; color: var(--as-navy, #0a192f); margin-bottom: 10px; font-weight: 700; }
.arch-step p { font-size: 0.95rem; color: #555; line-height: 1.5; }
.arch-step-line { flex: 0 0 60px; height: 1px; border-top: 2px dashed #d1d9e6; margin-top: 35px; z-index: 1; }

/* Bottom CTA */
.arch-bottom-cta { position: relative; padding: 70px 0; background-size: cover; background-position: center; color: #fff; }
.arch-cta-overlay { position: absolute; inset: 0; background: rgba(10, 25, 47, 0.9); }
.arch-cta-content { position: relative; z-index: 2; }
.arch-cta-content h2 { font-size: 2.2rem; margin-bottom: 15px; font-weight: 700; }
.arch-cta-content p { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.9; }

/* Responsive Archive */
@media (max-width: 991px) {
    .arch-hero { text-align: center; }
    .arch-hero-content { margin: 0 auto; }
    .arch-card, .arch-card.row-reverse { flex-direction: column; }
    .arch-card-content-wrap { padding: 20px 0; }
    .arch-process-flex { flex-direction: column; gap: 40px; }
    .arch-step-line { display: none; }
}

/* =========================================
   CÁC BIẾN MÀU CƠ BẢN (NẾU CHƯA CÓ)
========================================= */
:root {
    --as-navy: #0a192f;
    --as-coral: #ff5722;
    --as-gray: #475569;
    --as-light-bg: #f8fafc;
    --as-border: #e2e8f0;
}

/* =========================================
   TRANG 404
========================================= */
.error-404-hero {
    background-image: url('https://placehold.co/1920x800/e2e8f0/64748b?text=Anh+Nen+Inverter+404');
    padding: 120px 0;
    background-size: cover;
    background-position: right center;
}
.error-404-content h1 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--as-navy);
    line-height: 1.2;
    margin-bottom: 20px;
}
.error-404-content p {
    font-size: 1.1rem;
    color: var(--as-gray);
    margin-bottom: 40px;
}
.error-actions {
    display: flex;
    gap: 20px;
}
.btn--outline {
    background: transparent;
    color: var(--as-navy);
    border: 1px solid var(--as-navy);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}
.btn--outline:hover {
    background: var(--as-navy);
    color: #fff;
}
.quick-links {
    background: var(--as-light-bg);
    padding: 40px 0;
    border-top: 1px solid var(--as-border);
}
.quick-links ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 15px;
}
.quick-links-title {
    font-weight: 700;
    color: var(--as-navy);
    font-size: 1.1rem;
}
.quick-links a {
    color: var(--as-gray);
    text-decoration: none;
}
.quick-links a:hover {
    color: var(--as-coral);
}

/* =========================================
   TRANG GIỚI THIỆU
========================================= */
.page-hero-about {
    background-image: url('https://placehold.co/1920x600/0a192f/ffffff?text=Anh+Nen+Gioi+Thieu');
}
.page-hero-about .arch-hero-content {
    max-width: 800px;
    margin: 0 auto;
}
.page-hero-about h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}
.page-hero-about p {
    font-size: 1.2rem;
    opacity: 0.9;
}
.about-intro {
    padding: 80px 0;
}
.about-intro-flex {
    display: flex;
    gap: 50px;
    align-items: center;
}
.intro-content, .intro-image {
    flex: 1;
}
.intro-content h2 {
    font-size: 2.5rem;
    color: var(--as-navy);
    margin-bottom: 20px;
}
.intro-image img {
    border-radius: 12px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.about-services {
    padding: 80px 0;
}
.about-services h2 {
    font-size: 2.5rem;
    color: var(--as-navy);
    margin-bottom: 50px;
}
.services-grid {
    display: flex;
    gap: 30px;
}
.service-card {
    flex: 1;
    background: #fff;
    padding: 40px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.service-card img {
    height: 60px;
    margin-bottom: 20px;
}
.service-card h3 {
    color: var(--as-navy);
    margin-bottom: 15px;
}
.service-card p {
    color: #555;
}
.cta-about {
    background: var(--as-navy);
    padding: 60px 0;
}
.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-text {
    color: #fff;
}
.cta-text h2 {
    margin: 0 0 10px 0;
}
.cta-text p {
    margin: 0;
    opacity: 0.8;
}

/* =========================================
   TRANG LIÊN HỆ
========================================= */
.page-hero-contact {
    background-image: url('https://placehold.co/1920x400/0a192f/ffffff?text=Anh+Nen+Lien+He');
    padding: 100px 0;
}
.hero-z-index {
    position: relative;
    z-index: 2;
}
.page-hero-contact h1 {
    color: #fff;
    font-size: 3rem;
}
.page-hero-contact p {
    color: #fff;
    font-size: 1.2rem;
    opacity: 0.9;
}
.contact-content {
    padding: 80px 0;
    background: #fff;
}
.contact-flex {
    display: flex;
    gap: 60px;
}
.contact-info, .contact-form-wrap {
    flex: 1;
}
.contact-info h2 {
    color: var(--as-navy);
    font-size: 2.2rem;
    margin-bottom: 40px;
}
.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.info-item img {
    width: 40px;
    height: 40px;
}
.info-item h4 {
    color: var(--as-navy);
    margin: 0 0 5px 0;
}
.info-item p {
    color: #555;
    margin: 0;
}
.direct-contact {
    margin-top: 40px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--as-navy);
    line-height: 2;
}
.contact-form-wrap {
    background: var(--as-light-bg);
    padding: 40px;
    border-radius: 12px;
}

/* =========================================
   TRANG TÌM KIẾM
========================================= */
.search-header {
    background: var(--as-navy);
    color: #fff;
    padding: 60px 0;
}
.breadcrumbs {
    margin-bottom: 10px;
    opacity: 0.8;
}
.search-header h1 {
    margin-bottom: 30px;
}
.search-form {
    display: flex;
    max-width: 600px;
}
.search-field {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 4px 0 0 4px;
}
.search-submit {
    border-radius: 0 4px 4px 0;
    border: none;
}
.search-layout {
    padding: 60px 0;
    background: var(--as-light-bg);
}
.search-layout-flex {
    display: flex;
    gap: 40px;
}
.search-sidebar {
    width: 250px;
    flex-shrink: 0;
}
.search-sidebar strong {
    color: var(--as-coral);
}
.search-filters {
    list-style: none;
    padding: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--as-border);
    margin-top: 15px;
}
.search-filters li {
    padding: 15px 20px;
    border-bottom: 1px solid var(--as-border);
    color: var(--as-gray);
    cursor: pointer;
}
.search-filters li.active, .search-filters li:hover {
    font-weight: bold;
    color: var(--as-navy);
}
.search-results-content {
    flex: 1;
}
.result-group {
    margin-bottom: 50px;
}
.result-group h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--as-navy);
}
.result-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    border: 1px solid var(--as-border);
}
.result-thumb {
    width: 120px;
    height: auto;
    object-fit: contain;
}
.result-badge {
    color: var(--as-coral);
    font-size: 0.8rem;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
.result-item-info h3 {
    margin: 0;
}
.result-item-info h3 a {
    color: var(--as-navy);
    text-decoration: none;
}
.result-item-info h3 a:hover {
    color: var(--as-coral);
}

/* =========================================
   RESPONSIVE CHUNG CHO 4 TRANG
========================================= */
@media (max-width: 991px) {
    .about-intro-flex, .services-grid, .contact-flex, .search-layout-flex, .cta-flex {
        flex-direction: column;
    }
    .search-sidebar {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .error-404-content h1, .page-hero-about h1 {
        font-size: 2.5rem;
    }
    .quick-links ul {
        flex-direction: column;
        align-items: flex-start;
    }
    .error-actions {
        flex-direction: column;
    }
    .result-item {
        flex-direction: column;
    }
    .result-thumb {
        width: 100%;
        max-height: 200px;
    }
}

/* =========================================
   CÁC CLASS DÙNG CHUNG
========================================= */
.section-padding { padding: 80px 0; }
.bg-light { background-color: #f8fafc; }
.text-white { color: #fff !important; }
.text-center { text-align: center; }
.mb-50 { margin-bottom: 50px; }
.mt-20 { margin-top: 20px; display: inline-block; }
.relative-z { position: relative; z-index: 2; }

.section-subtitle {
    color: var(--as-coral, #ff5722);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.section-title {
    font-size: 2.5rem;
    color: var(--as-navy, #0a192f);
    margin-bottom: 25px;
    font-weight: 800;
    line-height: 1.3;
}
.link-with-arrow {
    color: var(--as-coral, #ff5722);
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.link-with-arrow:hover { color: #e64a19; gap: 10px; }

/* Grid 2 Cột chung */
.about-grid-2 { display: flex; gap: 60px; align-items: center; }
.about-text-col, .about-img-col { flex: 1; }
.about-text-col p { color: #475569; font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; }
.about-img-col img { width: 100%; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); display: block; }

/* =========================================
   HERO GIỚI THIỆU
========================================= */
.about-hero {
    position: relative;
    /* Tăng số 140px cũ lên 180px hoặc 200px tùy mắt bro thấy vừa */
    padding: 190px 0 250px; 
    background-size: cover;
    background-position: center;
    color: #fff;
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,25,47,0.85) 0%, rgba(10,25,47,0.4) 100%);
}
.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
.about-hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.about-hero p { font-size: 1.2rem; opacity: 0.9; line-height: 1.6; }

/* =========================================
   CHÚNG TÔI LÀM GÌ (3 Cột)
========================================= */
.services-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}
.service-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 25px;
    color: var(--as-navy, #0a192f);
}
.service-card h3 { color: var(--as-navy, #0a192f); margin-bottom: 15px; font-size: 1.4rem; }
.service-card p { color: #64748b; line-height: 1.6; }

/* =========================================
   GIÁ TRỊ TẠO NÊN (Nền tối, 4 cột)
========================================= */
.about-values {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.about-values-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.85); /* Phủ đen mờ */
}
.values-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    color: #fff;
}
.value-item {
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 0 20px;
}
.value-item:last-child { border-right: none; }
.value-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    color: #fff;
}
.value-item h3 { font-size: 1.2rem; margin-bottom: 15px; font-weight: 700; }
.value-item p { font-size: 0.95rem; opacity: 0.8; line-height: 1.5; }

/* =========================================
   QUY TRÌNH ĐỒNG HÀNH (Steps)
========================================= */
.process-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
}
.process-line {
    position: absolute;
    top: 40px; /* Căn giữa tim của hình tròn số */
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed #cbd5e1;
    z-index: 1;
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}
.process-step { display: flex; flex-direction: column; align-items: center; }
.step-number {
    width: 40px;
    height: 40px;
    background: var(--as-navy, #0a192f);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 25px;
    box-shadow: 0 0 0 10px #fff; /* Tạo viền trắng đè lên đường gạch đứt */
}
.step-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    color: var(--as-navy, #0a192f);
}
.process-step h4 { color: var(--as-navy, #0a192f); font-size: 1.1rem; margin-bottom: 10px; font-weight: 700; }
.process-step p { color: #64748b; font-size: 0.9rem; line-height: 1.5; padding: 0 10px; }

/* =========================================
   BOTTOM CTA 
========================================= */
.about-bottom-cta {
    background: var(--as-navy, #0a192f);
    padding: 60px 0;
}
.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-text { color: #fff; }
.cta-text h2 { margin: 0 0 10px 0; font-size: 2rem; font-weight: 700; }
.cta-text p { margin: 0; opacity: 0.8; font-size: 1.1rem; }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
    .about-hero h1 { font-size: 2.5rem; }
    .about-grid-2 { flex-direction: column; text-align: center; }
    .services-grid-3, .values-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .value-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px; }
    .value-item:last-child { border-bottom: none; }
    .process-line { display: none; } /* Ẩn gạch ngang trên mobile */
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .cta-flex { flex-direction: column; text-align: center; gap: 20px; }
}

@media (max-width: 767px) {
    .services-grid-3, .values-grid-4, .process-steps { grid-template-columns: 1fr; }
    .value-item { padding-bottom: 20px; }
}

/* =========================================
   TRANG LIÊN HỆ - CÁC BIẾN DÙNG CHUNG
========================================= */
.text-coral { color: var(--as-coral, #ff5722) !important; }
.bg-white { background-color: #fff; }

/* =========================================
   1. HERO LIÊN HỆ
========================================= */
.contact-hero {
    position: relative;
    padding: 190px 0 100px;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,25,47,0.85) 0%, rgba(10,25,47,0.3) 100%);
}
.contact-hero-content {
    max-width: 650px;
}
.contact-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}
.contact-hero-content p {
    font-size: 1.2rem;
    opacity: 0.95;
    line-height: 1.6;
}

/* =========================================
   2. MAIN CONTACT (INFO & FORM)
========================================= */
.contact-grid-2 {
    display: flex;
    gap: 60px;
}
.contact-info-col { flex: 1; padding-right: 40px; }
.contact-form-col { flex: 1.2; }

/* Cột thông tin */
.support-list { margin-bottom: 40px; }
.support-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-start;
}
.support-icon {
    width: 45px;
    height: 45px;
    color: var(--as-navy, #0a192f);
    flex-shrink: 0;
}
.support-text h4 {
    color: var(--as-navy, #0a192f);
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    font-weight: 700;
}
.support-text p { color: #64748b; margin: 0; font-size: 0.95rem; }

.contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-details li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--as-navy, #0a192f);
    font-size: 1.1rem;
}
.contact-details li svg {
    width: 24px;
    height: 24px;
    color: var(--as-navy, #0a192f);
}

/* Cột Form */
.as-contact-form {
    background: #f4f7fb;
    padding: 40px;
    border-radius: 12px;
}
.form-row-2 {
    display: flex;
    gap: 20px;
}
.form-group {
    margin-bottom: 20px;
    flex: 1;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--as-navy, #0a192f);
    font-weight: 600;
    font-size: 0.9rem;
}
.as-contact-form input[type="text"],
.as-contact-form input[type="tel"],
.as-contact-form input[type="email"],
.as-contact-form select,
.as-contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
    color: #334155;
    background: #fff;
    transition: 0.3s;
}
.as-contact-form input:focus,
.as-contact-form select:focus,
.as-contact-form textarea:focus {
    outline: none;
    border-color: var(--as-coral, #ff5722);
    box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.1);
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    color: #64748b;
    cursor: pointer;
}
.checkbox-group input { width: 18px; height: 18px; }
.btn-submit {
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}

/* =========================================
   3. QUY TRÌNH TIẾP NHẬN
========================================= */
.receive-process-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.receive-step {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    text-align: left;
}
.receive-icon {
    width: 60px;
    height: 60px;
    background: var(--as-navy, #0a192f);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 15px;
}
.receive-text .step-num {
    font-weight: 800;
    font-size: 1rem;
    display: block;
    margin-bottom: 5px;
}
.receive-text h4 {
    color: var(--as-navy, #0a192f);
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}
.receive-text p {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}
.receive-arrow {
    width: 40px;
    flex-shrink: 0;
}
.receive-arrow svg { width: 100%; }

/* =========================================
   4. BOTTOM CTA
========================================= */
.contact-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
}
.contact-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,25,47,0.9) 0%, rgba(10,25,47,0.4) 100%);
}
.contact-cta-content { max-width: 600px; }
.contact-cta-content h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 15px; }
.contact-cta-content p { font-size: 1.1rem; opacity: 0.9; line-height: 1.6; margin-bottom: 25px; }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
    .contact-grid-2 { flex-direction: column; }
    .contact-info-col { padding-right: 0; }
    .receive-process-wrapper { flex-direction: column; align-items: flex-start; gap: 40px; }
    .receive-arrow { display: none; } /* Ẩn mũi tên ngang trên mobile */
}
@media (max-width: 767px) {
    .contact-hero-content h1 { font-size: 2.5rem; }
    .form-row-2 { flex-direction: column; gap: 0; }
}
/* =========================================
   SEARCH MODAL
========================================= */
.as-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(10, 25, 47, 0.95); /* Màu nền navy trong suốt */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.as-search-modal.is-active {
    opacity: 1;
    visibility: visible;
}
.search-modal-inner {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    position: relative;
    transform: translateY(-30px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.as-search-modal.is-active .search-modal-inner {
    transform: translateY(0);
}
.search-close {
    position: absolute;
    top: -50px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}
.search-close:hover {
    color: var(--as-coral, #ff5722);
    transform: scale(1.1);
}
.search-modal-title {
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
}
.search-form-modal {
    position: relative;
    display: flex;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.search-form-modal input {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 15px 50px 15px 0;
}
.search-form-modal input:focus {
    outline: none;
}
.search-form-modal input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.search-form-modal button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}
.search-form-modal button:hover {
    color: var(--as-coral, #ff5722);
}
.search-quick-links {
    margin-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}
.search-quick-links span {
    margin-right: 10px;
}
.search-quick-links a {
    color: #fff;
    text-decoration: none;
    margin-right: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.4);
    transition: 0.2s;
}
.search-quick-links a:hover {
    color: var(--as-coral, #ff5722);
    border-color: var(--as-coral, #ff5722);
}
.search-trigger {
    position: relative;
    z-index: 999;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 5px;
}
/* =========================================
   SỬA LỖI LỆCH CHECKBOX SIDEBAR SẢN PHẨM (CLASS CHUẨN)
========================================= */

/* Bỏ style chấm tròn của ul */
.as-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Đảm bảo thẻ label nằm ngang và căn giữa checkbox + text */
.as-filter-list label {
    display: flex !important;
    align-items: center !important; 
    gap: 8px; /* Khoảng cách giữa ô vuông và chữ */
    cursor: pointer;
    width: 100%;
}

/* Xóa margin của ô vuông để tránh đẩy lệch */
.as-filter-list input[type="checkbox"] {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    flex-shrink: 0; /* Giữ ô vuông không bị méo */
    cursor: pointer;
}

/* Định dạng lại thẻ span chứa chữ */
.as-filter-list label span {
    display: block; /* Ép nó không tự bẻ dòng */
    margin: 0;
    padding: 0;
    font-weight: 400;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1; /* Căn cho chữ thẳng tắp với checkbox */
}

/* Thêm khoảng cách giữa các dòng (các tùy chọn lọc) */
.as-filter-list li {
    margin-bottom: 12px; /* Tăng giảm số này để thấy khoảng cách vừa mắt nhất */
}

/* Đảm bảo thẻ li cuối cùng không bị dư khoảng trống thừa */
.as-filter-list li:last-child {
    margin-bottom: 0;
}