/* Bundle tự động sinh bởi build-theme-bundle.php lúc 2026-09-24 04:15:39 — KHÔNG sửa tay file này, sửa file gốc rồi chạy lại script. */

/* ===== css/core/hctclient04-ui-core.css ===== */
:root {
    --hctclient04-z-base: 1;
    --hctclient04-z-dropdown: 900;
    --hctclient04-z-backdrop: 1000;
    --hctclient04-z-mobile-menu: 1010;
    --hctclient04-z-lightbox: 1040;
    --hctclient04-z-popup: 1100;
    --hctclient04-z-modal: 1120;
    --hctclient04-z-loading: 1200;
    --hctclient04-z-feedback: 1300;
    --hctclient04-z-toast: 1310;
    --hctclient04-radius-sm: 6px;
    --hctclient04-radius-md: 10px;
    --hctclient04-radius-lg: 16px;
    --hctclient04-space-1: 4px;
    --hctclient04-space-2: 8px;
    --hctclient04-space-3: 12px;
    --hctclient04-space-4: 16px;
    --hctclient04-space-5: 24px;
    --hctclient04-space-6: 32px;
    --hctclient04-duration-fast: 160ms;
    --hctclient04-duration-normal: 240ms;
    --hctclient04-ease: ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

[hidden] {
    display: none !important;
}

.hctclient04-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html.hctclient04-scroll-locked,
body.hctclient04-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Shared backdrop: Mobile Menu, Loading and Modal use one owner-aware layer. */
.hctclient04-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--hctclient04-z-backdrop);
    display: block;
    background: rgba(15, 23, 42, 0.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        opacity 220ms var(--hctclient04-ease),
        visibility 220ms var(--hctclient04-ease);
}

.hctclient04-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Shared showcase buttons. */
.hctclient04-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--hctclient04-duration-fast) var(--hctclient04-ease),
        box-shadow var(--hctclient04-duration-fast) var(--hctclient04-ease),
        background-color var(--hctclient04-duration-fast) var(--hctclient04-ease),
        border-color var(--hctclient04-duration-fast) var(--hctclient04-ease);
}

.hctclient04-ui-button:hover {
    transform: translateY(-1px);
}

.hctclient04-ui-button:active {
    transform: translateY(0);
}

.hctclient04-ui-button:focus-visible {
    outline: 3px solid rgba(14, 116, 144, 0.28);
    outline-offset: 2px;
}

.hctclient04-ui-button--primary {
    color: #fff;
    background: #f5a800;
    border-color: #f5a800;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.2);
}

.hctclient04-ui-button--primary:hover {
    background: var(--hctclient04-color-primary-hover);
    border-color: var(--hctclient04-color-primary-hover);
}

.hctclient04-ui-button--secondary {
    color: #0f172a;
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.hctclient04-ui-button--secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.hctclient04-ui-button--danger {
    color: #fff;
    background: var(--hctclient04-color-danger, #c00f28);
    border-color: var(--hctclient04-color-danger, #c00f28);
    box-shadow: 0 8px 18px rgba(192, 15, 40, 0.2);
}

.hctclient04-ui-button--danger:hover {
    background: var(--hctclient04-color-danger-hover, #a10b1d);
    border-color: var(--hctclient04-color-danger-hover, #a10b1d);
}

/* Toast. */
.hctclient04-toast-region {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: var(--hctclient04-z-toast);
    isolation: isolate;
    display: grid;
    gap: 12px;
    width: min(390px, calc(100vw - 36px));
    pointer-events: none;
}

.hctclient04-toast {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: start;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: auto;
    transition:
        opacity 200ms var(--hctclient04-ease),
        transform 200ms var(--hctclient04-ease);
}

.hctclient04-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hctclient04-toast.is-leaving {
    opacity: 0;
    transform: translateX(16px);
}

.hctclient04-toast__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
}

.hctclient04-toast--success .hctclient04-toast__icon { background: #16a34a; }
.hctclient04-toast--error .hctclient04-toast__icon { background: var(--hctclient04-color-danger, #c00f28); }
.hctclient04-toast--warning .hctclient04-toast__icon { background: #d97706; }
.hctclient04-toast--info .hctclient04-toast__icon { background: #0284c7; }

.hctclient04-toast__content { min-width: 0; }
.hctclient04-toast__title {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: var(--hctclient04-text-body);
    line-height: 1.35;
}
.hctclient04-toast__message {
    margin: 0;
    color: #475569;
    font-size: var(--hctclient04-text-meta);
    line-height: 1.5;
}
.hctclient04-toast__close {
    appearance: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: var(--hctclient04-icon-size-md);
    cursor: pointer;
}
.hctclient04-toast__close:hover { background: #f1f5f9; color: #0f172a; }

/* Loading. */
.hctclient04-loading {
    position: fixed;
    inset: 0;
    z-index: var(--hctclient04-z-loading);
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms var(--hctclient04-ease), visibility 180ms var(--hctclient04-ease);
}

.hctclient04-loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hctclient04-loading__panel {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    max-width: min(92vw, 420px);
    padding: 18px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.hctclient04-loading__spinner {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 3px solid #cbd5e1;
    border-top-color: #f5a800;
    border-radius: 50%;
    animation: hctclient04-spin 700ms linear infinite;
}

.hctclient04-loading__text {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
}

@keyframes hctclient04-spin { to { transform: rotate(360deg); } }

/* Modal / confirm. */
.hctclient04-modal-layer {
    position: fixed;
    inset: 0;
    z-index: var(--hctclient04-z-modal);
    display: grid;
    place-items: center;
    padding: 20px;
    pointer-events: none;
}

.hctclient04-modal-layer:not([hidden]) { pointer-events: auto; }

.hctclient04-modal {
    width: min(620px, 100%);
    max-height: calc(100dvh - 40px);
    overflow: auto;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32);
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition:
        opacity 200ms var(--hctclient04-ease),
        transform 200ms var(--hctclient04-ease);
}

.hctclient04-modal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hctclient04-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.hctclient04-modal__title { margin: 0; color: #0f172a; font-size: var(--hctclient04-font-size-xl); line-height: 1.35; }
.hctclient04-modal__close {
    appearance: none;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #334155;
    font-size: var(--hctclient04-icon-size-md);
    cursor: pointer;
}
.hctclient04-modal__close:hover { background: #e2e8f0; color: #0f172a; }
.hctclient04-modal__body { padding: 20px; color: #334155; line-height: 1.65; }
.hctclient04-modal__body > :first-child { margin-top: 0; }
.hctclient04-modal__body > :last-child { margin-bottom: 0; }
.hctclient04-modal__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid #e2e8f0;
}
.hctclient04-confirm__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #fef3c7;
    color: #b45309;
    font-size: var(--hctclient04-icon-size-lg);
    font-weight: 900;
}
.hctclient04-confirm__message { margin: 0; color: #334155; }

/* Breadcrumb. */
.hctclient04-breadcrumb-wrap {
    width: 100%;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}
.hctclient04-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 46px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    font-size: var(--hctclient04-text-meta);
    line-height: 1.5;
}
.hctclient04-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; }
.hctclient04-breadcrumb__item:not(:last-child)::after {
    content: "/";
    flex: 0 0 auto;
    margin: 0 10px;
    color: #94a3b8;
}
.hctclient04-breadcrumb__link { color: #475569; text-decoration: none; }
.hctclient04-breadcrumb__link:hover,
.hctclient04-breadcrumb__link:focus-visible { color: #08277E; text-decoration: underline; text-underline-offset: 3px; }
.hctclient04-breadcrumb__current {
    display: block;
    max-width: min(52vw, 560px);
    overflow: hidden;
    color: #0f172a;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pagination. */
.hctclient04-pagination-wrap { display: flex; justify-content: center; width: 100%; margin-top: 28px; }
.hctclient04-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hctclient04-pagination__link,
.hctclient04-pagination__page,
.hctclient04-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
}
.hctclient04-pagination__link:hover,
.hctclient04-pagination__link:focus-visible,
.hctclient04-pagination__page:hover,
.hctclient04-pagination__page:focus-visible { border-color: #f5a800; color: #f5a800; }
.hctclient04-pagination__page.is-current,
.hctclient04-pagination__page[aria-current="page"] { border-color: #f5a800; background: #f5a800; color: #fff; }
.hctclient04-pagination__link.is-disabled,
.hctclient04-pagination__page.is-disabled { cursor: not-allowed; opacity: 0.45; }
.hctclient04-pagination__ellipsis { border-color: transparent; background: transparent; color: #64748b; }

.hctclient04-ui-demo { padding: 48px 0; background: #f8fafc; }
.hctclient04-ui-demo__card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); }
.hctclient04-ui-demo__title { margin: 0 0 8px; color: #0f172a; font-size: var(--hctclient04-font-size-2xl); }
.hctclient04-ui-demo__desc { margin: 0 0 24px; color: #64748b; }
.hctclient04-ui-demo__breadcrumb { overflow: hidden; margin-bottom: 28px; border: 1px solid #e2e8f0; border-radius: 12px; }

@media (max-width: 575.98px) {
    .hctclient04-toast-region { top: 12px; right: 12px; width: calc(100vw - 24px); }
    .hctclient04-modal-layer { padding: 12px; }
    .hctclient04-modal { max-height: calc(100dvh - 24px); }
    .hctclient04-modal__actions { flex-direction: column-reverse; }
    .hctclient04-modal__actions .hctclient04-ui-button { width: 100%; }
    .hctclient04-breadcrumb { min-height: 42px; font-size: var(--hctclient04-text-caption); }
    .hctclient04-breadcrumb__item:not(:last-child)::after { margin: 0 7px; }
    .hctclient04-breadcrumb__current { max-width: 46vw; }
    .hctclient04-pagination { gap: 6px; }
    .hctclient04-pagination__link,
    .hctclient04-pagination__page,
    .hctclient04-pagination__ellipsis { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 9px; }
    .hctclient04-ui-demo__card { padding: 18px; }
}

.hctclient04-img-fade { opacity: 0; transition: opacity .35s ease; }
.hctclient04-img-fade.is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hctclient04-backdrop,
    .hctclient04-toast,
    .hctclient04-loading,
    .hctclient04-modal,
    .hctclient04-ui-button { transition: none !important; }
    .hctclient04-img-fade { opacity: 1; transition: none; }
}

/* ===== css/core/hctclient04-validation.css ===== */
[data-hctclient04-field].is-invalid,
.hctclient04-field.is-invalid {
    border-color: var(--hctclient04-color-danger) !important;
    outline-color: var(--hctclient04-color-danger);
}

[data-hctclient04-field].is-valid,
.hctclient04-field.is-valid {
    border-color: #2e7d32 !important;
    outline-color: #2e7d32;
}

.hctclient04-field-message {
    display: block;
    margin-top: var(--hctclient04-space-1);
    font-size: var(--hctclient04-text-meta);
}

.hctclient04-field-message.is-error { color: var(--hctclient04-color-danger); }
.hctclient04-field-message.is-success { color: #2e7d32; }

/* ===== css/core/hctclient04-design-tokens.css ===== */
/**
 * HCTCLIENT04 DESIGN TOKENS V1
 * --------------------------------------------------------------------------
 * Theme ownership:
 * - This file belongs to theme "client04" and may be replaced by another theme.
 * - Components must consume semantic --hctclient04-* variables instead of
 *   copying raw colors, spacing, radius, shadows or typography values.
 * - Legacy --hctclient04-* aliases remain available in hctclient04-layout.css while old
 *   components are migrated gradually.
 *
 * Responsive strategy:
 * - Fluid values use clamp(min, viewport-based preferred, max).
 * - Text must remain readable at 320px without separate hard-coded sizes in
 *   every component.
 */
:root {
    /*
     * Brand and semantic colors — Thu Hùng An Đông (Đặc Sản và Dược Liệu Cao Cấp).
     * Chốt lại 2026-09-15: VÀNG là màu chủ đạo (primary), NAVY là màu điểm thêm
     * (secondary) — đảo vai trò so với bản chốt trước đó, vì primary được đa số
     * component (button, heading, footer, CTA, icon...) đọc qua, còn secondary
     * chỉ vài chỗ hẹp (thanh nav bar chính, vài eyebrow trang chủ) nên khi đảo,
     * vàng sẽ áp đảo toàn site đúng ý, navy chỉ còn là điểm nhấn:
     *   primary   #F5A800 (vàng cam — chủ đạo: button, section title, footer, CTA)
     *   secondary #0B34A8 (navy — điểm thêm: thanh nav bar chính, vài eyebrow)
     *   accent    #c00f28 (đỏ — hotline, badge nổi bật)
     * --hctclient04-color-primary là nguồn duy nhất — đổi thì phải đối chiếu lại
     * yêu cầu thương hiệu, vì rất nhiều component đọc qua alias --hctclient04-primary.
     * Riêng nav-bar (hctclient04-nav-bar.css) CỐ Ý đảo ngược tham chiếu biến
     * (sidebar-anchor dùng secondary, menu-group dùng primary) để giữ đúng bố
     * cục 2 khối như mockup gốc (nút nhỏ navy, thanh dài vàng) dù primary/
     * secondary đã đổi vai trò — đừng "sửa lại cho khớp tên biến".
     */
    --hctclient04-color-primary: #F5A800;
    --hctclient04-color-primary-hover: #F59700;
    --hctclient04-color-primary-soft: #fdf1d9;
    --hctclient04-color-secondary: #0B34A8;
    --hctclient04-color-secondary-soft: #E6EAF8;
    --hctclient04-color-accent: #c00f28;
    --hctclient04-color-accent-soft: #fde8eb;
    --hctclient04-color-accent-hover: #a10b1d;
    --hctclient04-color-success: #16a34a;
    --hctclient04-color-warning: #d97706;
    --hctclient04-color-danger: #c00f28;
    --hctclient04-color-danger-hover: #a10b1d;
    --hctclient04-color-info: #0284c7;

    /* Logo mark riêng — dùng cho chính hình logo/badge, không dùng cho UI chung. Giữ navy vì logo thật (cá LIFE GOOD) tông xanh, không đổi theo primary/secondary. */
    --hctclient04-color-logo-dark: #0B34A8;
    --hctclient04-color-logo-light: #6D91DE;

    /* Icon feature-strip (Vận chuyển/Chất lượng/Thanh toán/Hỗ trợ) — đo từ designheader.png. */
    --hctclient04-color-feature-icon: #6892f4;
    --hctclient04-color-feature-icon-soft: #e8edfe;

    --hctclient04-color-text: #1a1a1a;
    --hctclient04-color-text-muted: #5b5b5b;
    /* Heading giữ navy (không theo primary=vàng) để chữ đủ tương phản, dễ đọc trên nền trắng. */
    --hctclient04-color-heading: #0B34A8;
    --hctclient04-color-surface: #ffffff;
    --hctclient04-color-surface-soft: #f2f5fa;
    --hctclient04-color-border: #e1e7f0;
    --hctclient04-color-border-strong: #ccd6e8;
    --hctclient04-color-focus: rgba(245, 168, 0, 0.45);
    --hctclient04-color-backdrop: rgba(15, 23, 42, 0.58);

    /*
     * Short-name aliases used by the "client04" theme pages/components (category
     * pages, service cards, home-sections). Kept separate from the long-form
     * --hctclient04-color-* names above because many call sites already ship
     * with a literal fallback (var(--hctclient04-primary, #F5A800)) — these
     * aliases must stay equal to those fallback values or the fallback and the
     * resolved value will visibly diverge.
     */
    --hctclient04-primary: var(--hctclient04-color-primary);
    --hctclient04-text: #1a1a1a;
    --hctclient04-muted: #5b5b5b;
    --hctclient04-soft: #fdf1d9;

    /*
     * Font families.
     * - base/heading: hệ thống, dùng cho phần lớn nội dung (h3-h6, body...).
     * - accent (Roboto Slab, load qua Google Fonts ở layouts/app.blade.php):
     *   CHỈ dùng cho tên công ty header, nút "Danh Mục Tiêu Biểu", menu
     *   pc/mobile (.hct-menu-link), h1/h2, tên sản phẩm/bài viết trang
     *   detail — theo yêu cầu riêng của anh Thanh Ka, không áp cho toàn site.
     */
    --hctclient04-font-family-base: 'Segoe UI', Roboto, Arial, sans-serif;
    --hctclient04-font-family-heading: 'Segoe UI', Roboto, Arial, sans-serif;
    --hctclient04-font-family-accent: "Roboto Slab", sans-serif;

    /* Fluid type scale. */
    --hctclient04-font-size-xs: clamp(0.84375rem, 0.81375rem + 0.10vw, 0.90625rem);
    --hctclient04-font-size-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
    --hctclient04-font-size-md: clamp(0.9375rem, 0.90rem + 0.16vw, 1rem);
    --hctclient04-font-size-lg: clamp(1rem, 0.94rem + 0.26vw, 1.125rem);
    --hctclient04-font-size-xl: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
    --hctclient04-font-size-2xl: clamp(1.375rem, 1.18rem + 0.78vw, 1.875rem);
    --hctclient04-font-size-3xl: clamp(1.75rem, 1.42rem + 1.30vw, 2.5rem);
    --hctclient04-font-size-4xl: clamp(2rem, 1.52rem + 1.90vw, 3.125rem);

    /* Website-wide semantic typography roles. */
    --hctclient04-text-caption: var(--hctclient04-font-size-xs);
    --hctclient04-text-meta: var(--hctclient04-font-size-sm);
    --hctclient04-text-body: var(--hctclient04-font-size-md);
    --hctclient04-text-body-lg: var(--hctclient04-font-size-lg);
    --hctclient04-text-button: var(--hctclient04-font-size-md);
    --hctclient04-text-card-title: var(--hctclient04-font-size-xl);
    --hctclient04-text-panel-title: var(--hctclient04-font-size-2xl);
    --hctclient04-text-section-title: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem);
    --hctclient04-text-page-title: clamp(2rem, 1.70rem + 1.15vw, 2.75rem);
    --hctclient04-text-hero-title: clamp(2.25rem, 1.85rem + 1.55vw, 3.25rem);
    --hctclient04-text-icon-sm: 1.25rem;
    --hctclient04-text-icon-md: 1.5rem;
    --hctclient04-text-icon-lg: 1.75rem;
    --hctclient04-icon-size-md: var(--hctclient04-text-icon-md);
    --hctclient04-icon-size-lg: var(--hctclient04-text-icon-lg);

    --hctclient04-font-weight-regular: 400;
    --hctclient04-font-weight-medium: 500;
    --hctclient04-font-weight-semibold: 600;
    --hctclient04-font-weight-bold: 700;
    --hctclient04-font-weight-extrabold: 800;

    --hctclient04-line-height-tight: 1.18;
    --hctclient04-line-height-heading: 1.28;
    --hctclient04-line-height-base: 1.6;
    --hctclient04-line-height-relaxed: 1.75;

    /* Spacing scale. */
    --hctclient04-space-0: 0;
    --hctclient04-space-1: 0.25rem;
    --hctclient04-space-2: 0.5rem;
    --hctclient04-space-3: 0.75rem;
    --hctclient04-space-4: 1rem;
    --hctclient04-space-5: 1.25rem;
    --hctclient04-space-6: 1.5rem;
    --hctclient04-space-7: 2rem;
    --hctclient04-space-8: 2.5rem;
    --hctclient04-space-9: 3rem;
    --hctclient04-space-10: 4rem;
    --hctclient04-space-11: 5rem;
    --hctclient04-space-12: 6rem;

    --hctclient04-section-space: clamp(3rem, 2rem + 4vw, 6rem);
    --hctclient04-section-space-sm: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --hctclient04-section-padding-block: var(--hctclient04-section-space);
    --hctclient04-section-padding-block-sm: var(--hctclient04-section-space-sm);
    --hctclient04-gutter: clamp(1rem, 0.65rem + 1.25vw, 2rem);

    /* Radius. */
    --hctclient04-radius-xs: 0.25rem;
    --hctclient04-radius-sm: 0.5rem;
    --hctclient04-radius-md: 0.75rem;
    --hctclient04-radius-lg: 1rem;
    --hctclient04-radius-xl: 1.5rem;
    --hctclient04-radius-2xl: 2rem;
    --hctclient04-radius-pill: 999px;
    --hctclient04-radius-circle: 50%;

    /* Borders. */
    --hctclient04-border-width: 1px;
    --hctclient04-border: var(--hctclient04-border-width) solid var(--hctclient04-color-border);
    --hctclient04-border-strong: var(--hctclient04-border-width) solid var(--hctclient04-color-border-strong);

    /* Shadows. */
    --hctclient04-shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.06);
    --hctclient04-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
    --hctclient04-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.11);
    --hctclient04-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.16);
    --hctclient04-shadow-primary: 0 12px 28px rgba(245, 168, 0, 0.28);

    /* Motion. */
    --hctclient04-duration-fast: 160ms;
    --hctclient04-duration-normal: 240ms;
    --hctclient04-duration-slow: 420ms;
    --hctclient04-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hctclient04-ease-standard: ease;

    /* Containers. */
    --hctclient04-container-xs: 44rem;
    --hctclient04-container-sm: 60rem;
    --hctclient04-container-md: 75rem;
    --hctclient04-container-lg: 75rem;
    --hctclient04-container-wide: 75rem;
    --hctclient04-container-content: 75rem;

    /* Opacity. */
    --hctclient04-opacity-disabled: 0.5;
    --hctclient04-opacity-muted: 0.72;
    --hctclient04-opacity-hover: 0.92;

    /* Layer scale. Keep synchronized with shared UI owners. */
    --hctclient04-z-base: 1;
    --hctclient04-z-sticky: 100;
    --hctclient04-z-dropdown: 900;
    --hctclient04-z-backdrop: 1000;
    --hctclient04-z-mobile-menu: 1010;
    --hctclient04-z-lightbox: 1040;
    --hctclient04-z-popup: 1100;
    --hctclient04-z-modal: 1120;
    --hctclient04-z-loading: 1200;
    --hctclient04-z-feedback: 1300;
    --hctclient04-z-toast: 1310;
}

/* ===== css/core/hctclient04-typography.css ===== */
/** HCTCLIENT04 TYPOGRAPHY V1 - theme replaceable, fluid and responsive. */
body {
    color: var(--hctclient04-color-text);
    font-family: var(--hctclient04-font-family-base);
    font-size: var(--hctclient04-font-size-md);
    line-height: var(--hctclient04-line-height-base);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: var(--hctclient04-font-weight-bold);
    line-height: var(--hctclient04-line-height-heading);
    text-wrap: balance;
}

/* h1/h2 riêng: font accent (Roboto Slab) theo yêu cầu — h3-h6 giữ font-family-heading ở trên. */
h1,
h2 {
    font-family: var(--hctclient04-font-family-accent) !important;
}

/*
 * Tất cả menu pc + mobile (.hct-menu-link dùng chung cho mọi vị trí menu:
 * pc_main_1/2/3, mobile_main, footer, category-sidebar col_1/2) → font
 * accent. !important vì .hct-menu-link được nhiều file CSS khác nhau định
 * nghĩa lại theo ngữ cảnh (xem ghi chú bug specificity cũ trong
 * hctclient04-nav-bar.css / hctclient04-layout-system.css) — không phụ
 * thuộc thứ tự load.
 */
.hct-menu-link {
    font-family: var(--hctclient04-font-family-accent) !important;
}

.hctclient04-heading-1 { font-size: var(--hctclient04-font-size-4xl); }
.hctclient04-heading-2 { font-size: var(--hctclient04-font-size-3xl); }
.hctclient04-heading-3 { font-size: var(--hctclient04-font-size-2xl); }
.hctclient04-heading-4 { font-size: var(--hctclient04-font-size-xl); }
.hctclient04-body-lg { font-size: var(--hctclient04-font-size-lg); }
.hctclient04-body { font-size: var(--hctclient04-font-size-md); }
.hctclient04-body-sm { font-size: var(--hctclient04-font-size-sm); }
.hctclient04-caption { font-size: var(--hctclient04-font-size-xs); }
.hctclient04-text-muted { color: var(--hctclient04-color-text-muted); }
.hctclient04-text-center { text-align: center; }

.hctclient04-richtext {
    overflow-wrap: anywhere;
}

.hctclient04-richtext > :first-child { margin-top: 0; }
.hctclient04-richtext > :last-child { margin-bottom: 0; }
.hctclient04-richtext p,
.hctclient04-richtext ul,
.hctclient04-richtext ol { margin-block: 0 1em; }
.hctclient04-richtext img { height: auto; }

/*
 * Nội dung render từ trình soạn thảo Admin (detail body, sapo, content
 * block text) — class này đã gắn sẵn ở các file Blade tương ứng.
 * .hctclient04-content ở đây trước không có rule nào, nên: (1) link do
 * admin chèn bị mất underline vì rule global `a{text-decoration:none}`
 * (hctclient04-layout.css) không có ngoại lệ; (2) đoạn văn/list dùng
 * margin mặc định trình duyệt, không đồng bộ giữa các khối.
 */
.hctclient04-content > :first-child { margin-top: 0; }
.hctclient04-content > :last-child { margin-bottom: 0; }
.hctclient04-content p,
.hctclient04-content ul,
.hctclient04-content ol,
.hctclient04-content blockquote {
    margin: 0 0 1em;
}
.hctclient04-content p:last-child,
.hctclient04-content ul:last-child,
.hctclient04-content ol:last-child,
.hctclient04-content blockquote:last-child {
    margin-bottom: 0;
}
.hctclient04-content a {
    text-decoration: underline;
    color: var(--hctclient04-color-secondary);
}
.hctclient04-content img {
    max-width: 100%;
    height: auto;
}

/*
 * Các đoạn sapo ngắn hiển thị trong card/list (FAQ câu hỏi, download,
 * service, opinion, article, product-top) không bọc .hctclient04-content
 * (chỉ 1 thẻ <p> trần, không cần chuẩn hoá margin) nhưng vẫn render
 * {!! !!} từ trình soạn thảo nên link bên trong vẫn phải giữ underline.
 */
.hctclient04-faq-row__head p a,
.hctclient04-download-row__body p a,
.hctclient04-service-card__body p a,
.hctclient04-opinion-card__content a,
.hctclient04-article-row__sapo a,
.hctclient04-product-top__sapo a {
    text-decoration: underline;
    color: var(--hctclient04-color-secondary);
}

@media (max-width: 479px) {
    .hctclient04-heading-1,
    .hctclient04-heading-2,
    .hctclient04-heading-3,
    .hctclient04-heading-4 {
        text-wrap: pretty;
    }
}


/* Global semantic typography contract. */
.hctclient04-page-title { font-size: var(--hctclient04-text-page-title); }
.hctclient04-section-title { font-size: var(--hctclient04-text-section-title); }
.hctclient04-panel-title { font-size: var(--hctclient04-text-panel-title); }
.hctclient04-card-title { font-size: var(--hctclient04-text-card-title); }
.hctclient04-body-text { font-size: var(--hctclient04-text-body); }
.hctclient04-meta-text { font-size: var(--hctclient04-text-meta); }

/* ===== css/core/hctclient04-layout-system.css ===== */
/**
 * HCTCLIENT04 CONTAINER & GRID V1
 * Generic layout primitives only. Theme-specific block composition belongs in
 * that block's CSS file.
 */
.hctclient04-container,
.hctclient04-container--narrow,
.hctclient04-container--wide,
.hctclient04-container {
    width: min(100% - (var(--hctclient04-gutter) * 2), var(--hctclient04-container-lg));
    margin-inline: auto;
}

.hctclient04-container--narrow {
    width: min(100% - (var(--hctclient04-gutter) * 2), var(--hctclient04-container-sm));
}

.hctclient04-container--wide {
    width: min(100% - (var(--hctclient04-gutter) * 2), var(--hctclient04-container-wide));
}

.hctclient04-section {
    padding-block: var(--hctclient04-section-space);
}

.hctclient04-section--compact {
    padding-block: var(--hctclient04-section-space-sm);
}

.hctclient04-grid {
    display: grid;
    gap: var(--hctclient04-grid-gap, var(--hctclient04-space-6));
    min-width: 0;
}

.hctclient04-grid > * { min-width: 0; }
.hctclient04-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hctclient04-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hctclient04-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hctclient04-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hctclient04-grid-min, 16rem)), 1fr));
}

.hctclient04-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hctclient04-cluster-gap, var(--hctclient04-space-4));
}

.hctclient04-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hctclient04-stack-gap, var(--hctclient04-space-4));
}

@media (max-width: 991px) {
    .hctclient04-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hctclient04-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .hctclient04-grid--2,
    .hctclient04-grid--3,
    .hctclient04-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Shared section rhythm. Block CSS may define layout, not vertical rhythm. */
.hctclient04-section { padding-block: var(--hctclient04-section-padding-block); }
.hctclient04-section--compact { padding-block: var(--hctclient04-section-padding-block-sm); }

/*
 * Page layout (content+sidebar / fullwidth) và card shell dùng chung.
 * Dùng cho cả Category và Detail nên phải nằm ở core (luôn được load),
 * không được đặt trong CSS riêng của Category/Detail.
 */
.hctclient04-page-layout{padding:clamp(28px,4vw,54px) 0}
.hctclient04-page-layout--content-sidebar .hctclient04-page-layout__container{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(24px,3vw,38px);align-items:start}
.hctclient04-page-layout__content{min-width:0}

/*
 * Header-row tràn full-width phía trên grid content+sidebar (dùng cho tiêu đề trang Detail) —
 * để tiêu đề có trọn chiều rộng container thay vì bị bó hẹp trong cột content (chỉ ~842px khi
 * có sidebar), tránh xuống dòng non ở font-size lớn. Bỏ padding-top của section theo sau vì
 * header-row đã tự có khoảng cách riêng.
 */
.hctclient04-page-layout__header-row{padding-top:clamp(28px,4vw,54px)}
.hctclient04-page-layout__header-row+.hctclient04-page-layout{padding-top:0}

.hctclient04-card{border:1px solid var(--hctclient04-color-border);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(15,23,42,.08);transition:transform .2s ease,box-shadow .2s ease}
.hctclient04-card--hover:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.11)}
.hctclient04-card h2 a,.hctclient04-card h3 a{color:var(--hctclient04-text,#1a1a1a);text-decoration:none}
.hctclient04-card p{margin:0;color:var(--hctclient04-muted,#5b5b5b);font-size:var(--hctclient04-text-body,.98rem);line-height:1.65}
.hctclient04-category-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--hctclient04-color-primary-soft),var(--hctclient04-color-surface-soft))}

/*
 * Thu Hùng An Đông: sidebar category/detail rộng cố định 260px, style tối giản kiểu
 * Google Sites (< tên trang / danh sách link phẳng, không khung/viền/bóng
 * đổ, không pill nền khi hover) — chỉ đổi màu chữ đỏ + đậm khi hover/active.
 * Ghi đè hẳn phần menu bên trong (pc_col_1/2) thay vì dựa vào
 * hctclient04-menu-column.css (file cũ dựng cho mega-menu, không hợp ngữ
 * cảnh sidebar đơn giản này).
 */
.hctclient04-category-sidebar{display:grid;gap:24px;width:260px;position:sticky;top:20px}
.hctclient04-category-sidebar__box{padding:0;border:none;border-radius:0;background:transparent;box-shadow:none}
.hctclient04-category-sidebar__title{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--hctclient04-color-border);color:var(--hctclient04-color-text);font-size:1rem;font-weight:var(--hctclient04-font-weight-bold);text-transform:none;letter-spacing:normal;line-height:1.3}

.hctclient04-category-sidebar__box .hct-menu{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.hctclient04-category-sidebar__box .hct-menu-item{display:block;border:none !important;box-shadow:none !important}
/*
 * .hctclient04-category-sidebar prefix CỐ Ý thêm vào mọi selector dưới đây —
 * hctclient04-menu-column.css (file mega-menu cũ, dựng cho dropdown ở
 * header) có rule cùng target .hct-menu-item.is-current > .hct-menu-item__head
 * (nền pill gradient xanh) và > .hct-menu-link (chữ trắng cưỡng bức), đặc
 * trưng selector 3 lớp — phải khớp hoặc vượt để thắng, không phụ thuộc thứ
 * tự load file. Đã dính bug y hệt ở nav-bar (xem hctclient04-nav-bar.css).
 */
.hctclient04-category-sidebar .hct-menu-item__head{display:flex;align-items:center;background:transparent !important}
.hctclient04-category-sidebar .hct-menu-link{display:block;width:100%;padding:7px 0;border-radius:0;color:var(--hctclient04-color-text);font-size:.9rem;font-weight:var(--hctclient04-font-weight-regular);line-height:1.4;text-decoration:none;white-space:normal;transition:color .14s ease}
.hctclient04-category-sidebar .hct-menu-link:hover{color:var(--hctclient04-color-accent) !important;font-weight:var(--hctclient04-font-weight-bold);background:transparent !important}
.hctclient04-category-sidebar .hct-menu-item.is-current > .hct-menu-item__head,
.hctclient04-category-sidebar .hct-menu-item.is-active > .hct-menu-item__head{background:transparent !important;box-shadow:none !important}
.hctclient04-category-sidebar .hct-menu-item.is-current > .hct-menu-item__head > .hct-menu-link,
.hctclient04-category-sidebar .hct-menu-item.is-active > .hct-menu-item__head > .hct-menu-link{
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    background:transparent !important;
    color:var(--hctclient04-color-accent) !important;
    font-weight:var(--hctclient04-font-weight-bold);
}
/*
 * Mũi tên chỉ sang trái ở đầu item đang active — sidebar nằm bên phải trang
 * nên mũi tên "chỉ" ngược ra ngoài (sang trái) về phía nội dung, ngụ ý "đây
 * là dữ liệu của category này". Đặt ::before (đầu item), không phải ::after.
 */
.hctclient04-category-sidebar .hct-menu-item.is-current > .hct-menu-item__head > .hct-menu-link::before,
.hctclient04-category-sidebar .hct-menu-item.is-active > .hct-menu-item__head > .hct-menu-link::before{
    content:"";
    flex:none;
    width:9px;
    height:9px;
    border-left:2px solid var(--hctclient04-color-accent);
    border-bottom:2px solid var(--hctclient04-color-accent);
    transform:rotate(45deg);
}
/* Sidebar đơn giản, không cần mega-menu/dropdown lồng nhau. */
.hctclient04-category-sidebar__box .hct-menu-toggle,
.hctclient04-category-sidebar__box .hct-sub-menu,
.hctclient04-category-sidebar__box .hct-mega-menu{display:none !important}

@media(max-width:1024px){
    .hctclient04-category-sidebar{width:100%}
}
.hctclient04-sidebar-news{display:grid;gap:14px}
.hctclient04-sidebar-news__item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:11px;align-items:start}
.hctclient04-sidebar-news__media{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,var(--hctclient04-color-primary-soft),var(--hctclient04-color-surface-soft))}
.hctclient04-sidebar-news__media img{width:100%;height:100%;object-fit:cover}
.hctclient04-sidebar-news h3{margin:0;font-size:.95rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hctclient04-sidebar-news h3 a{color:var(--hctclient04-text,#1a1a1a);text-decoration:none}

/* Dưới 1024px: bỏ hẳn sidebar, content full-width — tránh ép 2 cột nội dung vào cột content vốn đã bị sidebar ăn chỗ. */
@media(max-width:1024px){
    .hctclient04-page-layout--content-sidebar .hctclient04-page-layout__container{display:block}
    .hctclient04-page-layout--content-sidebar .hctclient04-page-layout__sidebar{display:none}
}
@media(max-width:640px){.hctclient04-page-layout{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.hctclient04-card{transition:none!important}}

/* ===== css/core/hctclient04-components-base.css ===== */
/** HCTCLIENT04 BUTTON + CARD BASE V1. */
.hctclient04-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hctclient04-space-2);
    min-height: 2.75rem;
    padding: 0.7rem 1.25rem;
    border: var(--hctclient04-border-width) solid transparent;
    border-radius: var(--hctclient04-radius-md);
    font: inherit;
    font-size: var(--hctclient04-font-size-md);
    font-weight: var(--hctclient04-font-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--hctclient04-duration-fast) var(--hctclient04-ease),
        box-shadow var(--hctclient04-duration-fast) var(--hctclient04-ease),
        background-color var(--hctclient04-duration-fast) var(--hctclient04-ease),
        border-color var(--hctclient04-duration-fast) var(--hctclient04-ease),
        color var(--hctclient04-duration-fast) var(--hctclient04-ease);
}

.hctclient04-ui-button:hover { transform: translateY(-1px); }
.hctclient04-ui-button:active { transform: translateY(0); }
.hctclient04-ui-button:focus-visible {
    outline: 3px solid var(--hctclient04-color-focus);
    outline-offset: 2px;
}
.hctclient04-ui-button:disabled,
.hctclient04-ui-button[aria-disabled="true"] {
    opacity: var(--hctclient04-opacity-disabled);
    pointer-events: none;
}

.hctclient04-ui-button--primary {
    color: #fff;
    background: var(--hctclient04-color-primary);
    border-color: var(--hctclient04-color-primary);
    box-shadow: var(--hctclient04-shadow-primary);
}
.hctclient04-ui-button--primary:hover {
    background: var(--hctclient04-color-primary-hover);
    border-color: var(--hctclient04-color-primary-hover);
}
.hctclient04-ui-button--secondary {
    color: var(--hctclient04-color-text);
    background: var(--hctclient04-color-surface);
    border-color: var(--hctclient04-color-border-strong);
    box-shadow: var(--hctclient04-shadow-xs);
}
.hctclient04-ui-button--secondary:hover { background: var(--hctclient04-color-surface-soft); }
.hctclient04-ui-button--outline {
    color: var(--hctclient04-color-secondary);
    background: transparent;
    border-color: var(--hctclient04-color-primary);
}
.hctclient04-ui-button--outline:hover {
    color: #fff;
    background: var(--hctclient04-color-primary);
}
.hctclient04-ui-button--ghost {
    color: var(--hctclient04-color-secondary);
    background: transparent;
}
.hctclient04-ui-button--danger {
    color: var(--hctclient04-color-surface);
    background: var(--hctclient04-color-danger);
    border-color: var(--hctclient04-color-danger);
}
.hctclient04-ui-button--pill { border-radius: var(--hctclient04-radius-pill); }
.hctclient04-ui-button--sm { min-height: 2.25rem; padding: 0.5rem 0.9rem; font-size: var(--hctclient04-font-size-sm); }
.hctclient04-ui-button--lg { min-height: 3.25rem; padding: 0.85rem 1.65rem; font-size: var(--hctclient04-font-size-lg); }
.hctclient04-ui-button--block { width: 100%; }
.hctclient04-ui-button--icon { width: 2.75rem; padding-inline: 0; }
.hctclient04-ui-button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.hctclient04-ui-button.is-loading::after {
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--hctclient04-radius-circle);
    content: "";
    animation: hctclient04-spin 700ms linear infinite;
}

/*
 * .hctclient04-card lives in core/hctclient04-layout-system.css, not here.
 * This file used to carry a second, conflicting .hctclient04-card definition
 * (BEM __media/__body/__title/__description/__actions + a --interactive
 * modifier) that no live blade template ever referenced — every real card
 * usage (related-items, team-groups, download-list, service-card) uses the
 * plain .hctclient04-card + .hctclient04-card--hover pair from
 * layout-system.css. Removed to avoid two sources of truth for the same
 * class; if a future component needs the BEM sub-parts, add them to
 * layout-system.css next to the base card rule instead of re-splitting here.
 */

@media (max-width: 479px) {
    .hctclient04-ui-button--lg { min-height: 3rem; padding-inline: 1.25rem; }
}

/* ===== css/core/hctclient04-animation.css ===== */
/**
 * HCTCLIENT04 ANIMATION CORE V1
 * Add data-hctclient04-reveal="fade-up|fade|slide-left|slide-right|scale".
 * JS only marks elements visible; CSS owns all visual motion.
 */
@keyframes hctclient04-spin { to { transform: rotate(360deg); } }

[data-hctclient04-reveal] {
    opacity: 0;
    transition:
        opacity var(--hctclient04-reveal-duration, var(--hctclient04-duration-slow)) var(--hctclient04-ease),
        transform var(--hctclient04-reveal-duration, var(--hctclient04-duration-slow)) var(--hctclient04-ease);
    transition-delay: var(--hctclient04-reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-hctclient04-reveal="fade-up"] { transform: translateY(1.5rem); }
[data-hctclient04-reveal="slide-left"] { transform: translateX(1.75rem); }
[data-hctclient04-reveal="slide-right"] { transform: translateX(-1.75rem); }
[data-hctclient04-reveal="scale"] { transform: scale(0.96); }
[data-hctclient04-reveal].is-visible { opacity: 1; transform: none; }

.hctclient04-hover-lift { transition: transform var(--hctclient04-duration-normal) var(--hctclient04-ease); }
.hctclient04-hover-lift:hover { transform: translateY(-4px); }
.hctclient04-image-zoom { overflow: hidden; }
.hctclient04-image-zoom img { transition: transform var(--hctclient04-duration-slow) var(--hctclient04-ease); }
.hctclient04-image-zoom:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
    [data-hctclient04-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===== css/core/hctclient04-accessibility.css ===== */
:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Ẩn "Đi đến nội dung" ngoài màn hình, chỉ hiện khi nhận focus bàn phím (Tab) — chuẩn accessibility skip-link. */
.hctclient04-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    border-radius: var(--hctclient04-radius-sm);
    color: #fff;
    background: var(--hctclient04-color-secondary);
    transform: translateY(-160%);
    transition: transform var(--hctclient04-duration-fast) var(--hctclient04-ease);
}

.hctclient04-skip-link:focus {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== css/components/hctclient04-section-heading.css ===== */
/**
 * Component: HCT Client04 Section Heading
 * Version: 2.2.0
 * Shared Thu Hùng An Đông heading with editable text and transparent PNG ornaments.
 */
.hctclient04-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--hctclient04-space-6);
    margin: 0 0 clamp(22px, 3vw, 38px);
}

.hctclient04-section-heading__content {
    min-width: 0;
    max-width: 72rem;
}

.hctclient04-section-heading__eyebrow {
    margin: 0 0 var(--hctclient04-space-2);
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-font-size-sm);
    font-weight: var(--hctclient04-font-weight-bold);
    letter-spacing: 0.08em;
    line-height: var(--hctclient04-line-height-tight);
    text-transform: uppercase;
}

.hctclient04-section-heading__title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.35vw, 18px);
}

.hctclient04-section-heading__title {
    margin: 0;
    color: var(--hctclient04-color-secondary);
    font-family: var(--hctclient04-font-family-heading);
    font-size: var(--hctclient04-section-heading-size, var(--hctclient04-font-size-2xl));
    font-weight: var(--hctclient04-font-weight-extrabold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Transparent image ornaments extracted as clean standalone assets. */
.hctclient04-section-heading__ornament {
    display: block;
    flex: 0 0 auto;
    width: clamp(34px, 3.2vw, 54px);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.hctclient04-section-heading__description {
    max-width: 62rem;
    margin: clamp(8px, 1vw, 14px) 0 0;
    color: var(--hctclient04-color-text, #2d2d2d);
    font-size: var(--hctclient04-text-body-lg);
    line-height: 1.55;
    text-wrap: balance;
}

.hctclient04-section-heading__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hctclient04-space-3);
}

.hctclient04-section-heading--sm { --hctclient04-section-heading-size: var(--hctclient04-text-panel-title); }
.hctclient04-section-heading--md { --hctclient04-section-heading-size: var(--hctclient04-text-section-title); }
.hctclient04-section-heading--lg { --hctclient04-section-heading-size: var(--hctclient04-text-section-title); }

.hctclient04-section-heading--center {
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.hctclient04-section-heading--center .hctclient04-section-heading__content,
.hctclient04-section-heading--center .hctclient04-section-heading__description {
    margin-inline: auto;
}

.hctclient04-section-heading--center .hctclient04-section-heading__title-row,
.hctclient04-section-heading--center .hctclient04-section-heading__actions {
    justify-content: center;
}

.hctclient04-section-heading--right { text-align: right; }
.hctclient04-section-heading--right .hctclient04-section-heading__content,
.hctclient04-section-heading--right .hctclient04-section-heading__description { margin-left: auto; }
.hctclient04-section-heading--right .hctclient04-section-heading__title-row,
.hctclient04-section-heading--right .hctclient04-section-heading__actions { justify-content: flex-end; }
.hctclient04-section-heading--ornament-none .hctclient04-section-heading__title-row { gap: 0; }

@media (max-width: 767px) {
    .hctclient04-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--hctclient04-space-4);
        margin-bottom: 22px;
    }

    .hctclient04-section-heading--center { align-items: center; }
    .hctclient04-section-heading--right { align-items: flex-end; }
    .hctclient04-section-heading__title-row { gap: 8px; }
    .hctclient04-section-heading__ornament { width: clamp(26px, 8vw, 38px); }
    .hctclient04-section-heading__actions { justify-content: flex-start; }
    .hctclient04-section-heading--center .hctclient04-section-heading__actions { justify-content: center; }
    .hctclient04-section-heading--right .hctclient04-section-heading__actions { justify-content: flex-end; }
}

/* ===== css/components/hctclient04-service-card.css ===== */
/* HCT CLIENT04 — SERVICE CARD (ảnh full-top, dùng cho trang Category Service) */
.hctclient04-service-grid{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:22px}

.hctclient04-service-card{flex:0 1 calc((100% - 44px) / 3);display:flex;flex-direction:column;overflow:hidden}

.hctclient04-service-card__media{display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--hctclient04-color-surface-soft,#f2f5fa)}
.hctclient04-service-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.hctclient04-service-card:hover .hctclient04-service-card__media img{transform:scale(1.04)}
.hctclient04-service-card__media-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--hctclient04-color-primary-soft),var(--hctclient04-color-surface-soft))}

.hctclient04-service-card__body{flex:1;display:flex;flex-direction:column;padding:22px}

.hctclient04-service-card__title{margin:0 0 10px;font-size:var(--hctclient04-text-card-title,1.05rem);font-weight:800;line-height:1.3}
.hctclient04-service-card__title a{color:var(--hctclient04-text,#1a1a1a);text-decoration:none;transition:color .18s ease}
.hctclient04-service-card__title a:hover{color: var(--hctclient04-color-secondary)}

.hctclient04-service-card__excerpt{flex:1;margin:0 0 16px;color:var(--hctclient04-muted,#5b5b5b);font-size:var(--hctclient04-text-body,.98rem);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.hctclient04-service-card__link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;color: var(--hctclient04-color-secondary);font-weight:700;font-size:var(--hctclient04-text-meta);text-decoration:none}
.hctclient04-service-card__link svg{width:16px;height:16px;transition:transform .2s ease}
.hctclient04-service-card__link:hover svg{transform:translateX(3px)}

@media(max-width:1024px){.hctclient04-service-card{flex-basis:calc((100% - 22px) / 2)}}
@media(max-width:640px){.hctclient04-service-card{flex-basis:100%}}

/* ===== css/components/hctclient04-feature-grid.css ===== */
.hctclient04-feature-grid-section{
    padding:clamp(54px,6vw,88px) 0;
    background:#fff;
}

.hctclient04-feature-grid-section .hctclient04-section-heading{
    margin-bottom:clamp(38px,4vw,56px);
}

.hctclient04-feature-grid-section__grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:clamp(10px,1.15vw,20px);
    align-items:stretch;
}

.hctclient04-feature-grid-section__item{
    display:flex;
    min-width:0;
    padding-top:58px;
}

.hctclient04-feature-card{
    --hctclient04-feature-accent:var(--hctclient04-color-primary);
    --hctclient04-feature-soft:#fff4f4;
    position:relative;
    display:flex;
    width:100%;
    flex-direction:column;
    padding:82px 18px 34px;
    border-radius:28px;
    background:linear-gradient(180deg,var(--hctclient04-feature-soft) 0%,#fff 88%);
    color:var(--hctclient04-color-text,#202020);
    text-align:center;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(31,41,55,.025);
    transition:transform .25s ease,box-shadow .25s ease;
}

.hctclient04-feature-card__icon{
    position:absolute;
    top:-58px;
    left:50%;
    display:block;
    width:116px;
    height:116px;
    margin:0;
    transform:translateX(-50%);
}

.hctclient04-feature-card__icon-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.hctclient04-feature-card__body{
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    align-items:center;
}

.hctclient04-feature-card__title{
    margin:0 0 14px;
    color:var(--hctclient04-feature-accent);
    font-size:var(--hctclient04-text-card-title);
    font-weight:750;
    line-height:1.38;
}

.hctclient04-feature-card__divider{
    width:30px;
    height:2px;
    margin:0 0 24px;
    border-radius:999px;
    background:var(--hctclient04-feature-accent);
}

.hctclient04-feature-card__description{
    flex:1;
    margin:0;
    font-size:var(--hctclient04-text-body);
    line-height:1.85;
}

.hctclient04-feature-card__button{
    margin-top:28px;
}

.hctclient04-feature-card--orange{--hctclient04-feature-accent:#ff8400;--hctclient04-feature-soft:#fff9f0}
.hctclient04-feature-card--green{--hctclient04-feature-accent:#80b900;--hctclient04-feature-soft:#f8fced}
.hctclient04-feature-card--teal{--hctclient04-feature-accent:#00a9a3;--hctclient04-feature-soft:#eefbfb}
.hctclient04-feature-card--blue{--hctclient04-feature-accent:#147bd1;--hctclient04-feature-soft:#f0f7ff}
.hctclient04-feature-card--purple{--hctclient04-feature-accent:#72239c;--hctclient04-feature-soft:#f8f1fc}
.hctclient04-feature-card--pink{--hctclient04-feature-accent:#f52359;--hctclient04-feature-soft:#fff2f6}

.hctclient04-feature-card[href]:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px rgba(31,41,55,.09);
}

.hctclient04-feature-card[href]:focus-visible{
    outline:3px solid var(--hctclient04-feature-accent);
    outline-offset:5px;
}

@media(max-width:1399px){
    .hctclient04-feature-grid-section__grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        row-gap:30px;
    }
}

@media(max-width:899px){
    .hctclient04-feature-grid-section__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:575px){
    .hctclient04-feature-grid-section{
        padding:46px 0;
    }

    .hctclient04-feature-grid-section .hctclient04-section-heading{
        margin-bottom:32px;
    }

    .hctclient04-feature-grid-section__grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .hctclient04-feature-grid-section__item{
        padding-top:52px;
    }

    .hctclient04-feature-card{
        padding:74px 20px 30px;
        border-radius:24px;
    }

    .hctclient04-feature-card__icon{
        top:-52px;
        width:104px;
        height:104px;
    }

    .hctclient04-feature-card__title{
        font-size:var(--hctclient04-text-card-title);
    }

    .hctclient04-feature-card__divider{
        margin-bottom:20px;
    }

    .hctclient04-feature-card__description{
        font-size:var(--hctclient04-text-body);
        line-height:1.75;
    }
}

@media(prefers-reduced-motion:reduce){
    .hctclient04-feature-card{
        transition:none;
    }

    .hctclient04-feature-card[href]:hover{
        transform:none;
    }
}

/* ===== css/components/hctclient04-why-choose-us.css ===== */
/**
 * HCT Client04 — Why Choose Us V2
 * --------------------------------------------------------------------------
 * Design goals:
 * - Match the supplied Thu Hùng An Đông desktop composition.
 * - Keep five compact benefit columns inside the left content area.
 * - Render each red icon as a transparent image inside a CSS white circle.
 * - Keep the child artwork visually merged with the section background.
 * - Preserve readable spacing at tablet and mobile breakpoints.
 */

/* ========================================================================== 
   SECTION
   ========================================================================== */

.hctclient04-why-choose-us {
    padding: 72px 0;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
}

.hctclient04-why-choose-us__panel {
    display: grid;
    grid-template-columns: minmax(0, 72%) minmax(280px, 28%);
    align-items: stretch;
    overflow: hidden;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
}

/* ========================================================================== 
   LEFT CONTENT
   ========================================================================== */

.hctclient04-why-choose-us__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 42px 14px 42px 22px;
}

.hctclient04-why-choose-us .hctclient04-section-heading {
    margin: 0 0 34px;
}

.hctclient04-why-choose-us .hctclient04-section-heading__title-row {
    justify-content: center;
}

.hctclient04-why-choose-us .hctclient04-section-heading__title {
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-section-title);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.hctclient04-why-choose-us .hctclient04-section-heading__ornament {
    width: 31px;
    height: 27px;
}

/* ========================================================================== 
   BENEFIT ITEMS
   ========================================================================== */

.hctclient04-why-choose-us__items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}

.hctclient04-why-choose-us__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 18px;
    text-align: center;
}

.hctclient04-why-choose-us__item:not(:last-child)::after {
    position: absolute;
    top: 22px;
    right: 0;
    bottom: 4px;
    width: 1px;
    background: var(--hctclient04-color-border-strong, #ccd6e8);
    content: '';
}

/* ========================================================================== 
   BENEFIT ICON
   ========================================================================== */

.hctclient04-why-choose-us__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 0 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(192, 15, 40, 0.08);
}

.hctclient04-why-choose-us__icon-image {
    display: block;
    width: 66px;
    height: 66px;
    object-fit: contain;
}

/* ========================================================================== 
   BENEFIT TYPOGRAPHY
   ========================================================================== */

.hctclient04-why-choose-us__item-title {
    margin: 0 0 7px;
    color: #111111;
    font-size: var(--hctclient04-text-card-title);
    font-weight: 800;
    line-height: 1.3;
}

.hctclient04-why-choose-us__item-description {
    margin: 0;
    color: #252525;
    font-size: var(--hctclient04-text-body);
    font-weight: 500;
    line-height: 1.48;
}

/* ========================================================================== 
   RIGHT ARTWORK
   ========================================================================== */

.hctclient04-why-choose-us__artwork {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
}

.hctclient04-why-choose-us__artwork-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    mix-blend-mode: multiply;
}

/* ========================================================================== 
   INTERACTION
   ========================================================================== */

.hctclient04-why-choose-us__item,
.hctclient04-why-choose-us__icon-circle {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.hctclient04-why-choose-us__item:hover {
    transform: translateY(-3px);
}

.hctclient04-why-choose-us__item:hover .hctclient04-why-choose-us__icon-circle {
    box-shadow: 0 12px 28px rgba(192, 15, 40, 0.14);
}

/* ========================================================================== 
   RESPONSIVE — DESKTOP
   ========================================================================== */

@media (max-width: 1399px) {
    .hctclient04-why-choose-us__panel {
        grid-template-columns: minmax(0, 70%) minmax(280px, 30%);
    }

    .hctclient04-why-choose-us__content {
        padding-left: 14px;
    }

    .hctclient04-why-choose-us__item {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hctclient04-why-choose-us__icon-circle {
        width: 90px;
        height: 90px;
    }

    .hctclient04-why-choose-us__icon-image {
        width: 62px;
        height: 62px;
    }
}

/* ========================================================================== 
   RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 1099px) {
    .hctclient04-why-choose-us__panel {
        grid-template-columns: 1fr;
    }

    .hctclient04-why-choose-us__content {
        padding: 46px 26px 34px;
    }

    .hctclient04-why-choose-us__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 34px;
    }

    .hctclient04-why-choose-us__item:nth-child(3)::after,
    .hctclient04-why-choose-us__item:last-child::after {
        display: none;
    }

    .hctclient04-why-choose-us__artwork {
        max-height: 360px;
    }

    .hctclient04-why-choose-us__artwork-image {
        width: min(100%, 640px);
        object-fit: contain;
        mix-blend-mode: normal;
    }
}

/* ========================================================================== 
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 699px) {
    .hctclient04-why-choose-us {
        padding: 48px 0;
    }

    .hctclient04-why-choose-us__content {
        padding: 36px 18px 28px;
    }

    .hctclient04-why-choose-us .hctclient04-section-heading {
        margin-bottom: 28px;
    }

    .hctclient04-why-choose-us__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
    }

    .hctclient04-why-choose-us__item {
        padding-right: 14px;
        padding-left: 14px;
    }

    .hctclient04-why-choose-us__item:nth-child(3)::after {
        display: block;
    }

    .hctclient04-why-choose-us__item:nth-child(even)::after,
    .hctclient04-why-choose-us__item:last-child::after {
        display: none;
    }

    .hctclient04-why-choose-us__icon-circle {
        width: 84px;
        height: 84px;
    }

    .hctclient04-why-choose-us__icon-image {
        width: 58px;
        height: 58px;
    }

    .hctclient04-why-choose-us__artwork {
        max-height: 300px;
    }
}

@media (max-width: 459px) {
    .hctclient04-why-choose-us__items {
        grid-template-columns: 1fr;
    }

    .hctclient04-why-choose-us__item::after {
        display: none !important;
    }

    .hctclient04-why-choose-us__item:not(:last-child) {
        padding-bottom: 24px;
        border-bottom: 1px solid var(--hctclient04-color-border-strong, #ccd6e8);
    }
}

/* ========================================================================== 
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hctclient04-why-choose-us__item,
    .hctclient04-why-choose-us__icon-circle {
        transition: none;
    }

    .hctclient04-why-choose-us__item:hover {
        transform: none;
    }
}

/* ===== css/components/hctclient04-process-reception-assessment.css ===== */
/* ========================================================================== 
   HCT CLIENT04 — RECEPTION & ASSESSMENT PROCESS V3
   Shared heading + four clean transparent corner assets + central infographic.
   ========================================================================== */

.hctclient04-process-reception-assessment {
    position: relative;
    overflow: hidden;
    padding: var(--hctclient04-section-padding-block) 0;
    background: #fff;
    isolation: isolate;
}

.hctclient04-process-reception-assessment__container {
    position: relative;
    z-index: 2;
}

.hctclient04-process-reception-assessment__figure {
    position: relative;
    width: 100%;
    margin: 0;
}

.hctclient04-process-reception-assessment__image {
    display: block;
    width: 100%;
    max-width: var(--hctclient04-container-content);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.hctclient04-process-reception-assessment__corner {
    position: absolute;
    z-index: 1;
    display: block;
    width: clamp(120px, 16vw, 260px);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.hctclient04-process-reception-assessment__corner--top-left { top: 0; left: 0; }
.hctclient04-process-reception-assessment__corner--top-right { top: 0; right: 0; }
.hctclient04-process-reception-assessment__corner--bottom-left { bottom: 0; left: 0; }
.hctclient04-process-reception-assessment__corner--bottom-right { right: 0; bottom: 0; }

@media (max-width: 1099px) {
    .hctclient04-process-reception-assessment { padding: clamp(32px, 4vw, 52px) 0; }
    .hctclient04-process-reception-assessment__corner { width: clamp(95px, 19vw, 190px); opacity: 0.82; }
}

@media (max-width: 699px) {
    .hctclient04-process-reception-assessment { padding: 30px 0; }
    .hctclient04-process-reception-assessment__image { width: 100%; max-width: none; }
    .hctclient04-process-reception-assessment__corner { width: 92px; opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-process-reception-assessment,
    .hctclient04-process-reception-assessment__image { scroll-behavior: auto; }
}

/* ===== css/components/hctclient04-featured-programs.css ===== */
/**
 * Component: HCT Client04 Featured Programs
 * Version: 1.0.0
 */
.hctclient04-featured-programs {
    padding: clamp(42px, 5.5vw, 82px) 0;
    background: #fff;
}

.hctclient04-featured-programs .hctclient04-section-heading {
    margin-bottom: clamp(28px, 3vw, 46px);
}

.hctclient04-featured-programs__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 1.5vw, 30px);
}

.hctclient04-featured-programs__card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(31, 31, 31, 0.045);
    border-radius: clamp(20px, 1.6vw, 30px);
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 31, 31, 0.09);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.hctclient04-featured-programs__media {
    padding: clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) 0;
}

.hctclient04-featured-programs__image {
    display: block;
    width: 100%;
    aspect-ratio: 18 / 11;
    object-fit: cover;
    border-radius: clamp(18px, 1.35vw, 25px);
}

.hctclient04-featured-programs__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    padding: clamp(22px, 2vw, 32px) clamp(18px, 1.6vw, 28px) clamp(28px, 2.4vw, 38px);
    text-align: center;
}

.hctclient04-featured-programs__title {
    margin: 0;
    color: #111;
    font-family: var(--hctclient04-font-family-heading);
    font-size: var(--hctclient04-text-card-title);
    font-weight: var(--hctclient04-font-weight-extrabold);
    line-height: 1.28;
    text-wrap: balance;
}

.hctclient04-featured-programs__description {
    margin: clamp(10px, 1vw, 16px) 0 0;
    color: #2f2f2f;
    font-size: var(--hctclient04-text-body);
    line-height: 1.65;
    text-wrap: balance;
}

.hctclient04-featured-programs__button {
    display: inline-flex;
    min-width: clamp(150px, 12vw, 205px);
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 11px 24px;
    border: 2px solid var(--hctclient04-color-danger);
    border-radius: 999px;
    color: var(--hctclient04-color-danger);
    font-size: var(--hctclient04-text-button);
    font-weight: var(--hctclient04-font-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.hctclient04-featured-programs__description + .hctclient04-featured-programs__button,
.hctclient04-featured-programs__title + .hctclient04-featured-programs__button {
    margin-top: clamp(24px, 2.4vw, 38px);
}

.hctclient04-featured-programs__card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 42px rgba(31, 31, 31, 0.14);
}

.hctclient04-featured-programs__button:hover {
    background: var(--hctclient04-color-danger);
    color: #fff;
    transform: translateY(-2px);
}

.hctclient04-featured-programs__button:focus-visible {
    outline: 3px solid rgba(192, 15, 40, 0.25);
    outline-offset: 4px;
}

@media (max-width: 1199px) {
    .hctclient04-featured-programs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hctclient04-featured-programs {
        padding: 38px 0 48px;
    }

    .hctclient04-featured-programs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .hctclient04-featured-programs__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hctclient04-featured-programs__card {
        max-width: 430px;
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-featured-programs__card,
    .hctclient04-featured-programs__button {
        transition: none;
    }
}

/* ===== css/components/hctclient04-library-documents.css ===== */
/* =========================================================
   HCT CLIENT04 - LIBRARY & DOCUMENTS
   ========================================================= */
.hctclient04-library-documents{
    padding:64px 0 72px;
    background:var(--hctclient04-color-surface-soft,#f2f5fa);
}

.hctclient04-library-documents .hctclient04-section-heading{
    margin-bottom:34px;
}

.hctclient04-library-documents__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    max-width:var(--hctclient04-container-content);
    margin:0 auto;
}

.hctclient04-library-documents__panel{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:36px 42px 42px;
    border:1px solid rgba(192, 15, 40,.14);
    border-radius:28px;
    background:#fff;
    box-shadow:0 14px 36px rgba(192, 15, 40,.08);
}

.hctclient04-library-documents__intro{
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    align-items:center;
    gap:28px;
    margin-bottom:34px;
}

.hctclient04-library-documents__intro-icon{
    display:grid;
    width:132px;
    aspect-ratio:1;
    place-items:center;
    border-radius:50%;
    color:#fff;
}

.hctclient04-library-documents__intro-icon--red{background:linear-gradient(145deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover))}
.hctclient04-library-documents__intro-icon--orange{background:linear-gradient(145deg,#ffa51f,#ff8510)}
.hctclient04-library-documents__intro-icon svg{width:70px;height:70px}

.hctclient04-library-documents__panel-title{
    margin:0 0 12px;
    font-size:var(--hctclient04-text-panel-title);
    line-height:1.2;
    font-weight:800;
}

.hctclient04-library-documents__panel-title--red{color:var(--hctclient04-color-danger)}
.hctclient04-library-documents__panel-title--orange{color:#ff8b12}

.hctclient04-library-documents__panel-description{
    max-width:560px;
    margin:0;
    color:#222;
    font-size:var(--hctclient04-text-body-lg);
    line-height:1.55;
}

.hctclient04-library-documents__gallery{
    display:grid;
    grid-template-columns:minmax(0,1.95fr) minmax(150px,1fr);
    gap:22px;
    margin:4px 0 42px;
}

.hctclient04-library-documents__gallery img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
}

.hctclient04-library-documents__gallery-main{aspect-ratio:1.64}
.hctclient04-library-documents__gallery-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.hctclient04-library-documents__gallery-side img{aspect-ratio:1.76}

.hctclient04-library-documents__files{
    display:grid;
    gap:14px;
    margin:8px 0 34px;
}

.hctclient04-library-documents__file{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 38px;
    align-items:center;
    gap:18px;
    min-height:94px;
    padding:16px 24px;
    border:1px solid rgba(192, 15, 40,.18);
    border-radius:18px;
    color:#151515;
    text-decoration:none;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.hctclient04-library-documents__file:hover{
    transform:translateY(-2px);
    border-color:rgba(192, 15, 40,.45);
    box-shadow:0 9px 22px rgba(192, 15, 40,.08);
}

.hctclient04-library-documents__file-type{
    display:grid;
    width:52px;
    height:62px;
    place-items:end center;
    padding-bottom:8px;
    border-radius:7px 7px 9px 9px;
    color:#fff;
    font-size:var(--hctclient04-text-body);
    font-weight:800;
    clip-path:polygon(0 0,72% 0,100% 24%,100% 100%,0 100%);
}
.hctclient04-library-documents__file-type.is-pdf{background:var(--hctclient04-color-danger)}
.hctclient04-library-documents__file-type.is-doc{background:#1475d1}

.hctclient04-library-documents__file-copy{display:grid;gap:5px;min-width:0}
.hctclient04-library-documents__file-copy strong{font-size:var(--hctclient04-text-card-title);line-height:1.35}
.hctclient04-library-documents__file-copy span{color:#666;font-size:var(--hctclient04-text-body)}
.hctclient04-library-documents__download-icon{color:var(--hctclient04-color-danger)}
.hctclient04-library-documents__download-icon svg{display:block;width:34px;height:34px}

.hctclient04-library-documents__primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    width:min(380px,100%);
    min-height:70px;
    margin:auto auto 0;
    padding:14px 30px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover));
    color:#fff;
    text-decoration:none;
    font-size:var(--hctclient04-text-button);
    font-weight:800;
    box-shadow:0 10px 20px rgba(192, 15, 40,.13);
    transition:transform .2s ease,box-shadow .2s ease;
}
.hctclient04-library-documents__primary-button:hover{transform:translateY(-2px);box-shadow:0 13px 26px rgba(192, 15, 40,.2)}
.hctclient04-library-documents__primary-button span:last-child{font-size:var(--hctclient04-text-icon-lg);font-weight:400;line-height:1}

@media (max-width:1100px){
    .hctclient04-library-documents__grid{grid-template-columns:1fr}
}

@media (max-width:767px){
    .hctclient04-library-documents{padding:44px 0 50px}
    .hctclient04-library-documents__panel{padding:24px 18px 28px;border-radius:22px}
    .hctclient04-library-documents__intro{grid-template-columns:82px minmax(0,1fr);gap:16px;margin-bottom:24px}
    .hctclient04-library-documents__intro-icon{width:82px}
    .hctclient04-library-documents__intro-icon svg{width:46px;height:46px}
    .hctclient04-library-documents__panel-title{font-size:var(--hctclient04-text-panel-title)}
    .hctclient04-library-documents__panel-description{font-size:var(--hctclient04-text-body)}
    .hctclient04-library-documents__gallery{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
    .hctclient04-library-documents__gallery-side{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px}
    .hctclient04-library-documents__file{grid-template-columns:46px minmax(0,1fr) 30px;gap:12px;padding:13px 14px}
    .hctclient04-library-documents__file-type{width:44px;height:53px;font-size:var(--hctclient04-text-caption)}
    .hctclient04-library-documents__file-copy strong{font-size:var(--hctclient04-text-body)}
    .hctclient04-library-documents__file-copy span{font-size:var(--hctclient04-text-meta)}
    .hctclient04-library-documents__primary-button{min-height:58px;font-size:var(--hctclient04-text-button)}
}

/* ===== css/components/hctclient04-parent-testimonials.css ===== */
/* ==========================================================
   Parent testimonials slider
   ========================================================== */

.hctclient04-parent-testimonials {
    --hctclient04-parent-testimonials-gap: 28px;
    --hctclient04-parent-testimonials-columns: 3;
    padding: 72px 0 54px;
    overflow: hidden;
    background: #fff;
}

.hctclient04-parent-testimonials .hctclient04-section-heading {
    margin-bottom: 46px;
}

.hctclient04-parent-testimonials__viewport {
    overflow: hidden;
    width: 100%;
    padding: 6px 4px 12px;
}

.hctclient04-parent-testimonials__track {
    display: flex;
    gap: var(--hctclient04-parent-testimonials-gap);
    transform: translate3d(0, 0, 0);
    transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.hctclient04-parent-testimonials__item {
    position: relative;
    flex: 0 0 calc(
        (100% - (var(--hctclient04-parent-testimonials-gap) * (var(--hctclient04-parent-testimonials-columns) - 1))) /
        var(--hctclient04-parent-testimonials-columns)
    );
    min-width: 0;
    min-height: 310px;
    padding: 38px 34px 30px 74px;
    border: 1px solid rgba(245, 168, 0, .18);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}

.hctclient04-parent-testimonials__quote-mark {
    position: absolute;
    top: 20px;
    left: 24px;
    color: var(--hctclient04-color-secondary);
    font-family: var(--hctclient04-font-family-heading);
    font-size: var(--hctclient04-text-icon-lg);
    font-weight: 700;
    line-height: 1;
}

.hctclient04-parent-testimonials__quote {
    margin: 0;
    color: var(--hctclient04-color-text, #1a1a1a);
    font-size: var(--hctclient04-text-body-lg);
    font-weight: 500;
    line-height: 1.76;
}

.hctclient04-parent-testimonials__author {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
}

.hctclient04-parent-testimonials__avatar {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #eef1f8;
}

.hctclient04-parent-testimonials__author-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.hctclient04-parent-testimonials__name,
.hctclient04-parent-testimonials__relation {
    display: block;
    color: var(--hctclient04-color-text, #1a1a1a);
    line-height: 1.45;
}

.hctclient04-parent-testimonials__name {
    font-size: var(--hctclient04-text-card-title);
    font-weight: 800;
}

.hctclient04-parent-testimonials__relation {
    font-size: var(--hctclient04-text-body);
    font-weight: 500;
}

.hctclient04-parent-testimonials__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 24px;
    margin-top: 34px;
}

.hctclient04-parent-testimonials__dot {
    width: 34px;
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dedede;
    cursor: pointer;
    transition: width 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.hctclient04-parent-testimonials__dot:hover,
.hctclient04-parent-testimonials__dot:focus-visible {
    transform: translateY(-1px);
    background: #c7c7c7;
}

.hctclient04-parent-testimonials__dot.is-active {
    width: 38px;
    background: var(--hctclient04-color-primary);
}

.hctclient04-parent-testimonials__dot:focus-visible {
    outline: 3px solid rgba(245, 168, 0, .22);
    outline-offset: 4px;
}

.hctclient04-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 1199px) {
    .hctclient04-parent-testimonials {
        --hctclient04-parent-testimonials-columns: 2;
        --hctclient04-parent-testimonials-gap: 22px;
    }
}

@media (max-width: 767px) {
    .hctclient04-parent-testimonials {
        --hctclient04-parent-testimonials-columns: 1;
        --hctclient04-parent-testimonials-gap: 16px;
        padding: 52px 0 42px;
    }

    .hctclient04-parent-testimonials .hctclient04-section-heading {
        margin-bottom: 30px;
    }

    .hctclient04-parent-testimonials__viewport {
        padding-right: 2px;
        padding-left: 2px;
    }

    .hctclient04-parent-testimonials__item {
        min-height: 0;
        padding: 34px 24px 26px 58px;
        border-radius: 22px;
    }

    .hctclient04-parent-testimonials__quote-mark {
        top: 18px;
        left: 18px;
        font-size: var(--hctclient04-text-icon-lg);
    }

    .hctclient04-parent-testimonials__author {
        gap: 16px;
        margin-top: 24px;
    }

    .hctclient04-parent-testimonials__avatar {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .hctclient04-parent-testimonials__dots {
        gap: 10px;
        margin-top: 24px;
    }

    .hctclient04-parent-testimonials__dot {
        width: 26px;
        height: 12px;
    }

    .hctclient04-parent-testimonials__dot.is-active {
        width: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-parent-testimonials__track,
    .hctclient04-parent-testimonials__dot {
        transition: none;
    }
}

/* ===== css/components/hctclient04-consultation-contact.css ===== */
/* =========================================================
   HCTCLIENT04 CONSULTATION CONTACT
   ========================================================= */
.hctclient04-consultation{padding:72px 0;background:#fff}
.hctclient04-consultation__shell{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr) 390px;align-items:stretch;min-height:455px;overflow:hidden;border:1px solid var(--hctclient04-color-border);border-radius:30px;background:linear-gradient(180deg,#fff 0%,var(--hctclient04-color-surface-soft) 100%);box-shadow:0 12px 34px rgba(15,23,42,.10)}
.hctclient04-consultation__illustration{display:flex;align-items:flex-end;justify-content:center;padding:28px 8px 16px}
.hctclient04-consultation__illustration img{display:block;width:100%;max-width:300px;height:auto}
.hctclient04-consultation__content{position:relative;z-index:2;padding:38px 0 22px}
.hctclient04-consultation__header{text-align:center;margin-bottom:28px}
.hctclient04-consultation__title{margin:0;color: var(--hctclient04-color-secondary);font-size:var(--hctclient04-text-section-title);font-weight:800;line-height:1.15;text-transform:uppercase}
.hctclient04-consultation__subtitle{margin:12px 0 0;color:#222;font-size:var(--hctclient04-text-body-lg);line-height:1.6}
.hctclient04-consultation__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hctclient04-consultation__field,.hctclient04-consultation__message{min-width:0}
.hctclient04-consultation__message{margin-top:18px}
.hctclient04-consultation__control{position:relative;min-height:62px;border:1px solid var(--hctclient04-color-border);border-radius:18px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.04);transition:border-color .2s ease,box-shadow .2s ease}
.hctclient04-consultation__control--textarea{min-height:118px}
.hctclient04-consultation__field-icon{position:absolute;left:22px;top:18px;color: var(--hctclient04-color-secondary);font-size:var(--hctclient04-text-icon-lg);line-height:1;pointer-events:none}
.hctclient04-consultation input,.hctclient04-consultation textarea{display:block;width:100%;border:0;outline:0;background:transparent;color:#222;font:inherit}
.hctclient04-consultation input{height:60px;padding:0 18px 0 62px}
.hctclient04-consultation textarea{min-height:112px;resize:vertical;padding:20px 18px 24px 62px}
.hctclient04-consultation input::placeholder,.hctclient04-consultation textarea::placeholder{color:#848484}
.hctclient04-consultation__field.has-error .hctclient04-consultation__control,.hctclient04-consultation__message.has-error .hctclient04-consultation__control{border-color:var(--hctclient04-color-danger);box-shadow:0 0 0 3px rgba(192, 15, 40,.08)}
.hctclient04-consultation__error{display:none;position:static;margin:6px 4px 0;color:var(--hctclient04-color-danger);font-size:var(--hctclient04-text-caption);line-height:1.4}
.hctclient04-consultation__field.has-error .hctclient04-consultation__error,.hctclient04-consultation__message.has-error .hctclient04-consultation__error{display:block}
.hctclient04-consultation__submit-wrap{margin-top:18px;padding:18px;border-radius:0 0 24px 24px;background:linear-gradient(90deg,var(--hctclient04-color-primary-soft) 0%,#fff 50%,var(--hctclient04-color-primary-soft) 100%);text-align:center}
.hctclient04-consultation__submit{min-width:355px;min-height:56px;padding:14px 32px;border:0;border-radius:14px;background:linear-gradient(180deg, var(--hctclient04-color-primary) 0%, var(--hctclient04-color-primary-hover) 100%);color:#fff;font-size:var(--hctclient04-text-body-lg);font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.24);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.hctclient04-consultation__submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.3)}
.hctclient04-consultation__submit:disabled{cursor:not-allowed;opacity:.65;transform:none}
.hctclient04-consultation__photo{overflow:hidden;border-radius:0 30px 30px 45%}
.hctclient04-consultation__photo img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
.hctclient04-consultation__honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Floating actions */
.hctclient04-floating-contact{position:fixed;right:24px;top:50%;z-index:70;display:flex;flex-direction:column;gap:14px;transform:translateY(-25%)}
.hctclient04-floating-contact__button{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border:0;border-radius:50%;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.16);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.hctclient04-floating-contact__button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.hctclient04-floating-contact__button--phone{background:#c00f28;font-size:var(--hctclient04-text-icon-lg)}
.hctclient04-floating-contact__button--zalo{background:#1686e8;font-size:var(--hctclient04-text-meta)}
.hctclient04-floating-contact__button--messenger{background:#2c79ff;font-size:var(--hctclient04-text-icon-lg)}
.hctclient04-floating-contact__button--top{background:var(--hctclient04-color-primary);color: #fff;font-size:var(--hctclient04-text-icon-lg);opacity:0;visibility:hidden;transform:translateY(8px)}
.hctclient04-floating-contact__button--top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

@media (max-width:1199px){.hctclient04-consultation__shell{grid-template-columns:240px minmax(0,1fr) 320px}.hctclient04-consultation__fields{gap:12px}.hctclient04-consultation__photo{border-radius:0 30px 30px 35%}}
@media (max-width:991px){.hctclient04-consultation__shell{grid-template-columns:220px minmax(0,1fr)}.hctclient04-consultation__photo{display:none}.hctclient04-consultation__content{padding-right:28px}.hctclient04-consultation__fields{grid-template-columns:1fr}.hctclient04-consultation__field{margin-bottom:12px}.hctclient04-consultation__message{margin-top:6px}}
@media (max-width:767px){.hctclient04-consultation{padding:48px 0}.hctclient04-consultation__shell{display:block;border-radius:22px}.hctclient04-consultation__illustration{display:none}.hctclient04-consultation__content{padding:28px 18px 18px}.hctclient04-consultation__title{font-size:var(--hctclient04-text-icon-lg)}.hctclient04-consultation__subtitle{font-size:var(--hctclient04-text-body)}.hctclient04-consultation__submit{width:100%;min-width:0}
    /* bottom:18px cũ bị .hctclient04-bottom-bar (fixed, cao ~72px, z-index 100) che mất — nâng lên trên thanh đó + z-index cao hơn. */
    .hctclient04-floating-contact{right:10px;top:auto;bottom:calc(72px + env(safe-area-inset-bottom,0) + 14px);gap:9px;transform:none;z-index:110}
    .hctclient04-floating-contact__button{width:44px;height:44px}.hctclient04-floating-contact__button--phone,.hctclient04-floating-contact__button--messenger,.hctclient04-floating-contact__button--top{font-size:var(--hctclient04-text-icon-md)}.hctclient04-floating-contact__button--zalo{font-size:var(--hctclient04-text-caption)}}
@media (prefers-reduced-motion:reduce){.hctclient04-consultation__control,.hctclient04-consultation__submit,.hctclient04-floating-contact__button{transition:none!important}}

/* ===== css/components/hctclient04-consultation-popup.css ===== */
.hctclient04-consultation-popup{position:fixed;inset:0;z-index:var(--hctclient04-z-popup,1100);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.hctclient04-consultation-popup[hidden]{display:none!important}
.hctclient04-consultation-popup.is-open{opacity:1;visibility:visible}
.hctclient04-consultation-popup__backdrop{position:absolute;inset:0;background:rgba(35,25,24,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hctclient04-consultation-popup__dialog{position:relative;z-index:1;width:min(1040px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:hidden;border-radius:28px;background:#fff;box-shadow:0 28px 80px rgba(31,18,18,.28);transform:translateY(18px) scale(.98);transition:transform .24s ease;outline:none}
.hctclient04-consultation-popup.is-open .hctclient04-consultation-popup__dialog{transform:translateY(0) scale(1)}
.hctclient04-consultation-popup__scroll{max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.hctclient04-consultation-popup__close{position:absolute;top:14px;right:14px;z-index:6;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(15,23,42,.15);border-radius:50%;background:rgba(255,255,255,.94);color: var(--hctclient04-color-secondary);font-size:var(--hctclient04-text-icon-lg);line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(15,23,42,.12);transition:transform .18s ease,background-color .18s ease}
.hctclient04-consultation-popup__close:hover{transform:rotate(5deg) scale(1.04);background:var(--hctclient04-color-primary-soft)}
body.hctclient04-consultation-popup-open{overflow:hidden}
.hctclient04-consultation--popup{padding:0;background:transparent}
.hctclient04-consultation--popup .hctclient04-container{width:100%;max-width:none;padding:0}
.hctclient04-consultation--popup .hctclient04-consultation__shell{min-height:0;border:0;border-radius:28px;box-shadow:none;grid-template-columns:230px minmax(0,1fr) 290px}
.hctclient04-consultation--popup .hctclient04-consultation__content{padding:38px 0 28px}
.hctclient04-consultation--popup .hctclient04-consultation__title{font-size:var(--hctclient04-text-panel-title)}
.hctclient04-consultation--popup .hctclient04-consultation__subtitle{font-size:var(--hctclient04-text-body)}
.hctclient04-consultation--popup .hctclient04-consultation__fields{grid-template-columns:1fr;gap:12px}
.hctclient04-consultation--popup .hctclient04-consultation__message{margin-top:12px}
.hctclient04-consultation--popup .hctclient04-consultation__control{min-height:54px;border-radius:14px}
.hctclient04-consultation--popup .hctclient04-consultation input{height:52px}
.hctclient04-consultation--popup .hctclient04-consultation__control--textarea{min-height:104px}
.hctclient04-consultation--popup .hctclient04-consultation textarea{min-height:98px}
.hctclient04-consultation--popup .hctclient04-consultation__field-icon{top:15px;font-size:var(--hctclient04-text-icon-md)}
.hctclient04-consultation--popup .hctclient04-consultation__submit-wrap{padding:14px 0 0;background:transparent}
.hctclient04-consultation--popup .hctclient04-consultation__submit{min-width:280px;min-height:52px}
@media (max-width:991px){.hctclient04-consultation-popup{padding:16px}.hctclient04-consultation-popup__dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px)}.hctclient04-consultation-popup__scroll{max-height:calc(100vh - 32px)}.hctclient04-consultation--popup .hctclient04-consultation__shell{grid-template-columns:190px minmax(0,1fr)}.hctclient04-consultation--popup .hctclient04-consultation__content{padding:34px 30px 24px 0}}
@media (max-width:767px){.hctclient04-consultation-popup{align-items:end;padding:0}.hctclient04-consultation-popup__dialog{width:100%;max-height:92vh;border-radius:24px 24px 0 0;transform:translateY(28px)}.hctclient04-consultation-popup__scroll{max-height:92vh}.hctclient04-consultation-popup__close{top:10px;right:10px;width:40px;height:40px}.hctclient04-consultation--popup .hctclient04-consultation__shell{border-radius:24px 24px 0 0}.hctclient04-consultation--popup .hctclient04-consultation__content{padding:54px 18px 24px}.hctclient04-consultation--popup .hctclient04-consultation__header{margin-bottom:20px}.hctclient04-consultation--popup .hctclient04-consultation__title{font-size:var(--hctclient04-text-panel-title)}.hctclient04-consultation--popup .hctclient04-consultation__submit{width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){.hctclient04-consultation-popup,.hctclient04-consultation-popup__dialog,.hctclient04-consultation-popup__close{transition:none!important}}

/* ===== css/components/hctclient04-chat-widget.css ===== */
/*
 * Widget chat khách hàng — đặt góc dưới-phải trên desktop (floating-contact
 * đang ở top:50% nên không đụng), chuyển sang góc dưới-TRÁI trên mobile để
 * không chồng lên floating-contact + bottom-bar vốn đã chiếm dày đặc bên
 * phải/dưới cùng (xem hctclient04-consultation-contact.css).
 */
.hctclient04-chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 120;
}

/*
 * Nút "Chat ngay" dạng viên thuốc (pill) — tham khảo nút Chat Ngay của
 * misa.vn (icon tròn trắng + chữ đậm, badge số tròn ở góc), thay cho nút
 * tròn trơn cũ vì bị phản hồi là không đủ nổi bật để khách chú ý.
 */
.hctclient04-chat-widget__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 20px 0 8px;
    border: 0;
    border-radius: 999px;
    background: var(--hctclient04-color-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: hctclient04ChatToggleBounce 2.6s ease-in-out infinite;
}

.hctclient04-chat-widget__toggle:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    animation-play-state: paused;
}

.hctclient04-chat-widget__toggle-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--hctclient04-color-primary);
}

.hctclient04-chat-widget__toggle-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

@keyframes hctclient04ChatToggleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-chat-widget__toggle {
        animation: none;
    }
}

.hctclient04-chat-widget__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
    animation: hctclient04ChatBadgePulse 1s ease-in-out infinite;
}

@keyframes hctclient04ChatBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/*
 * Có tin trả lời mới (nhân viên/AI) trong lúc panel đang đóng -> viền nút
 * toggle nháy mạnh thêm 1 lớp, phân biệt rõ với animation nhấp nhô nhẹ mặc
 * định (luôn chạy, không phân biệt trạng thái đọc) — tắt ngay khi mở panel.
 */
.hctclient04-chat-widget__toggle.has-new-reply {
    animation: hctclient04ChatToggleBounce 2.6s ease-in-out infinite, hctclient04ChatToggleRing 1s ease-in-out infinite;
}

@keyframes hctclient04ChatToggleRing {
    0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 0 rgba(220, 38, 38, .5); }
    50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 8px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-chat-widget__badge {
        animation: none;
    }

    .hctclient04-chat-widget__toggle.has-new-reply {
        animation: none;
    }
}

.hctclient04-chat-widget__panel {
    position: absolute;
    right: 0;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 140px));
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}

.hctclient04-chat-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 14px 12px 14px 18px;
    background: var(--hctclient04-color-primary);
    color: #fff;
    font-weight: 700;
}

.hctclient04-chat-widget__minimize {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.hctclient04-chat-widget__minimize:hover {
    background: rgba(255, 255, 255, .3);
}

.hctclient04-chat-widget__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}

.hctclient04-chat-widget__empty {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #475569;
    font-size: 13px;
    align-self: flex-start;
    max-width: 85%;
}

.hctclient04-chat-widget__bubble-row {
    display: flex;
}

.hctclient04-chat-widget__bubble-row.is-user {
    justify-content: flex-end;
}

.hctclient04-chat-widget__bubble-row.is-reply {
    justify-content: flex-start;
}

.hctclient04-chat-widget__bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.hctclient04-chat-widget__bubble-row.is-user .hctclient04-chat-widget__bubble {
    background: var(--hctclient04-color-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.hctclient04-chat-widget__bubble-row.is-reply .hctclient04-chat-widget__bubble {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

.hctclient04-chat-widget__form {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.hctclient04-chat-widget__input {
    flex: 1;
    max-height: 90px;
    padding: 9px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    resize: none;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.hctclient04-chat-widget__input:focus {
    outline: 2px solid var(--hctclient04-color-primary);
    outline-offset: 1px;
}

.hctclient04-chat-widget__send {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--hctclient04-color-primary);
    color: #fff;
    cursor: pointer;
}

.hctclient04-chat-widget__send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .hctclient04-chat-widget {
        right: auto;
        left: 10px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0) + 14px);
    }

    /* Màn hình nhỏ: vẫn giữ dạng pill + chữ (không thu về icon tròn), chỉ
     * giảm kích thước cho vừa — trước đây ẩn hẳn chữ, bị phản hồi không cần
     * thu gọn kiểu đó, chỉ cần chỉnh cỡ chữ phù hợp mobile. */
    .hctclient04-chat-widget__toggle {
        height: 46px;
        padding: 0 16px 0 6px;
        gap: 8px;
    }

    .hctclient04-chat-widget__toggle-icon {
        width: 32px;
        height: 32px;
    }

    .hctclient04-chat-widget__toggle-label {
        font-size: 12px;
    }

    .hctclient04-chat-widget__panel {
        right: auto;
        left: 0;
        bottom: 58px;
        width: min(340px, calc(100vw - 20px));
        height: min(70vh, 480px);
    }

    /*
     * iOS Safari tự động zoom trang khi focus vào input có font-size < 16px
     * — trước đây 13px nên mỗi lần bấm nhập tin nhắn là cả trang bị phóng to
     * đột ngột. Chỉ cần đúng 16px là đủ tắt hành vi này, không cần disable
     * zoom toàn trang (ảnh hưởng accessibility).
     */
    .hctclient04-chat-widget__input {
        font-size: 16px;
    }
}

/* ===== css/components/hctclient04-home-services.css ===== */
/* HCT CLIENT04 — HOME SERVICES WIDGET V1 (thẻ dịch vụ dùng chung css/components/hctclient04-service-card.css) */
.hctclient04-home-services {
    padding: clamp(48px, 6vw, 88px) 0;
    background: #fff;
}

.hctclient04-home-services .hctclient04-service-grid {
    margin-top: 8px;
}

.hctclient04-home-services__actions {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.hctclient04-home-services__actions .hctclient04-category-button {
    margin-top: 0;
    padding: 14px 30px;
}

/* ===== css/components/home-sections/hctclient04-home-hero-01.css ===== */
/* HCT CLIENT04 (Thu Hùng An Đông) — HOME SECTION: HERO / layout_hero_01 */
.hctclient04-home-hero-01 {
    padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 6vw, 88px);
    background: linear-gradient(180deg, var(--hctclient04-color-primary-soft) 0%, #ffffff 70%);
}

.hctclient04-home-hero-01__container {
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}

.hctclient04-home-hero-01__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hctclient04-home-hero-01__title {
    margin: 0;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    letter-spacing: -0.02em;
    font-size: clamp(2.4rem, 2rem + 2.6vw, 4.4rem);
    line-height: 1.04;
}

.hctclient04-home-hero-01__title em {
    color: var(--hctclient04-color-secondary);
    font-style: normal;
}

.hctclient04-home-hero-01__subtitle {
    margin: 0;
    color: var(--hctclient04-color-text-muted);
    font-size: var(--hctclient04-text-body-lg);
    line-height: var(--hctclient04-line-height-relaxed);
    max-width: 34rem;
}

.hctclient04-home-hero-01__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hctclient04-home-hero-01__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    border: 1px solid var(--hctclient04-color-primary);
    border-radius: var(--hctclient04-radius-xs);
    color: #fff;
    background: var(--hctclient04-color-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--hctclient04-text-button);
    transition: background var(--hctclient04-duration-normal) var(--hctclient04-ease), color var(--hctclient04-duration-normal) var(--hctclient04-ease);
}

.hctclient04-home-hero-01__btn:hover {
    background: var(--hctclient04-color-primary-hover);
    border-color: var(--hctclient04-color-primary-hover);
}

.hctclient04-home-hero-01__btn--ghost {
    color: var(--hctclient04-color-secondary);
    background: transparent;
}

.hctclient04-home-hero-01__btn--ghost:hover {
    background: var(--hctclient04-color-primary-soft);
}

.hctclient04-home-hero-01__btn--ghost:focus-visible {
    outline-color: var(--hctclient04-color-primary);
}

.hctclient04-home-hero-01__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 45px);
    margin-top: 8px;
}

.hctclient04-home-hero-01__stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hctclient04-home-hero-01__stat b {
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: var(--hctclient04-font-size-2xl);
    color: var(--hctclient04-color-heading);
}

.hctclient04-home-hero-01__stat span {
    max-width: 82px;
    font-size: var(--hctclient04-text-caption);
    color: var(--hctclient04-color-text-muted);
    line-height: 1.35;
}

.hctclient04-home-hero-01__media {
    min-width: 0;
}

.hctclient04-home-hero-01__slider.hct-banner-slider {
    border-radius: var(--hctclient04-radius-xl);
    overflow: hidden;
    box-shadow: var(--hctclient04-shadow-md);
    aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
    .hctclient04-home-hero-01__container {
        grid-template-columns: 1fr;
    }

    .hctclient04-home-hero-01__content {
        text-align: center;
        align-items: center;
    }

    .hctclient04-home-hero-01__actions,
    .hctclient04-home-hero-01__stats {
        justify-content: center;
    }
}

/* ===== css/components/home-sections/hctclient04-home-about-01.css ===== */
/* HCT CLIENT04 — HOME SECTION: ABOUT / layout_about_01 */
.hctclient04-home-about-01 {
    padding: clamp(48px, 6vw, 88px) 0;
    background: var(--hctclient04-soft, #FDF1D9);
}

.hctclient04-home-about-01__container {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}

.hctclient04-home-about-01__media {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.hctclient04-home-about-01__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hctclient04-home-about-01__eyebrow {
    margin: 0 0 10px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hctclient04-home-about-01__title {
    margin: 0 0 16px;
    color: #20283b;
    font-size: var(--hctclient04-text-section-title, clamp(1.6rem, 2.8vw, 2.1rem));
    font-weight: 800;
    line-height: 1.25;
}

.hctclient04-home-about-01__description {
    margin: 0 0 26px;
    color: #5f6879;
    font-size: var(--hctclient04-text-body-lg, 1.02rem);
    line-height: 1.75;
}

.hctclient04-home-about-01__items {
    display: grid;
    gap: 18px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.hctclient04-home-about-01__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hctclient04-home-about-01__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    color: #fff;
    background: var(--hctclient04-primary);
    font-size: var(--hctclient04-text-button);
    font-weight: 800;
}

.hctclient04-home-about-01__item-title {
    margin: 0 0 2px;
    color: #20283b;
    font-weight: 700;
}

.hctclient04-home-about-01__item-description {
    margin: 0;
    color: #5f6879;
    font-size: .92rem;
    line-height: 1.6;
}

.hctclient04-home-about-01 .hctclient04-category-button {
    display: inline-flex;
    margin-top: 4px;
    padding: 12px 26px;
    border-radius: 999px;
    color: #fff;
    background: var(--hctclient04-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
}

@media (max-width: 900px) {
    .hctclient04-home-about-01__container {
        grid-template-columns: 1fr;
    }

    .hctclient04-home-about-01__media {
        max-width: 420px;
        margin-inline: auto;
    }
}

/* ===== css/components/home-sections/hctclient04-home-about-02.css ===== */
/* HCT CLIENT04 (Thu Hùng An Đông) — HOME SECTION: ABOUT / layout_about_02 (Hiệu quả & Bền vững) */
.hctclient04-home-about-02 {
    padding: clamp(56px, 7vw, 105px) 0;
    background: #fff;
}

.hctclient04-home-about-02__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(32px, 5vw, 85px);
}

.hctclient04-home-about-02__media {
    position: relative;
    height: clamp(320px, 34vw, 580px);
    border-radius: var(--hctclient04-radius-lg);
    overflow: hidden;
}

.hctclient04-home-about-02__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hctclient04-home-about-02__media-tag {
    position: absolute;
    left: -12px;
    bottom: 28px;
    padding: 14px 20px;
    background: #fff;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-font-size-xs);
    font-weight: 800;
    letter-spacing: .14em;
    box-shadow: var(--hctclient04-shadow-md);
}

.hctclient04-home-about-02__eyebrow {
    margin: 0 0 14px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hctclient04-home-about-02__title {
    margin: 0 0 16px;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3.1rem);
    line-height: 1.1;
}

.hctclient04-home-about-02__description {
    margin: 0 0 20px;
    color: var(--hctclient04-color-text-muted);
    font-size: var(--hctclient04-text-body-lg);
    line-height: var(--hctclient04-line-height-relaxed);
}

.hctclient04-home-about-02__steps {
    margin: 20px 0;
    border-top: 1px solid var(--hctclient04-color-border);
}

.hctclient04-home-about-02__step {
    display: flex;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hctclient04-color-border);
}

.hctclient04-home-about-02__step b {
    flex: none;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: 1.05rem;
    color: #6690c7;
}

.hctclient04-home-about-02__step span {
    font-size: .82rem;
    line-height: 1.65;
    color: var(--hctclient04-color-text-muted);
}

.hctclient04-home-about-02__step strong {
    display: block;
    margin-bottom: 2px;
    font-size: .92rem;
    color: var(--hctclient04-color-text);
}

.hctclient04-home-about-02__link {
    display: inline-flex;
    gap: 10px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-button);
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid #9cb2d9;
    padding-bottom: 6px;
}

@media (max-width: 900px) {
    .hctclient04-home-about-02__grid {
        grid-template-columns: 1fr;
    }

    .hctclient04-home-about-02__media {
        height: 320px;
    }

    .hctclient04-home-about-02__media-tag {
        left: 8px;
    }
}

/* ===== css/hctclient04-components-legacy.css ===== */
.hct-banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hct-banner-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.hct-banner-slider__track {
    position: relative;
    width: 100%;
}

.hct-banner-slider__slide {
    display: none;
    width: 100%;
}

.hct-banner-slider__slide.is-active {
    display: block;
}

.hct-banner-slider__link,
.hct-banner-slider__image,
.hct-banner-slider picture {
    display: block;
    width: 100%;
}

.hct-banner-slider__image {
    height: auto;
    object-fit: cover;
}

.hct-banner-slider__control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: var(--hctclient04-text-section-title);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.hct-banner-slider__control--prev {
    left: 18px;
}

.hct-banner-slider__control--next {
    right: 18px;
}

.hct-banner-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.hct-banner-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.hct-banner-slider__dot.is-active {
    background: #fff;
}

@media (max-width: 767px) {
    .hct-banner-slider__control {
        width: 36px;
        height: 36px;
        font-size: var(--hctclient04-text-panel-title);
    }

    .hct-banner-slider__control--prev {
        left: 10px;
    }

    .hct-banner-slider__control--next {
        right: 10px;
    }

    .hct-banner-slider__dots {
        bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hct-banner-slider *,
    .hct-banner-slider *::before,
    .hct-banner-slider *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ===== css/components/home-sections/hctclient04-home-feature-grid-02.css ===== */
/* HCT CLIENT04 (Thu Hùng An Đông) — HOME SECTION: FEATURE GRID / layout_feature_grid_02 (Dự Án Tiêu Biểu) */
.hctclient04-home-feature-grid-02 {
    padding: clamp(56px, 7vw, 105px) 0;
    color: #fff;
    background: var(--hctclient04-color-secondary);
}

.hctclient04-home-feature-grid-02__container {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}

.hctclient04-home-feature-grid-02__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hctclient04-home-feature-grid-02__title {
    margin: 0;
    color: #fff;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
    line-height: 1.1;
}

.hctclient04-home-feature-grid-02__description {
    margin: 0;
    color: #d3dcf0;
    font-size: var(--hctclient04-text-body-lg);
    line-height: var(--hctclient04-line-height-relaxed);
}

.hctclient04-home-feature-grid-02__content .hctclient04-category-button {
    align-self: flex-start;
    display: inline-flex;
    margin-top: 4px;
    padding: 13px 28px;
    color: var(--hctclient04-color-secondary);
    background: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--hctclient04-text-button);
}

.hctclient04-home-feature-grid-02__media {
    min-width: 0;
}

.hctclient04-home-feature-grid-02__slider.hct-banner-slider {
    border-radius: var(--hctclient04-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__viewport,
.hctclient04-home-feature-grid-02__slider .hct-banner-slider__track,
.hctclient04-home-feature-grid-02__slider .hct-banner-slider__slide {
    height: 100%;
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__link,
.hctclient04-home-feature-grid-02__slider .hct-banner-slider__image {
    height: 100%;
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__image {
    object-fit: cover;
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__dots {
    bottom: 20px;
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__dot {
    background: rgba(255, 255, 255, 0.5);
}

.hctclient04-home-feature-grid-02__slider .hct-banner-slider__dot.is-active {
    background: #fff;
}

@media (max-width: 900px) {
    .hctclient04-home-feature-grid-02__container {
        grid-template-columns: 1fr;
    }

    .hctclient04-home-feature-grid-02__slider.hct-banner-slider {
        aspect-ratio: 4 / 3;
    }
}

/* ===== css/components/home-sections/hctclient04-home-solutions-01.css ===== */
/* HCT CLIENT04 (Thu Hùng An Đông) — HOME SECTION: WHY_CHOOSE_US / layout_why_choose_01 rendered as "Giải Pháp" cards */
.hctclient04-home-solutions-01 {
    padding: clamp(56px, 7vw, 105px) 0;
    background: var(--hctclient04-color-surface-soft);
}

.hctclient04-home-solutions-01__heading {
    display: grid;
    grid-template-columns: 1fr .7fr;
    align-items: end;
    gap: clamp(28px, 5vw, 90px);
    margin-bottom: clamp(32px, 4vw, 55px);
}

.hctclient04-home-solutions-01__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hctclient04-home-solutions-01__eyebrow::before {
    content: '';
    width: 30px;
    height: 1px;
    background: currentColor;
}

.hctclient04-home-solutions-01__title {
    margin: 0;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3.1rem);
    line-height: 1.1;
}

.hctclient04-home-solutions-01__description {
    margin: 0;
    color: var(--hctclient04-color-text-muted);
    font-size: var(--hctclient04-text-body);
    line-height: var(--hctclient04-line-height-relaxed);
}

.hctclient04-home-solutions-01__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--hctclient04-color-border);
}

.hctclient04-home-solutions-01__card {
    padding: 34px 26px;
    background: #fff;
    border-right: 1px solid var(--hctclient04-color-border);
    min-height: 300px;
    position: relative;
    transition: background var(--hctclient04-duration-slow) var(--hctclient04-ease), color var(--hctclient04-duration-slow) var(--hctclient04-ease), transform var(--hctclient04-duration-slow) var(--hctclient04-ease);
}

.hctclient04-home-solutions-01__card:last-child {
    border-right: 0;
}

.hctclient04-home-solutions-01__card:hover {
    transform: translateY(-6px);
    color: #fff;
    background: var(--hctclient04-color-secondary);
}
.hctclient04-home-solutions-01__card:hover h3{color: #fff;}

.hctclient04-home-solutions-01__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 10px 0 22px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--hctclient04-color-primary-soft);
    color: var(--hctclient04-color-secondary);
    font-size: 1.3rem;
}

.hctclient04-home-solutions-01__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hctclient04-home-solutions-01__card h3 {
    margin: 0 0 12px;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: 1.3rem;
}

.hctclient04-home-solutions-01__card p {
    margin: 0;
    color: var(--hctclient04-color-text-muted);
    font-size: .85rem;
    line-height: 1.7;
}

.hctclient04-home-solutions-01__card:hover p {
    color: #d4dcf0;
}

@media (max-width: 900px) {
    .hctclient04-home-solutions-01__heading {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hctclient04-home-solutions-01__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hctclient04-home-solutions-01__cards {
        grid-template-columns: 1fr;
    }

    .hctclient04-home-solutions-01__card {
        border-right: 0;
        border-bottom: 1px solid var(--hctclient04-color-border);
        min-height: 0;
    }

    .hctclient04-home-solutions-01__card:last-child {
        border-bottom: 0;
    }
}

/* ===== css/components/home-sections/hctclient04-home-static-sections.css ===== */
/* HCT CLIENT04 (Thu Hùng An Đông) — HOME: Products (demo), Journal, Contact CTA */

/* ---------- Products (demo tạm, sẽ nối Product module ở Phase 3) ---------- */
.hctclient04-home-products-01 {
    padding: clamp(56px, 7vw, 105px) 0;
    background: #fff;
}

/*
 * Heading canh trái: khối text (eyebrow + title) bên trái, nút "Xem tất cả"
 * bên phải, cùng hàng — dùng flex space-between thay vì khối center cũ.
 * align-items:flex-end để nút CTA neo theo baseline dưới của title (khớp
 * chiều cao dòng chữ lớn), không bị trôi lên giữa khối text nhiều dòng.
 */
.hctclient04-home-products-01__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

.hctclient04-home-products-01__heading-text {
    max-width: 38rem;
}

.hctclient04-home-products-01__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .2em;
}

.hctclient04-home-products-01__eyebrow::before {
    content: '';
    width: 30px;
    height: 1px;
    background: currentColor;
}

.hctclient04-home-products-01__title {
    margin: 0;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 3.1rem);
    line-height: 1.1;
    text-align: left;
}

.hctclient04-home-products-01__title em {
    color: var(--hctclient04-color-secondary);
    font-style: normal;
}

.hctclient04-home-products-01__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    margin-top: 48px;
    text-align: left;
}

.hctclient04-home-products-01__card {
    background: #fff;
}

.hctclient04-home-products-01__visual {
    height: 260px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(140deg, #eef1f8, #dbe3f5);
}

.hctclient04-home-products-01__visual small {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 7px 10px;
    background: #fff;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-font-size-xs);
    font-weight: 800;
    letter-spacing: .1em;
}

.hctclient04-home-products-01__device {
    display: block;
    width: 110px;
    height: 140px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #b3bfe0);
    box-shadow: 16px 18px 26px rgba(15, 23, 42, 0.18);
    transform: rotate(-5deg);
}

.hctclient04-home-products-01__info {
    padding: 18px 4px 0;
}

.hctclient04-home-products-01__info h3 {
    margin: 0 0 6px;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--hctclient04-color-text);
}

.hctclient04-home-products-01__info p {
    margin: 0;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-button);
    font-weight: 700;
}

.hctclient04-home-products-01__more {
    flex: none;
}

.hctclient04-home-products-01__btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 13px 28px;
    border: 1px solid var(--hctclient04-color-border-strong);
    border-radius: 999px;
    color: var(--hctclient04-color-text);
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.hctclient04-home-products-01__btn:hover {
    border-color: var(--hctclient04-color-primary);
    background: var(--hctclient04-color-primary);
    color: #fff;
}

/* ---------- Journal (Cẩm nang kỹ thuật) ---------- */
.hctclient04-home-journal-01 {
    padding: clamp(56px, 7vw, 105px) 0;
    background: #fff;
}

.hctclient04-home-journal-01__head {
    margin-bottom: 42px;
}

.hctclient04-home-journal-01__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .2em;
}

.hctclient04-home-journal-01__eyebrow::before {
    content: '';
    width: 30px;
    height: 1px;
    background: currentColor;
}

.hctclient04-home-journal-01__title {
    margin: 0;
    color: var(--hctclient04-color-heading);
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.9rem);
    line-height: 1.1;
}

.hctclient04-home-journal-01__title em {
    color: var(--hctclient04-color-secondary);
    font-style: normal;
}

.hctclient04-home-journal-01__list {
    border-top: 1px solid var(--hctclient04-color-border);
}

.hctclient04-home-journal-01__item {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    align-items: center;
    gap: 20px;
    padding: 27px 6px;
    border-bottom: 1px solid var(--hctclient04-color-border);
    transition: background var(--hctclient04-duration-fast) var(--hctclient04-ease), padding-left var(--hctclient04-duration-fast) var(--hctclient04-ease);
}

.hctclient04-home-journal-01__item:hover {
    padding-left: 15px;
    background: var(--hctclient04-color-surface-soft);
}

.hctclient04-home-journal-01__index {
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: 1.05rem;
    color: #6f8fc2;
}

.hctclient04-home-journal-01__item h3 {
    margin: 0 0 6px;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: 1.25rem;
}

.hctclient04-home-journal-01__item h3 a {
    color: var(--hctclient04-color-text);
    text-decoration: none;
}

.hctclient04-home-journal-01__item h3 a:hover {
    color: var(--hctclient04-color-secondary);
}

.hctclient04-home-journal-01__item p {
    margin: 0;
    color: var(--hctclient04-color-text-muted);
    font-size: .82rem;
}

.hctclient04-home-journal-01__arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hctclient04-color-border);
    color: var(--hctclient04-color-secondary);
    text-decoration: none;
}

/* ---------- Contact CTA ---------- */
.hctclient04-home-contact-01 {
    /* Nền vàng chủ đạo (--hctclient04-color-primary) — chữ trắng (quy ước: nền vàng luôn đi với chữ trắng, không dùng navy). */
    padding: 80px 0;
    color: #fff;
    background: var(--hctclient04-color-primary);
}

.hctclient04-home-contact-01__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.hctclient04-home-contact-01__eyebrow {
    margin: 0 0 14px;
    color: #fff;
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    letter-spacing: .18em;
}

.hctclient04-home-contact-01__title {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--hctclient04-font-family-heading);
    font-weight: 400;
    font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
    line-height: 1.1;
}

.hctclient04-home-contact-01__title em {
    font-style: normal;
    color: #fff;
}

.hctclient04-home-contact-01__description {
    margin: 0;
    max-width: 600px;
    color: #fff;
    line-height: 1.7;
}

.hctclient04-home-contact-01__call {
    flex: none;
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: var(--hctclient04-text-button);
    font-weight: 800;
    text-align: center;
    transition: background var(--hctclient04-duration-normal) var(--hctclient04-ease), color var(--hctclient04-duration-normal) var(--hctclient04-ease);
}

.hctclient04-home-contact-01__call:hover {
    background: #fff;
    color: var(--hctclient04-color-secondary);
}

@media (max-width: 900px) {
    .hctclient04-home-products-01__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* Hết chỗ ngang: text + nút xuống 2 hàng, nút về lại canh trái theo text bên trên. */
    .hctclient04-home-products-01__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hctclient04-home-products-01__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .hctclient04-home-journal-01__item {
        grid-template-columns: 35px 1fr 37px;
        gap: 8px;
    }

    .hctclient04-home-contact-01__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
}

/* ===== css/components/home-sections/hctclient04-home-intro.css ===== */
/**
 * HCTCLIENT04 HOME INTRO
 * Box giới thiệu công ty (ảnh trái + text phải) — fix cứng theo yêu cầu,
 * nằm ngay trước "Sản phẩm nổi bật".
 */
.hctclient04-home-intro{padding:clamp(48px,6vw,90px) 0}

.hctclient04-home-intro__inner{
    display:grid;
    grid-template-columns:minmax(280px,42%) 1fr;
    gap:clamp(32px,5vw,64px);
    align-items:center;
}

.hctclient04-home-intro__media{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--hctclient04-radius-md);
}

.hctclient04-home-intro__heading{
    margin:0 0 10px;
    color:var(--hctclient04-color-secondary);
    font-weight:800;
    font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);
    text-transform:uppercase;
    letter-spacing:.01em;
    line-height:1.25;
}

.hctclient04-home-intro__subtitle{
    margin:0 0 20px;
    color:var(--hctclient04-color-text-muted);
    font-size:1.05rem;
    line-height:1.4;
}

.hctclient04-home-intro__description{
    margin:0 0 28px;
    max-width:56ch;
    color:var(--hctclient04-color-text);
    font-size:var(--hctclient04-text-body);
    line-height:var(--hctclient04-line-height-relaxed);
}

.hctclient04-home-intro__actions{display:flex;gap:16px;flex-wrap:wrap}

.hctclient04-home-intro__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 34px;
    border-radius:999px;
    background:var(--hctclient04-color-primary);
    color: #fff;
    font-weight:700;
    font-size:.95rem;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .18s ease,transform .18s ease;
}
.hctclient04-home-intro__btn:hover{background:var(--hctclient04-color-primary-hover);transform:translateY(-1px)}

.hctclient04-home-intro__btn-icon{flex:none;margin-right:9px}

@media(max-width:768px){
    .hctclient04-home-intro__inner{grid-template-columns:1fr}
}

/* ===== css/components/home-sections/hctclient04-home-brands-01.css ===== */
/**
 * HCTCLIENT04 HOME BRANDS 01
 * "Những Thương Hiệu Tiêu Biểu" — carousel logo thương hiệu (HctBrand
 * is_active + is_highlight). Số item/dòng: PC 5, Tablet 4, Mobile 3 —
 * đổi qua biến --hctclient04-brands-per-view, JS đọc biến này để tính
 * bước trượt nên CHỈ sửa số lượng ở đây, không cần sửa JS.
 */
.hctclient04-home-brands-01{
    padding:clamp(48px,6vw,90px) 0;
    background:var(--hctclient04-color-surface);
}

.hctclient04-home-brands-01__heading{
    margin-bottom:clamp(28px,3vw,44px);
    text-align:left;
}

.hctclient04-home-brands-01__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size:var(--hctclient04-text-caption);
    font-weight:800;
    letter-spacing:.2em;
}
.hctclient04-home-brands-01__eyebrow::before{content:'';width:30px;height:1px;background:currentColor}

.hctclient04-home-brands-01__title{
    margin:0;
    color:var(--hctclient04-color-heading);
    font-weight:700;
    font-size:clamp(1.5rem,1.3rem + 1vw,2.2rem);
    line-height:1.2;
}

.hctclient04-home-brands-01__carousel{
    --hctclient04-brands-per-view:5;
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
}

.hctclient04-home-brands-01__viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
}

.hctclient04-home-brands-01__track{
    display:flex;
    transition:transform .35s ease;
}

.hctclient04-home-brands-01__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    flex:0 0 calc(100% / var(--hctclient04-brands-per-view));
    padding:0 18px;
    text-decoration:none;
}

.hctclient04-home-brands-01__logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:90%;
    aspect-ratio:1/1;
    border-radius:50%;
    border:1px solid var(--hctclient04-color-border);
    background:#fff;
    overflow:hidden;
}
.hctclient04-home-brands-01__logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hctclient04-home-brands-01__name{
    color:var(--hctclient04-color-text);
    font-weight:700;
    font-size:var(--hctclient04-text-body);
    text-align:center;
    line-height:1.35;
}

/* Nút điều hướng tròn 2 bên — ẩn mặc định qua JS khi số brand <= số item/dòng hiện tại (xem data-hctclient04-brands-carousel[data-hctclient04-brands-hide-nav]). */
.hctclient04-home-brands-01__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:44px;
    height:44px;
    border:1px solid var(--hctclient04-color-border-strong);
    border-radius:50%;
    background:#fff;
    color:var(--hctclient04-color-text);
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hctclient04-home-brands-01__nav:hover{
    border-color: var(--hctclient04-color-primary);
    background:var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-home-brands-01__carousel[data-hctclient04-brands-hide-nav] .hctclient04-home-brands-01__nav{display:none}

@media(max-width:1024px){
    .hctclient04-home-brands-01__carousel{--hctclient04-brands-per-view:4}
}

@media(max-width:640px){
    .hctclient04-home-brands-01__carousel{--hctclient04-brands-per-view:3;gap:8px}
    .hctclient04-home-brands-01__nav{width:36px;height:36px}
    .hctclient04-home-brands-01__item{padding:0 8px;gap:10px}
}

/* ===== css/components/home-sections/hctclient04-home-projects-01.css ===== */
/**
 * HCTCLIENT04 HOME PROJECTS 01
 * "Dự Án Tiêu Biểu" — News thuộc category Dự án tiêu biểu (is_home).
 * Heading đồng bộ style với hctclient04-home-brands-01__heading (eyebrow +
 * title canh trái). Grid 2 item/hàng, ảnh full width + caption đậm bên dưới.
 */
.hctclient04-home-projects-01{
    padding:clamp(48px,6vw,90px) 0;
    background:var(--hctclient04-color-surface);
}

.hctclient04-home-projects-01__heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:clamp(28px,3vw,44px);
    text-align:left;
}

.hctclient04-home-projects-01__more{flex:none}

.hctclient04-home-projects-01__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:13px 28px;
    border:1px solid var(--hctclient04-color-border-strong);
    border-radius:999px;
    color:var(--hctclient04-color-text);
    text-decoration:none;
    font-weight:700;
    font-size:.85rem;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hctclient04-home-projects-01__btn:hover{
    border-color: var(--hctclient04-color-primary);
    background:var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-home-projects-01__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size:var(--hctclient04-text-caption);
    font-weight:800;
    letter-spacing:.2em;
}
.hctclient04-home-projects-01__eyebrow::before{content:'';width:30px;height:1px;background:currentColor}

.hctclient04-home-projects-01__title{
    margin:0;
    color:var(--hctclient04-color-heading);
    font-weight:700;
    font-size:clamp(1.5rem,1.3rem + 1vw,2.2rem);
    line-height:1.2;
}

.hctclient04-home-projects-01__grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(16px,2vw,28px);
}

.hctclient04-home-projects-01__item{
    display:block;
    text-decoration:none;
}

.hctclient04-home-projects-01__media{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:var(--hctclient04-radius-md);
    background:linear-gradient(135deg,var(--hctclient04-color-secondary),var(--hctclient04-color-primary));
}
.hctclient04-home-projects-01__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.hctclient04-home-projects-01__item:hover .hctclient04-home-projects-01__media img{transform:scale(1.04)}

.hctclient04-home-projects-01__name{
    display:block;
    margin-top:14px;
    color:var(--hctclient04-color-heading);
    font-weight:800;
    font-size:var(--hctclient04-text-body-lg,1.05rem);
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1.4;
}

@media(max-width:640px){
    .hctclient04-home-projects-01__heading{flex-direction:column;align-items:flex-start;gap:16px}
    .hctclient04-home-projects-01__grid{grid-template-columns:1fr;gap:20px}
}

/* ===== css/components/home-sections/hctclient04-home-news-01.css ===== */
/**
 * HCTCLIENT04 HOME NEWS 01
 * "Tin Tức Sự Kiện" — 1 tin nổi bật (ảnh + caption băng màu accent bên dưới)
 * + tối đa 4 tin dạng list 2x2 (ảnh nhỏ trái, tên phải, mũi tên cuối dòng).
 * Heading đồng bộ style hctclient04-home-brands-01__heading + nút "Xem tất
 * cả" đồng bộ hctclient04-home-products-01__more.
 */
.hctclient04-home-news-01{
    padding:clamp(48px,6vw,90px) 0;
    background:var(--hctclient04-color-surface-soft);
}

.hctclient04-home-news-01__heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:clamp(28px,3vw,44px);
    text-align:left;
}

.hctclient04-home-news-01__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size:var(--hctclient04-text-caption);
    font-weight:800;
    letter-spacing:.2em;
}
.hctclient04-home-news-01__eyebrow::before{content:'';width:30px;height:1px;background:currentColor}

.hctclient04-home-news-01__title{
    margin:0;
    color:var(--hctclient04-color-heading);
    font-weight:700;
    font-size:clamp(1.5rem,1.3rem + 1vw,2.2rem);
    line-height:1.2;
}

.hctclient04-home-news-01__more{flex:none}
.hctclient04-home-news-01__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:13px 28px;
    border:1px solid var(--hctclient04-color-border-strong);
    border-radius:999px;
    color:var(--hctclient04-color-text);
    text-decoration:none;
    font-weight:700;
    font-size:.85rem;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hctclient04-home-news-01__btn:hover{
    border-color: var(--hctclient04-color-primary);
    background:var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-home-news-01__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(16px,2vw,24px);
    align-items:stretch;
}

/* Tin nổi bật: ảnh full + băng caption màu accent đè phía dưới (góc vuông, giống mockup). */
.hctclient04-home-news-01__featured{
    position:relative;
    display:block;
    min-height:340px;
    overflow:hidden;
    text-decoration:none;
    background:linear-gradient(135deg,var(--hctclient04-color-secondary),var(--hctclient04-color-primary));
}
.hctclient04-home-news-01__featured-media{
    position:absolute;
    inset:0;
}
.hctclient04-home-news-01__featured-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.hctclient04-home-news-01__featured:hover .hctclient04-home-news-01__featured-media img{transform:scale(1.04)}

.hctclient04-home-news-01__featured-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px 22px;
    background:var(--hctclient04-color-accent);
    color:#fff;
    font-weight:800;
    font-size:1.05rem;
    line-height:1.45;
    text-transform:uppercase;
}

/* List 2x2: ảnh full-width trên, hàng tên + nút tròn mũi tên dưới (giống mockup). */
.hctclient04-home-news-01__list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:16px;
    height:100%;
}

.hctclient04-home-news-01__list-item{
    display:flex;
    flex-direction:column;
    background:#fff;
    box-shadow:0 2px 10px rgba(15,23,42,.06);
    text-decoration:none;
    transition:box-shadow .18s ease,transform .18s ease;
}
.hctclient04-home-news-01__list-item:hover{box-shadow:0 8px 18px rgba(15,23,42,.12);transform:translateY(-2px)}

.hctclient04-home-news-01__list-media{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    background:linear-gradient(135deg,var(--hctclient04-color-secondary),var(--hctclient04-color-primary));
}
.hctclient04-home-news-01__list-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}
.hctclient04-home-news-01__list-item:hover .hctclient04-home-news-01__list-media img{transform:scale(1.05)}

.hctclient04-home-news-01__list-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex:1;
    padding:12px 14px;
}

.hctclient04-home-news-01__list-title{
    flex:1;
    min-width:0;
    color:var(--hctclient04-color-text);
    font-weight:700;
    font-size:.88rem;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.hctclient04-home-news-01__list-arrow{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--hctclient04-color-surface-soft);
    color:var(--hctclient04-color-text-muted);
    transition:background-color .18s ease,color .18s ease;
}
.hctclient04-home-news-01__list-item:hover .hctclient04-home-news-01__list-arrow{
    background:var(--hctclient04-color-primary);
    color: #fff;
}

@media(max-width:900px){
    .hctclient04-home-news-01__grid{grid-template-columns:1fr}
    .hctclient04-home-news-01__featured{min-height:260px}
}

@media(max-width:640px){
    .hctclient04-home-news-01__heading{flex-direction:column;align-items:flex-start;gap:16px}
    .hctclient04-home-news-01__list{grid-template-columns:1fr;grid-template-rows:none}
}

/* ===== css/components/home-sections/hctclient04-home-partners-01.css ===== */
/**
 * HCTCLIENT04 HOME PARTNERS 01
 * "Đối Tác Của Chúng Tôi" — carousel logo đối tác (HctPartner is_active +
 * is_home), trước box hctclient04-home-contact-01. Số item/dòng: PC 7,
 * Tablet 5, Mobile 3 — qua --hctclient04-partners-per-view (đổi số lượng
 * chỉ sửa CSS, JS carousel dùng chung với brands-01 tự đọc biến này).
 */
.hctclient04-home-partners-01{
    padding:clamp(40px,5vw,72px) 0;
    background:var(--hctclient04-color-surface-soft);
}

.hctclient04-home-partners-01__heading{
    margin-bottom:clamp(24px,3vw,36px);
    text-align:left;
}

.hctclient04-home-partners-01__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size:var(--hctclient04-text-caption);
    font-weight:800;
    letter-spacing:.2em;
}
.hctclient04-home-partners-01__eyebrow::before{content:'';width:30px;height:1px;background:currentColor}

.hctclient04-home-partners-01__title{
    margin:0;
    color:var(--hctclient04-color-heading);
    font-weight:700;
    font-size:clamp(1.35rem,1.2rem + .8vw,1.9rem);
    line-height:1.2;
}

.hctclient04-home-partners-01__carousel{
    --hctclient04-brands-per-view:7;
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.hctclient04-home-partners-01__viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
}

.hctclient04-home-partners-01__track{
    display:flex;
    transition:transform .35s ease;
}

.hctclient04-home-partners-01__item{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 calc(100% / var(--hctclient04-brands-per-view));
    padding:0 10px;
}

/*
 * Đơn giản, sang trọng: bỏ khung/viền/nền/padding — chỉ còn logo thật, hiện
 * màu đầy đủ ngay từ đầu (không xám nhạt), nhích nhẹ lên khi hover (không đổ
 * bóng nặng). Hover 1 logo -> các logo còn lại trong cùng track hơi mờ/blur
 * nhẹ để tập trung chú ý vào logo đang hover (:has() — trình duyệt hiện đại).
 */
.hctclient04-home-partners-01__logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1;
    transition:transform .18s ease;
}
.hctclient04-home-partners-01__item:hover .hctclient04-home-partners-01__logo{
    transform:translateY(-3px);
}

.hctclient04-home-partners-01__logo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:filter .22s ease,opacity .22s ease;
}

.hctclient04-home-partners-01__track:has(.hctclient04-home-partners-01__item:hover) .hctclient04-home-partners-01__item:not(:hover) .hctclient04-home-partners-01__logo img{
    filter:blur(2px);
    opacity:.6;
}

.hctclient04-home-partners-01__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:36px;
    height:36px;
    border:1px solid var(--hctclient04-color-border-strong);
    border-radius:50%;
    background:#fff;
    color:var(--hctclient04-color-text);
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hctclient04-home-partners-01__nav:hover{
    border-color: var(--hctclient04-color-primary);
    background:var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-home-partners-01__carousel[data-hctclient04-brands-hide-nav] .hctclient04-home-partners-01__nav{display:none}

@media(max-width:1024px){
    .hctclient04-home-partners-01__carousel{--hctclient04-brands-per-view:5}
}

@media(max-width:640px){
    .hctclient04-home-partners-01__carousel{--hctclient04-brands-per-view:3;gap:6px}
    .hctclient04-home-partners-01__nav{width:30px;height:30px}
    .hctclient04-home-partners-01__item{padding:0 6px}
    .hctclient04-home-partners-01__logo{padding:10px}
}

/* ===== css/components/home-sections/hctclient04-home-certifications-01.css ===== */
/**
 * HCTCLIENT04 HOME CERTIFICATIONS 01
 * "Chứng nhận của Thu Hùng An Đông" — carousel ảnh chứng nhận, đặt ngay sau box
 * hctclient04-home-partners-01 ở trang chủ. Dữ liệu: Banner style "Banner
 * Home 4" (is_active=1) — dùng chung HctClientBannerService::home4() với
 * box hctclient04-home-banner-slider (2 box hiển thị cùng data nhưng khác
 * kiểu trình bày, theo yêu cầu). Số item/dòng: PC 5, Mobile 2 — qua biến
 * --hctclient04-brands-per-view (JS carousel dùng chung với brands-01/
 * partners-01, xem hctclient04-home-brands-01.js). Hiện màu đầy đủ, hover 1
 * ảnh -> ảnh khác trong track hơi blur nhẹ (đồng bộ hctclient04-home-partners-01).
 */
.hctclient04-home-certifications-01{
    padding:clamp(40px,5vw,72px) 0;
    background:var(--hctclient04-color-surface-soft);
}

.hctclient04-home-certifications-01__heading{
    margin-bottom:clamp(24px,3vw,36px);
    text-align:left;
}

.hctclient04-home-certifications-01__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size:var(--hctclient04-text-caption);
    font-weight:800;
    letter-spacing:.2em;
}
.hctclient04-home-certifications-01__eyebrow::before{content:'';width:30px;height:1px;background:currentColor}

.hctclient04-home-certifications-01__title{
    margin:0;
    color:var(--hctclient04-color-heading);
    font-weight:700;
    font-size:clamp(1.35rem,1.2rem + .8vw,1.9rem);
    line-height:1.2;
}

.hctclient04-home-certifications-01__carousel{
    --hctclient04-brands-per-view:5;
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.hctclient04-home-certifications-01__viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
}

.hctclient04-home-certifications-01__track{
    display:flex;
    transition:transform .35s ease;
}

.hctclient04-home-certifications-01__item{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 calc(100% / var(--hctclient04-brands-per-view));
    padding:0 10px;
}

.hctclient04-home-certifications-01__logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1;
    transition:transform .18s ease;
}
.hctclient04-home-certifications-01__item:hover .hctclient04-home-certifications-01__logo{
    transform:translateY(-3px);
}

.hctclient04-home-certifications-01__logo img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:filter .22s ease,opacity .22s ease;
}

.hctclient04-home-certifications-01__track:has(.hctclient04-home-certifications-01__item:hover) .hctclient04-home-certifications-01__item:not(:hover) .hctclient04-home-certifications-01__logo img{
    filter:blur(2px);
    opacity:.6;
}

.hctclient04-home-certifications-01__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:36px;
    height:36px;
    border:1px solid var(--hctclient04-color-border-strong);
    border-radius:50%;
    background:#fff;
    color:var(--hctclient04-color-text);
    cursor:pointer;
    transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.hctclient04-home-certifications-01__nav:hover{
    border-color: var(--hctclient04-color-primary);
    background:var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-home-certifications-01__carousel[data-hctclient04-brands-hide-nav] .hctclient04-home-certifications-01__nav{display:none}

@media(max-width:640px){
    .hctclient04-home-certifications-01__carousel{--hctclient04-brands-per-view:2;gap:6px}
    .hctclient04-home-certifications-01__nav{width:30px;height:30px}
    .hctclient04-home-certifications-01__item{padding:0 6px}
}

/* ===== css/components/hctclient04-home-banner-slider.css ===== */
/**
 * HCTCLIENT04 HOME BANNER SLIDER (Banner Home 3)
 * Slider full-width sau box "Sản phẩm nổi bật" — ảnh KHÔNG fix cứng height,
 * width 100% box, height auto theo tỉ lệ ảnh thật.
 */
.hctclient04-home-banner-slider{padding-block:clamp(24px,3vw,40px)}

.hctclient04-home-banner-slider__carousel{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:var(--hctclient04-radius-md);
}

.hctclient04-home-banner-slider__track{position:relative;width:100%}

.hctclient04-home-banner-slider__slide{display:none;width:100%}
.hctclient04-home-banner-slider__slide.is-active{display:block}

.hctclient04-home-banner-slider__slide a,
.hctclient04-home-banner-slider__slide picture{display:block;width:100%}

.hctclient04-home-banner-slider__slide img{
    display:block;
    width:100%;
    height:auto;
}

.hctclient04-home-banner-slider__dots{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    display:flex;
    justify-content:center;
    gap:8px;
}
.hctclient04-home-banner-slider__dots button{
    width:9px;
    height:9px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.hctclient04-home-banner-slider__dots button.is-active{background:#fff}

/* ===== css/components/home-sections/hctclient04-home-featured-categories-01.css ===== */
/*
 * HCT CLIENT04 — HOME: Danh Mục Nổi Bật (mỗi Category is_highlight hiện 1
 * khối riêng, bên trong là grid sản phẩm is_highlight của chính category đó).
 * Tái dùng nguyên class .hctclient04-home-products-01__{heading,eyebrow,
 * title,grid,card,more,btn} (định nghĩa ở hctclient04-home-static-sections.css)
 * cho phần heading/grid/card mỗi khối — file này CHỈ có phần wrapper ngoài
 * (spacing giữa các khối, màu nền so le) để không lặp lại CSS card/grid.
 */
.hctclient04-home-featured-categories-01__block {
    padding: clamp(56px, 7vw, 105px) 0;
    background: var(--hctclient04-color-surface);
}

.hctclient04-home-featured-categories-01__block:nth-child(even) {
    background: var(--hctclient04-color-surface-soft);
}

/* ===== css/components/hctclient04-header-banner-slider.css ===== */
/**
 * HCTCLIENT04 HEADER BANNER SLIDER (Banner Header)
 * Box full-width (100% màn hình) ngay trên cùng trang, trước topbar/header.
 * Ảnh KHÔNG fix cứng height, width 100% màn hình, height auto theo tỉ lệ
 * ảnh thật. 1 ảnh -> hiện tĩnh (không dots). Nhiều ảnh -> auto-slide (dots,
 * không có nút mũi tên qua lại — theo đúng yêu cầu).
 */
.hctclient04-header-banner-slider{width:100%}

.hctclient04-header-banner-slider__carousel{
    position:relative;
    width:100%;
    overflow:hidden;
}

.hctclient04-header-banner-slider__track{position:relative;width:100%}

.hctclient04-header-banner-slider__slide{display:none;width:100%}
.hctclient04-header-banner-slider__slide.is-active{display:block}

.hctclient04-header-banner-slider__slide a,
.hctclient04-header-banner-slider__slide picture{display:block;width:100%}

.hctclient04-header-banner-slider__slide img{
    display:block;
    width:100%;
    height:auto;
}

.hctclient04-header-banner-slider__dots{
    position:absolute;
    left:0;
    right:0;
    bottom:14px;
    display:flex;
    justify-content:center;
    gap:8px;
}
.hctclient04-header-banner-slider__dots button{
    width:9px;
    height:9px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.hctclient04-header-banner-slider__dots button.is-active{background:#fff}

/* ===== css/components/hctclient04-footer-banner-slider.css ===== */
/**
 * HCTCLIENT04 FOOTER BANNER SLIDER (Banner Footer)
 * Box full-width (100% màn hình) ngay dưới cùng trang, ngay sau footer.
 * Ảnh KHÔNG fix cứng height, width 100% màn hình, height auto theo tỉ lệ
 * ảnh thật. 1 ảnh -> hiện tĩnh (không dots). Nhiều ảnh -> auto-slide (dots,
 * không có nút mũi tên qua lại — theo đúng yêu cầu).
 */
.hctclient04-footer-banner-slider{width:100%}

.hctclient04-footer-banner-slider__carousel{
    position:relative;
    width:100%;
    overflow:hidden;
}

.hctclient04-footer-banner-slider__track{position:relative;width:100%}

.hctclient04-footer-banner-slider__slide{display:none;width:100%}
.hctclient04-footer-banner-slider__slide.is-active{display:block}

.hctclient04-footer-banner-slider__slide a,
.hctclient04-footer-banner-slider__slide picture{display:block;width:100%}

.hctclient04-footer-banner-slider__slide img{
    display:block;
    width:100%;
    height:auto;
}

.hctclient04-footer-banner-slider__dots{
    position:absolute;
    left:0;
    right:0;
    bottom:14px;
    display:flex;
    justify-content:center;
    gap:8px;
}
.hctclient04-footer-banner-slider__dots button{
    width:9px;
    height:9px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.hctclient04-footer-banner-slider__dots button.is-active{background:#fff}

/* ===== css/components/hctclient04-product-card.css ===== */
/* HCT CLIENT04 — PRODUCT CARD (dùng chung: trang chủ lẫn trang danh mục sản phẩm) */
.hctclient04-category-product-card{display:flex;flex-direction:column;border:1px solid var(--hctclient04-border,#e1e7f0);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.hctclient04-category-product-card:hover{transform:translateY(-3px);box-shadow:var(--hctclient04-shadow-sm,0 8px 24px rgba(15,23,42,.08))}
.hctclient04-category-product-card .hctclient04-home-products-01__visual{height:auto;aspect-ratio:1/1}
.hctclient04-category-product-card .hctclient04-home-products-01__visual img{width:100%;height:100%;object-fit:cover;object-position:center}
.hctclient04-category-product-card .hctclient04-home-products-01__info{padding:16px 16px 18px}
.hctclient04-category-product-card .hctclient04-home-products-01__info h3{font-size:1rem;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hctclient04-category-product-card .hctclient04-home-products-01__info h3 a{color:var(--hctclient04-text,#1a1a1a);text-decoration:none}

/* Card sản phẩm riêng trong khối "related items" (trang detail) — giảm 3px, tối đa 3 dòng thay vì 2. */
.hctclient04-related-items__card.hctclient04-category-product-card .hctclient04-home-products-01__info h3{font-size:calc(1rem - 3px);min-height:4.05em;-webkit-line-clamp:3}
.hctclient04-category-product-card .hctclient04-home-products-01__info p{margin-top:4px}
.hctclient04-category-product-card__add-to-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;margin-top:14px;padding:0 16px;border:1px solid var(--hctclient04-primary);border-radius:999px;background:transparent;color: var(--hctclient04-color-secondary);font-weight:700;font-size:.88rem;cursor:pointer;transition:background .18s ease,color .18s ease}
.hctclient04-category-product-card__add-to-cart:hover,.hctclient04-category-product-card__add-to-cart:focus-visible{background:var(--hctclient04-color-primary-hover);border-color:var(--hctclient04-color-primary-hover);color:#fff;outline-color:var(--hctclient04-color-primary-hover)}
.hctclient04-category-product-card__add-to-cart.is-loading{opacity:.6;pointer-events:none}

/* ===== css/layout/hctclient04-topbar.css ===== */
/**
 * HCTCLIENT04 TOPBAR
 * Chỉ email (trái) + icon Facebook/YouTube (phải), đúng designheader.png —
 * KHÔNG có dòng thông điệp quảng cáo, KHÔNG có hotline (hotline nằm ở header).
 */
.hctclient04-topbar{background:var(--hctclient04-color-primary);color: #fff}
.hctclient04-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;font-size:var(--hctclient04-text-caption)}

.hctclient04-topbar__email{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.hctclient04-topbar__email:hover{text-decoration:underline}

.hctclient04-topbar__socials{display:flex;align-items:center;gap:16px}
.hctclient04-topbar__socials a{display:inline-flex;color:#fff}
.hctclient04-topbar__socials a:hover{opacity:.8}

/* Dưới 1024px: ẩn hẳn topbar — header mobile đã đủ thông tin liên hệ (bottom-bar có hotline). */
@media(max-width:1024px){
    .hctclient04-topbar{display:none}
}

/* ===== css/layout/hctclient04-header.css ===== */
/* HCTCLIENT04 Shared Header V1 */
.hctclient04-site-header{position:relative;z-index:900;width:100%;background:#fff;transition:box-shadow .18s ease,background-color .18s ease}
.hctclient04-site-header.is-scrolled{position:sticky;top:0;box-shadow:0 10px 34px rgba(15,23,42,.09)}
/*
 * flex-wrap:nowrap CỐ Ý — mọi khối con bên dưới đều co giãn được (flex-shrink
 * + min-width:0), nên hàng header không bao giờ cần xuống dòng ở bất kỳ độ
 * rộng nào ≥1024px (breakpoint mobile). Từng bị lỗi bể bố cục ở khoảng
 * 1024-1200px vì trước đây dùng toàn width cố định cộng dồn vượt quá
 * container thực tế (container co theo gutter, không phải luôn đúng 1200px).
 */
.hctclient04-site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:130px;flex-wrap:nowrap}
.hctclient04-site-header__brand{display:inline-flex;align-items:center;min-width:0;text-decoration:none;flex:0 1 auto}
/*
 * Bề rộng cột logo = đúng bề rộng nút "Danh Mục Tiêu Biểu" / sidebar main-3
 * (240px, theo yêu cầu — đồng bộ 1 con số duy nhất cho cả 4 chỗ) — 2 hàng
 * thẳng cột với nhau.
 */
/* Logo luôn = 100% khung logo-col (không fix width/height trên thẻ img) — chỉ đổi kích thước khung này ở CSS là logo tự co theo. */
.hctclient04-site-header__logo-col{display:flex;align-items:center;justify-content:center;width:260px;height:112px;flex:none}
.hctclient04-site-header__logo{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hctclient04-site-header__text-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;max-width:370px;min-width:0;flex:1 1 auto}
.hctclient04-site-header__company-name{text-align:center;font-family:var(--hctclient04-font-family-accent) !important;font-size:1.25rem;font-weight:var(--hctclient04-font-weight-extrabold);line-height:1.3;color:#0B34A8;text-transform:uppercase;letter-spacing:.005em}
.hctclient04-site-header__tagline{text-align:center;font-size:.95rem;font-weight:var(--hctclient04-font-weight-bold);line-height:1.3;color:#F5A800;text-transform:uppercase;letter-spacing:.05em}
.hctclient04-site-header__right{display:flex;flex-direction:column;justify-content:center;gap:10px;align-items:flex-end;flex:0 1 auto;min-width:0}
.hctclient04-site-header__right-row{display:flex;align-items:center;gap:16px;min-width:0;width:100%}
.hctclient04-site-header__right-row--hotlines{align-self:center}
.hctclient04-site-header__account{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:1px solid var(--hctclient04-color-border);border-radius:50%;background:#fff;color: var(--hctclient04-color-secondary);text-decoration:none;transition:transform .16s ease,color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.hctclient04-site-header__account:hover,.hctclient04-site-header__account:focus-visible{transform:translateY(-1px);border-color: var(--hctclient04-color-primary);background:var(--hctclient04-color-primary-soft);box-shadow:0 8px 20px rgba(15,23,42,.12)}
.hctclient04-site-header__account--avatar{overflow:hidden;border-color: var(--hctclient04-color-primary)}
.hctclient04-site-header__avatar-img{display:block;width:100%;height:100%;object-fit:cover}
.hctclient04-site-header__avatar-fallback{display:inline-grid;place-items:center;width:100%;height:100%;background:var(--hctclient04-color-primary);color: #fff;font-size:.9rem;font-weight:800;text-transform:uppercase}
.hctclient04-mobile-menu__utility .hctclient04-site-header__account{width:38px;height:38px}
.hctclient04-mobile-menu__utility{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:4px 0 16px}

.hctclient04-mobile-menu__cta{display:flex;width:100%;border:0;cursor:pointer;font-family:inherit;align-items:center;justify-content:center;min-height:48px;margin-top:22px;padding:12px 18px;border-radius:999px;background:linear-gradient(135deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover));color:#fff;font-weight:800;text-align:center;text-transform:uppercase;box-shadow:0 12px 26px rgba(15,23,42,.2)}

/*
 * Icon giỏ hàng riêng cho mobile/tablet — ẩn hẳn trên desktop (desktop đã có
 * giỏ hàng trong nav-bar). Hiện đúng 1 nơi tuỳ breakpoint, không trùng lặp.
 */
.hctclient04-site-header__mobile-cart{display:none;position:relative;align-items:center;justify-content:center;color: var(--hctclient04-color-secondary);flex:none}
.hctclient04-site-header__mobile-cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--hctclient04-color-accent);color:#fff;font-size:10px;font-weight:var(--hctclient04-font-weight-bold);display:flex;align-items:center;justify-content:center}
.hctclient04-site-header__mobile-cart-count.is-empty{display:none}

@media(max-width:1200px){.hctclient04-site-header__text-col{max-width:340px}}
@media(max-width:1024px){
    /* Header mobile/tablet: nền màu chủ đạo (vàng), chữ + icon giỏ hàng trắng (đúng quy ước: nền vàng luôn đi với chữ trắng). */
    .hctclient04-site-header{position:sticky;top:0;background:var(--hctclient04-color-primary);box-shadow:0 8px 28px rgba(15,23,42,.16)}
    .hctclient04-site-header__inner{min-height:74px;flex-wrap:nowrap;gap:12px}
    .hctclient04-site-header__brand{flex:1;min-width:0}
    .hctclient04-site-header__logo-col{width:min(60px,18vw);height:60px}
    .hctclient04-site-header__logo{object-position:left center}
    .hctclient04-site-header__text-col{max-width:300px}
    .hctclient04-site-header__company-name{text-align:center;color:#fff;font-size:.95rem;line-height:1.25}
    .hctclient04-site-header__tagline{color:#fff;opacity:1;font-size:.72rem}
    .hctclient04-site-header__mobile-cart{color:#fff}
    .hctclient04-site-header__mobile-cart{display:flex}
    .hctclient04-site-header__right{display:none}
}
@media(max-width:575.98px){
    .hctclient04-site-header__inner{min-height:64px}
    .hctclient04-site-header__company-name{font-size:.85rem}
    .hctclient04-mobile-menu__utility{align-items:stretch;flex-direction:column}
}




/* Search AJAX feedback dùng chung cho header/search page. */
.hctclient04-search-feedback {
    grid-column: 1 / -1;
    margin: -3px 0 0;
    color: var(--hctclient04-color-danger, #c00f28);
    font-size: var(--hctclient04-text-caption);
    font-weight: 600;
    line-height: 1.4;
}

.hctclient04-site-header__search.has-error,
.hctclient04-mobile-menu-search.has-error,
.hctclient04-search-page__form.has-error input {
    border-color: var(--hctclient04-color-danger);
    box-shadow: 0 0 0 3px rgba(192, 15, 40, 0.10);
}

/*
 * Mobile utility: ngôn ngữ và search cùng hàng, cùng chiều cao 40px và cùng
 * ngôn ngữ bo góc 12px với ô search bên cạnh (thay vì 2 hình tròn rời rạc).
 */
.hctclient04-mobile-menu__utility > .hctclient04-language-switcher {
    align-self: center;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.hctclient04-mobile-menu__utility .hctclient04-language-switcher__list {
    gap: 0;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--hctclient04-color-border);
    border-radius: 12px;
}

.hctclient04-mobile-menu__utility .hctclient04-language-switcher__item {
    height: 100%;
}

.hctclient04-mobile-menu__utility .hctclient04-language-switcher__item:not(:last-child) {
    border-right: 1px solid var(--hctclient04-color-border);
}

.hctclient04-mobile-menu__utility .hctclient04-language-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.hctclient04-mobile-menu__utility .hctclient04-language-switcher__link.is-active,
.hctclient04-mobile-menu__utility .hctclient04-language-switcher__link[aria-current="page"] {
    box-shadow: none;
}

/* Search trực tiếp trong Mobile Menu: gọn, cân đối, không mở popup. */
.hctclient04-mobile-menu-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--hctclient04-color-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.05);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.hctclient04-mobile-menu-search:focus-within {
    border-color: var(--hctclient04-color-secondary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.09);
}

.hctclient04-mobile-menu-search input {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--hctclient04-color-text);
    font: inherit;
    font-size: var(--hctclient04-text-meta);
    line-height: 1;
}

.hctclient04-mobile-menu-search input::placeholder {
    color: var(--hctclient04-color-text-muted);
}

.hctclient04-mobile-menu-search__submit {
    appearance: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--hctclient04-color-border);
    background: var(--hctclient04-color-primary-soft);
    color: var(--hctclient04-color-secondary);
    cursor: pointer;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.hctclient04-mobile-menu-search__submit:hover,
.hctclient04-mobile-menu-search__submit:focus-visible {
    background: var(--hctclient04-color-primary);
    color: #fff;
}

.hctclient04-mobile-menu-search__submit:disabled {
    cursor: wait;
    opacity: 0.65;
}

.hctclient04-search-feedback--mobile {
    grid-column: 1 / -1;
    margin-top: -5px;
    padding-left: 2px;
}

@media (max-width: 575.98px) {
    .hctclient04-mobile-menu__utility {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .hctclient04-mobile-menu-search {
        height: 38px;
        grid-template-columns: minmax(0, 1fr) 38px;
    }

    .hctclient04-mobile-menu-search input {
        height: 36px;
        padding-inline: 10px;
        font-size: var(--hctclient04-text-caption);
    }

    .hctclient04-mobile-menu-search__submit {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 374.98px) {
    .hctclient04-mobile-menu__utility {
        grid-template-columns: 1fr;
    }

    .hctclient04-mobile-menu__utility > .hctclient04-language-switcher {
        justify-self: center;
    }
}


/*
 * Thu Hùng An Đông: inline search box, bo tròn. width co giãn (flex-basis +
 * min/max) thay vì width cố định — tự nhỏ lại ở màn hình hẹp hơn thay vì đẩy
 * cả hàng xuống dòng. Không fix height cứng, để padding tự quyết định chiều
 * cao cho cân đối với các phần tử khác trong header.
 */
.hctclient04-site-header__search{display:flex;align-items:center;gap:10px;background:var(--hctclient04-color-surface-soft);border:1px solid var(--hctclient04-color-border);border-radius:var(--hctclient04-radius-pill);padding:6px 6px 6px 22px;flex:1 1 200px;min-width:0;max-width:460px}
.hctclient04-site-header__search input{flex:1;min-width:0;border:none;background:transparent;font-size:var(--hctclient04-text-body);color:var(--hctclient04-color-text)}
.hctclient04-site-header__search input:focus{outline:none}
.hctclient04-site-header__search-submit{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:var(--hctclient04-color-primary);color: #fff;flex:none;cursor:pointer}
.hctclient04-site-header__search-submit:hover{background:var(--hctclient04-color-primary-hover)}

.hctclient04-site-header__actions{display:flex;align-items:center;gap:14px;justify-self:end}

.hctclient04-site-header__phone-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--hctclient04-color-accent);color:#fff;flex:none}

.hctclient04-site-header__hotlines{display:flex;align-items:center;gap:8px;font-weight:var(--hctclient04-font-weight-bold);font-size:var(--hctclient04-text-body-lg);color:var(--hctclient04-color-accent);white-space:nowrap}
.hctclient04-site-header__hotlines a{color:inherit;text-decoration:none}
.hctclient04-site-header__hotlines-sep{opacity:.35;font-weight:var(--hctclient04-font-weight-regular)}

@media(max-width:1024px){
    .hctclient04-site-header__search,.hctclient04-site-header__hotlines,.hctclient04-site-header__phone-icon{display:none}
}

/* ===== css/layout/hctclient04-nav-bar.css ===== */
/**
 * HCTCLIENT04 NAV BAR
 * Đo trực tiếp từ designheader.png (pixel-sample, không áng chừng):
 * - 2 khối bo góc riêng biệt, cách nhau ~5px:
 *   [khối 1: nút "Sản Phẩm Đặc Sản" — nền navy] [khối 2: menu chính pc_main_1 + giỏ hàng — nền vàng cam]
 *   (theo mockup Thu Hùng An Đông: 2 khối KHÁC màu nhau, khác bản gốc SECL cùng 1 màu xanh dương)
 * - Cả 2 khối cao bằng nhau (đo được 77-78px ở ảnh gốc, cùng 1 chiều cao).
 * - Toàn bộ nội dung mỗi khối canh giữa theo chiều dọc (align-items:center).
 */
.hctclient04-nav-bar__inner{display:flex;align-items:stretch;gap:5px}

.hctclient04-nav-bar__sidebar-anchor,
.hctclient04-nav-bar__menu-group{
    display:flex;align-items:center;
    border-radius:var(--hctclient04-radius-sm);
}
/* Khối navy: chữ trắng đủ tương phản. Khối vàng: chữ/icon phải đổi sang navy bên dưới (menu-link, toggle, cart) — trắng trên vàng không đọc được. */
.hctclient04-nav-bar__sidebar-anchor{position:relative;flex:none;width:260px;background:var(--hctclient04-color-secondary);color:#fff;}
.hctclient04-nav-bar__menu-group{flex:1;min-width:0;justify-content:space-between;padding:0 0;background:var(--hctclient04-color-primary);color: #fff;}

.hctclient04-nav-bar__sidebar-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;background:transparent;border:none;color:#fff;padding:0;font-family:var(--hctclient04-font-family-accent);font-weight:var(--hctclient04-font-weight-semibold);font-size:var(--hctclient04-text-meta);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;white-space:nowrap;border-radius:inherit}
.hctclient04-nav-bar__sidebar-toggle:hover{background:rgba(255,255,255,.12)}

.hctclient04-nav-bar__menu{display:flex;align-items:stretch;min-width:0}
.hctclient04-nav-bar__menu .hct-menu{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.hctclient04-nav-bar__menu .hct-menu-item{display:flex;align-items:stretch}
.hctclient04-nav-bar__menu .hct-menu-item__head{display:flex;align-items:center}
/*
 * Text thường (không đậm), chỉ đậm lên khi hover/active — luôn giữ màu trắng,
 * không đổi màu khác. Selector 3 tầng lớp (.hctclient04-nav-bar
 * .hctclient04-nav-bar__menu .hct-menu-link) CỐ Ý đặc trưng hơn rule cũ 2 tầng
 * lớp (.hct-menu--pc-main-1 .hct-menu-link) trong hctclient04-menu-main-1.css
 * — file đó load SAU (priority 70 > 63) nên nếu độ đặc trưng bằng nhau sẽ
 * thắng, từng gây bug chữ luôn đậm/luôn xanh lá dù không hover/active.
 *
 * QUAN TRỌNG: mọi selector ở khối này dùng tổ hợp `>` (con trực tiếp) từ
 * .hct-menu-item cấp 1 xuống .hct-menu-link/.hct-menu-toggle — KHÔNG được bỏ
 * `>` vì sẽ vô tình khớp luôn link/icon bên TRONG .hct-menu-popup (dropdown
 * nền trắng xổ xuống), làm chữ/icon trắng-trên-nền-trắng mất chữ. Từng gây
 * đúng bug này khi rule cũ dùng descendant selector không giới hạn cấp.
 *
 * Nền hover/active/open đặt DUY NHẤT trên .hct-menu-item__head (bo tròn sẵn
 * 21px + overflow:hidden từ base CSS) — 1 khối pill phủ chung cả text lẫn
 * icon. link/toggle bên trong LUÔN nền trong suốt, không có nền riêng —
 * tránh cảnh 2 khối nền tách rời (chữ nhật quanh chữ + hình tròn quanh icon)
 * nhìn rời rạc như trước.
 */
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item > .hct-menu-item__head > .hct-menu-link{display:flex;align-items:center;height:100%;padding:0 20px;color:#fff;font-weight:var(--hctclient04-font-weight-regular);font-size:var(--hctclient04-text-meta);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:transparent}
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item.has-children > .hct-menu-item__head > .hct-menu-link{padding-right:6px}

.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item > .hct-menu-item__head:hover{background:rgba(255,255,255,.14)}
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item > .hct-menu-item__head:hover > .hct-menu-link{color:#fff;font-weight:var(--hctclient04-font-weight-bold);background:transparent}

.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item.is-current > .hct-menu-item__head > .hct-menu-link,
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item.is-active > .hct-menu-item__head > .hct-menu-link,
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item.is-open > .hct-menu-item__head > .hct-menu-link,
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item.is-ui-open > .hct-menu-item__head > .hct-menu-link{
    color:#fff;
    font-weight:var(--hctclient04-font-weight-bold);
    background:transparent;
}

/*
 * Icon mũi tên (nút .hct-menu-toggle, mở dropdown) — LUÔN nền trong suốt
 * (không còn hình tròn riêng), chỉ đổi màu trắng đồng bộ text qua currentColor
 * (border-right/border-bottom). Thu nhỏ hitbox 20x20 + margin-right 16px thay
 * cho padding-right của link đã giảm ở trên — icon nằm sát ngay sau chữ,
 * cùng nằm trong 1 khối nền pill của .hct-menu-item__head khi hover.
 */
.hctclient04-nav-bar .hctclient04-nav-bar__menu > .hct-menu > .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle{
    width:20px;
    height:20px;
    min-width:20px;
    max-width:20px;
    min-height:20px;
    max-height:20px;
    flex:none;
    /*
     * align-self:center BẮT BUỘC phải khai rõ, không dựa vào align-items
     * của .hct-menu-item__head — base CSS (hctclient04-menu-main-1.css) set
     * align-items:stretch ở head với specificity cao hơn rule align-items:
     * center của nav-bar.css, nên head thực chất đang stretch. Icon có
     * height cố định (20px) nên không bị kéo giãn theo, nhưng lại rơi về
     * flex-start (dính lên đầu row) thay vì giữa — đúng y hệt bug trong hình
     * anh gửi. align-self ở đây thắng mọi align-items của cha, không cần
     * sửa lại align-items gốc (tránh đụng chỗ khác đang phụ thuộc stretch).
     */
    align-self:center;
    margin:0 16px 0 0;
    background:transparent !important;
    color:#fff;
    border-radius:0;
}

/*
 * Dropdown xổ xuống (.hct-menu-popup, nền trắng) — item con dùng màu chữ tối
 * mặc định + xanh chủ đạo khi hover/active, giống hệt sidebar/category menu.
 * Base đã đúng ở hctclient04-menu-main-1.css (color:--hctclient04-color-text,
 * hover:--hctclient04-color-primary) — chỉ thiếu state is-current/is-active
 * cho item con nên bổ sung ở đây, KHÔNG đụng lại phần trên (link cấp 1).
 */
.hctclient04-nav-bar .hct-menu-popup .hct-menu-item.is-current > .hct-menu-item__head,
.hctclient04-nav-bar .hct-menu-popup .hct-menu-item.is-active > .hct-menu-item__head{
    background:var(--hctclient04-color-primary-soft, #FDF1D9);
}
.hctclient04-nav-bar .hct-menu-popup .hct-menu-item.is-current > .hct-menu-item__head > .hct-menu-link,
.hctclient04-nav-bar .hct-menu-popup .hct-menu-item.is-active > .hct-menu-item__head > .hct-menu-link{
    color: var(--hctclient04-color-secondary);
    font-weight:var(--hctclient04-font-weight-bold);
}

.hctclient04-nav-bar__cart{display:flex;align-items:center;justify-content:center;gap:6px;height:100%;padding:0 20px;color:#fff;position:relative;flex:none}
.hctclient04-nav-bar__cart-count{position:absolute;top:10px;right:12px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--hctclient04-color-accent);color:#fff;font-size:10px;font-weight:var(--hctclient04-font-weight-bold);display:flex;align-items:center;justify-content:center}
.hctclient04-nav-bar__cart-count.is-empty{display:none}

/*
 * Mobile/tablet: cả nav-bar ẩn hẳn — vai trò của nó (mở menu chính, mở
 * "Danh Mục Tiêu Biểu") đã chuyển xuống bottom-bar cố định ở đáy màn hình
 * (xem hctclient04-bottom-bar.css + product-grid-drawer), tránh trùng lặp
 * 2 chỗ cùng làm 1 việc.
 */
@media(max-width:1024px){
    .hctclient04-nav-bar{display:none}
}

/* ===== css/layout/hctclient04-footer.css ===== */
/**
 * HCTCLIENT04 FOOTER
 * 3 cột (Về chúng tôi / Liên hệ / Fanpage) nền trắng + thanh copyright xanh lá,
 * đúng layout-client04.svg. KHÔNG dùng nền xanh đậm toàn khối như bản Fujin cũ.
 */
.hctclient04-footer{background:var(--hctclient04-color-surface);color:var(--hctclient04-color-text);border-top:1px solid var(--hctclient04-color-border)}
.hctclient04-footer__container{padding-block:var(--hctclient04-space-9)}

.hctclient04-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--hctclient04-space-8)}

.hctclient04-footer__title{margin:0 0 14px;color:var(--hctclient04-color-text);font-family:var(--hctclient04-font-family-base);font-size:var(--hctclient04-text-body);font-weight:var(--hctclient04-font-weight-bold);letter-spacing:.02em;text-transform:uppercase}

.hctclient04-footer__about-text{margin:0;max-width:420px;font-size:var(--hctclient04-text-body);line-height:var(--hctclient04-line-height-relaxed);color:var(--hctclient04-color-text-muted)}

.hctclient04-footer__line{margin:0 0 8px;font-size:var(--hctclient04-text-body);line-height:var(--hctclient04-line-height-relaxed);color:var(--hctclient04-color-text-muted)}
.hctclient04-footer__line a{color:var(--hctclient04-color-text-muted);text-decoration:none}
.hctclient04-footer__line a:hover{color: var(--hctclient04-color-secondary)}

/* Icon đầu dòng cho từng thông tin liên hệ (địa chỉ/MST/hotline/email) — icon canh theo dòng đầu, không co lại khi text dài xuống dòng. */
.hctclient04-footer__line--icon{display:flex;align-items:flex-start;gap:8px}
.hctclient04-footer__line-icon{flex:none;margin-top:2px;color: var(--hctclient04-color-secondary)}
.hctclient04-footer__hotline-sep{opacity:.5}

.hctclient04-footer__fanpage-frame{width:100%;max-width:100%;border-radius:6px;overflow:hidden}
.hctclient04-footer__fanpage-frame .fb-page,
.hctclient04-footer__fanpage-frame iframe{display:block;width:100% !important;max-width:100%}

.hctclient04-footer__bottom{background:var(--hctclient04-color-primary);color: #fff}
.hctclient04-footer__bottom-inner{padding-block:16px;font-size:var(--hctclient04-text-meta)}

@media(max-width:900px){
    .hctclient04-footer__grid{grid-template-columns:1fr 1fr}
    .hctclient04-footer__column:first-child{grid-column:1 / -1}
}
@media(max-width:600px){
    .hctclient04-footer__grid{grid-template-columns:1fr}
}

/* DANH MỤC: menu động (pc_footer position), giữ style dùng chung nếu component khác include lại. */
.hctclient04-footer .hct-menu--pc-footer{display:block;margin:0;padding:0;list-style:none}
.hctclient04-footer .hct-menu--pc-footer .hct-menu-link{display:block;margin:0 0 8px;padding:0;color:var(--hctclient04-color-text-muted);font-size:var(--hctclient04-text-body);line-height:var(--hctclient04-line-height-relaxed);text-decoration:none}
.hctclient04-footer .hct-menu--pc-footer .hct-menu-link:hover{color: var(--hctclient04-color-secondary)}
.hctclient04-footer .hct-menu--pc-footer .hct-menu-toggle,
.hctclient04-footer .hct-menu--pc-footer .hct-sub-menu,
.hctclient04-footer .hct-menu--pc-footer .hct-mega-menu{display:none !important}

.hctclient04-footer__compliance-badge{display:block;width:100%;margin-top:10px}
.hctclient04-footer__compliance-badge img{display:block;width:100%;height:auto}

/* ===== css/layout/hctclient04-hero-row.css ===== */
/**
 * HCTCLIENT04 HERO ROW
 * Trang chủ: sidebar (inline, luôn mở, rộng 240px — đồng bộ với logo/nút
 * toggle) + banner nằm cạnh nhau. Trang khác: chỉ còn banner full-width
 * (banner của category nếu có); sidebar chuyển thành dropdown, mở qua nút
 * ở nav-bar.
 *
 * Chiều cao banner ảnh thật (KHÔNG fix cứng):
 * - Ảnh tự theo tỉ lệ gốc (height:auto), không ép cắt theo 1 khung cố định.
 * - Bản PC: chặn tối đa 350px (object-fit:cover nếu ảnh cao hơn tỉ lệ đó).
 * - Bản mobile (≤1024px): KHÔNG giới hạn chiều cao tối đa, ảnh hiện đủ theo
 *   tỉ lệ thật, full 100% bề rộng.
 */
.hctclient04-hero-row{}
/*background:var(--hctclient04-color-surface-soft)*/
.hctclient04-hero-row__inner{padding-block:var(--hctclient04-space-6)}

.hctclient04-hero-row__inner--home{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--hctclient04-space-6);align-items:start}

/* Không có category (sidebar không render <aside>) -> banner là con duy nhất, chiếm hết cả 2 cột thay vì bị grid nhét vào ô 240px đầu tiên. */
.hctclient04-hero-row__inner--home .hctclient04-hero-row__banner:only-child{grid-column:1/-1}

/* Banner full-width (không category) thì 350px vốn tính cho cột hẹp trở nên quá dẹt -> bỏ trần chiều cao, cho ảnh hiện đúng tỉ lệ gốc như bản mobile. Còn category (2 cột, cột banner hẹp) vẫn giữ trần 350px như cũ. */
.hctclient04-hero-row__banner:only-child img{max-height:none}

.hctclient04-hero-row__banner{border-radius:var(--hctclient04-radius-md);overflow:hidden;background:var(--hctclient04-color-secondary);display:block}
.hctclient04-hero-row__banner picture{display:block;width:100%}
.hctclient04-hero-row__banner img{display:block;width:100%;height:auto;max-height:350px;object-fit:cover}

/* Banner chưa có ảnh thật (Admin > Banner chưa upload) — khối màu placeholder, có min-height riêng để không co về 0. */
.hctclient04-hero-row__banner-placeholder{width:100%;min-height:280px;background:linear-gradient(135deg,var(--hctclient04-color-secondary),var(--hctclient04-color-primary))}
.hctclient04-hero-row__inner--page .hctclient04-hero-row__banner-placeholder{min-height:180px}

.hctclient04-hero-banner-placeholder{width:100%;min-height:280px;background:linear-gradient(120deg,var(--hctclient04-color-secondary) 0%,var(--hctclient04-color-primary) 100%)}

/*
 * Dưới 1024px (đồng bộ breakpoint mobile/tablet toàn site): ẩn hẳn sidebar
 * cạnh banner trang chủ — vai trò của nó đã có nút "Danh mục" ở bottom-bar.
 * Banner full 100% bề rộng, ảnh KHÔNG giới hạn chiều cao tối đa.
 */
@media(max-width:1024px){
    .hctclient04-hero-row__inner--home{display:block}
    .hctclient04-hero-row__inner--home .hctclient04-sidebar-main3--inline{display:none}
    .hctclient04-hero-row__banner img{max-height:none}
}

/* ===== css/components/hctclient04-sidebar-main3.css ===== */
/**
 * HCTCLIENT04 SIDEBAR MAIN-3
 * Danh sách category "Danh Mục Tiêu Biểu" (menu vị trí pc_main_3) — KHÔNG có
 * header nhãn riêng (nút toggle bên ngoài đã ghi rõ tên rồi). Chiều cao khối
 * hiển thị ban đầu (7 item + nút "Xem thêm" nếu có) cố định 350px, cả 2 chế
 * độ inline (trang chủ) và dropdown (trang khác) dùng chung 1 quy tắc.
 * Bấm "Xem thêm" thì khối tự cao thêm để lộ hết phần ẩn.
 */
.hctclient04-sidebar-main3{width:260px;height:350px;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--hctclient04-color-border);border-radius:var(--hctclient04-radius-md)}
.hctclient04-sidebar-main3.is-expanded{height:auto}

.hctclient04-sidebar-main3__list{list-style:none;margin:0;padding:0;background:#fff;flex:none}
.hctclient04-sidebar-main3__item + .hctclient04-sidebar-main3__item{border-top:1px solid var(--hctclient04-color-border)}
.hctclient04-sidebar-main3__item a{display:block;padding:13px 18px;color:var(--hctclient04-color-text);font-size:var(--hctclient04-text-body);text-decoration:none;transition:background-color .14s ease,color .14s ease}
.hctclient04-sidebar-main3__item a:hover{color: var(--hctclient04-color-secondary);background:var(--hctclient04-color-primary-soft)}

.hctclient04-sidebar-main3__list--more .hctclient04-sidebar-main3__item:first-child{border-top:1px solid var(--hctclient04-color-border)}

/* Khung "Xem thêm" — tách biệt hẳn khỏi danh sách phía trên: nền xám nhạt
   riêng, viền trên, mũi tên xoay khi mở. */
.hctclient04-sidebar-main3__more-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;flex:none;
    padding:12px 18px;border:none;border-top:1px solid var(--hctclient04-color-border);
    background:var(--hctclient04-color-surface-soft);color:var(--hctclient04-color-text);
    font-size:var(--hctclient04-text-meta);font-weight:var(--hctclient04-font-weight-semibold);
    cursor:pointer;transition:background-color .14s ease;margin-top:auto;
}
.hctclient04-sidebar-main3__more-toggle:hover{background:var(--hctclient04-color-primary-soft);color: var(--hctclient04-color-secondary)}
.hctclient04-sidebar-main3__more-toggle svg{transition:transform .18s ease}
.hctclient04-sidebar-main3__more-toggle.is-open svg{transform:rotate(180deg)}

/* --- dropdown (trang khác): neo dưới nút, rộng 240px, đè lên nội dung --- */
.hctclient04-nav-bar__sidebar-anchor{position:relative}

.hctclient04-sidebar-main3--dropdown{
    position:absolute;top:calc(100% + 8px);left:0;
    z-index:var(--hctclient04-z-dropdown);
    box-shadow:0 16px 40px rgba(15,23,42,.18);
}

/* ===== css/components/hctclient04-feature-strip.css ===== */
/**
 * HCTCLIENT04 FEATURE STRIP
 * Vận Chuyển / Chất Lượng Đảm Bảo / Thanh Toán / Hỗ Trợ — hiện trên MỌI trang,
 * ngay dưới hero-row, theo đúng thứ tự trong layout-client04.svg.
 */
.hctclient04-feature-strip{padding-block:var(--hctclient04-space-6);border-bottom:1px solid var(--hctclient04-color-border)}
.hctclient04-feature-strip__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:var(--hctclient04-space-5)}

.hctclient04-feature-strip__item{display:flex;align-items:center;gap:14px}
.hctclient04-feature-strip__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--hctclient04-color-feature-icon-soft);color:var(--hctclient04-color-feature-icon);flex:none}
.hctclient04-feature-strip__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hctclient04-feature-strip__text strong{font-size:var(--hctclient04-text-body);color:var(--hctclient04-color-heading);font-weight:var(--hctclient04-font-weight-bold)}
.hctclient04-feature-strip__text em{font-style:normal;font-size:var(--hctclient04-text-caption);color:var(--hctclient04-color-text-muted)}

/*
 * Mobile: LUÔN 2 item/hàng (không rớt xuống 1 cột dù màn hình rất nhỏ) —
 * thu nhỏ icon + chữ + khoảng cách lại cho cân đối với bề rộng hẹp.
 */
@media(max-width:900px){
    .hctclient04-feature-strip__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hctclient04-space-4)}
    .hctclient04-feature-strip__item{gap:10px}
    .hctclient04-feature-strip__icon{width:38px;height:38px}
    .hctclient04-feature-strip__icon svg{width:20px;height:20px}
    .hctclient04-feature-strip__text strong{font-size:.85rem}
    .hctclient04-feature-strip__text em{font-size:.72rem}
}
@media(max-width:400px){
    .hctclient04-feature-strip__inner{gap:var(--hctclient04-space-3)}
    .hctclient04-feature-strip__icon{width:34px;height:34px}
    .hctclient04-feature-strip__icon svg{width:18px;height:18px}
    .hctclient04-feature-strip__text strong{font-size:.78rem}
    .hctclient04-feature-strip__text em{font-size:.68rem}
}

/* ===== css/layout/hctclient04-bottom-bar.css ===== */
/**
 * HCTCLIENT04 BOTTOM BAR
 * Thanh điều hướng dưới cùng — chỉ hiện mobile/tablet (≤1024px), thay thế
 * hamburger header + nút "Danh Mục Tiêu Biểu" nav-bar (2 cái này ẩn ở cùng
 * breakpoint, xem hctclient04-header.css / hctclient04-nav-bar.css).
 * Bố cục: 2 icon Menu/Danh mục canh trái (cách nhau 20px, cách cạnh trái
 * 20px) — hotline rút gọn (icon+nhãn hàng trên, 2 số hàng dưới) đẩy sang
 * phải, cách cạnh phải 20px.
 */
.hctclient04-bottom-bar{display:none}

@media(max-width:1024px){
    .hctclient04-bottom-bar{
        display:flex;align-items:center;justify-content:space-between;
        position:fixed;left:0;right:0;bottom:0;z-index:var(--hctclient04-z-sticky);
        background:#fff;border-top:1px solid var(--hctclient04-color-border);
        box-shadow:0 -6px 20px rgba(15,23,42,.08);
        padding:10px 20px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0));
    }
    /* Nội dung trang không bị thanh này che mất phần cuối. */
    body{padding-bottom:72px}
}

.hctclient04-bottom-bar__nav{display:flex;align-items:center;gap:20px;flex:none}

.hctclient04-bottom-bar__btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:0;border:none;background:transparent;color:var(--hctclient04-color-text-muted);
    font-size:11px;font-weight:var(--hctclient04-font-weight-semibold);cursor:pointer;
}
.hctclient04-bottom-bar__btn:active,
.hctclient04-bottom-bar__btn[aria-expanded="true"]{color: var(--hctclient04-color-secondary)}

.hctclient04-bottom-bar__hotline{
    display:flex;flex-direction:column;align-items:flex-end;gap:2px;
    margin-left:auto;text-decoration:none;color:var(--hctclient04-color-text);
}
.hctclient04-bottom-bar__hotline-row1{display:flex;align-items:center;gap:6px;color:var(--hctclient04-color-text-muted);font-size:11px;font-weight:var(--hctclient04-font-weight-semibold);text-transform:uppercase}
.hctclient04-bottom-bar__hotline-row1 svg{color:var(--hctclient04-color-accent)}
.hctclient04-bottom-bar__hotline-row2{display:flex;align-items:center;gap:6px;color:var(--hctclient04-color-accent);font-size:13px;font-weight:var(--hctclient04-font-weight-bold);white-space:nowrap}
.hctclient04-bottom-bar__hotline-sep{opacity:.4;font-weight:var(--hctclient04-font-weight-regular)}

@media(max-width:374.98px){
    .hctclient04-bottom-bar__hotline-row2{font-size:11px}
}

/* ===== css/components/hctclient04-product-grid-drawer.css ===== */
/**
 * HCTCLIENT04 PRODUCT GRID DRAWER
 * Bottom-sheet mở từ nút "Danh mục" ở bottom-bar — không có logo, header là
 * "DANH MỤC SẢN PHẨM", nội dung dạng grid 2 cột (category con của Sản Phẩm).
 */
.hctclient04-product-grid-drawer{position:fixed;inset:0;z-index:var(--hctclient04-z-mobile-menu);display:flex;align-items:flex-end;pointer-events:none}
.hctclient04-product-grid-drawer.is-open{pointer-events:auto}

.hctclient04-product-grid-drawer__panel{
    width:100%;max-height:70vh;overflow-y:auto;
    background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -16px 40px rgba(15,23,42,.22);
    transform:translateY(100%);transition:transform var(--hctclient04-duration-normal) var(--hctclient04-ease);
    padding-bottom:env(safe-area-inset-bottom,0);
}
.hctclient04-product-grid-drawer.is-open .hctclient04-product-grid-drawer__panel{transform:translateY(0)}

.hctclient04-product-grid-drawer__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;background:var(--hctclient04-color-secondary);color:#fff;
    font-weight:var(--hctclient04-font-weight-bold);font-size:var(--hctclient04-text-meta);
    letter-spacing:.02em;position:sticky;top:0;
}
.hctclient04-product-grid-drawer__close{background:none;border:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px}

.hctclient04-product-grid-drawer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
.hctclient04-product-grid-drawer__item{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:56px;padding:12px;border:1px solid var(--hctclient04-color-border);border-radius:var(--hctclient04-radius-md);
    color:var(--hctclient04-color-text);font-size:var(--hctclient04-text-body);font-weight:var(--hctclient04-font-weight-semibold);
}
.hctclient04-product-grid-drawer__item:hover,
.hctclient04-product-grid-drawer__item:active{border-color: var(--hctclient04-color-primary);color: var(--hctclient04-color-secondary);background:var(--hctclient04-color-primary-soft)}

@media(min-width:1025px){
    .hctclient04-product-grid-drawer{display:none}
}

/* ===== css/components/hctclient04-banner-right-slider.css ===== */
/**
 * HCTCLIENT04 BANNER RIGHT SLIDER
 * Box slide banner "Banner Right" (Admin > Banner) — width 100% cột chứa nó,
 * height auto theo ảnh thật (KHÔNG fix cứng), không border/padding, cách
 * phần dưới 20px. Ẩn hẳn nếu không có banner nào (đã xử lý ở Blade).
 */
.hctclient04-banner-right-slider{
    width:100%;
    margin:0 0 20px;
    border:none;
    padding:0;
    position:relative;
    overflow:hidden;
    border-radius:var(--hctclient04-radius-md);
}

.hctclient04-banner-right-slider__track{
    position:relative;
    width:100%;
}

.hctclient04-banner-right-slider__slide{
    display:none;
    width:100%;
}
.hctclient04-banner-right-slider__slide.is-active{display:block}

.hctclient04-banner-right-slider__slide a,
.hctclient04-banner-right-slider__slide picture{display:block;width:100%}

.hctclient04-banner-right-slider__slide img{
    display:block;
    width:100%;
    height:auto;
}

.hctclient04-banner-right-slider__dots{
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    display:flex;
    justify-content:center;
    gap:6px;
}
.hctclient04-banner-right-slider__dots button{
    width:7px;
    height:7px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.hctclient04-banner-right-slider__dots button.is-active{background:#fff}

/* variant "sidebar" (mặc định): hiện trên desktop trong cột sidebar 260px, tự ẩn trên mobile vì cha .hctclient04-page-layout__sidebar đã display:none ở đó — không cần rule riêng. */

/* variant "mobile-inline": ẩn hẳn trên desktop, chỉ hiện trong luồng content chính ở mobile/tablet. */
.hctclient04-banner-right-slider--mobile-inline{display:none}
@media(max-width:1024px){
    .hctclient04-banner-right-slider--mobile-inline{display:block;margin-top:20px}
}

/* ===== css/hctclient04-layout-legacy.css ===== */
:root {
    /* Legacy aliases: old components stay compatible while consuming V1 tokens. */
    --hctclient04-primary: var(--hctclient04-color-primary);
    --hctclient04-primary-dark: var(--hctclient04-color-primary-hover);
    --hctclient04-text: var(--hctclient04-color-text);
    --hctclient04-white: var(--hctclient04-color-surface);
    --hctclient04-border: var(--hctclient04-color-border);
    --hctclient04-container: var(--hctclient04-container-lg);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--hctclient04-text);
    background: var(--hctclient04-white);
    font-family: var(--hctclient04-font-family-base);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.hctclient04-container {
    width: min(
        calc(100% - 32px),
        var(--hctclient04-container)
    );
    margin-inline: auto;
}

.hctclient04-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    color: #fff;
    background: #000;
    transform: translateY(-160%);
}

.hctclient04-skip-link:focus {
    transform: translateY(0);
}

/* Header */

.hctclient04-header {
    position: relative;
    z-index: 100;
    background: #fff;
}

.hctclient04-header__inner {
    display: flex;
    min-height: 138px;
    align-items: center;
    gap: 32px;
}

.hctclient04-brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    color: var(--hctclient04-color-secondary);
}

.hctclient04-brand__symbol {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border: 3px double currentColor;
    border-radius: 50%;
    font-size: var(--hctclient04-text-section-title);
}

.hctclient04-brand__name {
    font-size: var(--hctclient04-text-panel-title);
    font-weight: 500;
    white-space: nowrap;
}

.hctclient04-desktop-nav {
    min-width: 0;
    margin-left: auto;
}

.hctclient04-header__cta {
    flex: 0 0 auto;
    padding: 13px 27px;
    border-radius: 999px;
    color: #fff;
    background: var(--hctclient04-primary);
    font-size: var(--hctclient04-text-body-lg);
    text-transform: uppercase;
}

.hctclient04-header__cta:hover {
    background: var(--hctclient04-primary-dark);
}

/* Desktop menu */

.hct-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hct-menu--pc {
    display: flex;
    align-items: center;
    gap: 30px;
}

.hct-menu-item {
    position: relative;
}

.hct-menu-item__head {
    display: flex;
    align-items: center;
}

.hct-menu-link {
    display: block;
    padding: 14px 0;
    font-size: var(--hctclient04-text-body-lg);
    white-space: nowrap;
}

.hct-menu-item.is-current > .hct-menu-item__head > .hct-menu-link,
.hct-menu-item.is-active > .hct-menu-item__head > .hct-menu-link {
    color: var(--hctclient04-color-secondary);
}

.hct-menu-toggle {
    width: 28px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.hct-menu-arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.hct-sub-menu,
.hct-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    padding: 12px 20px;
    background: transparent;
}

.hct-sub-menu .hct-menu-link {
    padding: 9px 0;
}

.hct-mega-menu {
    display: grid;
    width: min(900px, 85vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.hct-mega-menu__title {
    margin: 0 0 12px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-body-lg);
}

.hct-mega-menu__items {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Mobile */

.hctclient04-mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
}

.hctclient04-mobile-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--hctclient04-primary);
}

.hctclient04-mobile-menu {
    border-top: 1px solid var(--hctclient04-border);
    background: #fff;
}

.hct-menu--mobile {
    padding: 12px 0 22px;
}

.hct-menu--mobile .hct-menu-item {
    border-bottom: 1px solid var(--hctclient04-border);
}

.hct-menu--mobile .hct-menu-item__head {
    justify-content: space-between;
}

.hct-menu--mobile .hct-menu-link {
    flex: 1;
    padding: 13px 0;
}

.hct-menu--mobile .hct-sub-menu,
.hct-menu--mobile .hct-mega-menu {
    position: static;
    width: 100%;
    padding: 0 0 10px 18px;
    border: 0;
    box-shadow: none;
}

/* Main */

.hctclient04-main {
    min-height: 420px;
}

.hctclient04-home-hero {
    padding-bottom: 36px;
}

.hctclient04-home-main-banner {
    overflow: hidden;
}

/* Breadcrumb */

.hctclient04-breadcrumb {
    border-top: 1px solid var(--hctclient04-border);
    border-bottom: 1px solid var(--hctclient04-border);
    background: #fafafa;
}

.hctclient04-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
    margin: 0;
    list-style: none;
}

.hctclient04-breadcrumb__item:not(:last-child)::after {
    margin-left: 8px;
    color: #999;
    content: "/";
}

/*
 * Footer: KHÔNG đặt lại CSS ở đây. Bản Footer 4-cột từng có ở đây là thiết
 * kế cũ, không khớp cấu trúc HTML/class hiện tại (footer thật là 3 cột, do
 * css/layout/hctclient04-footer.css sở hữu) — để lại sẽ đè lên grid-template
 * -columns đúng và làm footer bị co hẹp về bên trái. Xoá hẳn khối cũ ở đây,
 * chỉ sửa footer trong hctclient04-footer.css.
 */

@media (max-width: 1100px) {
    .hctclient04-header__inner {
        min-height: 94px;
    }

    .hctclient04-desktop-nav,
    .hctclient04-header__cta {
        display: none;
    }

    .hctclient04-mobile-toggle {
        display: block;
        margin-left: auto;
    }

    .hctclient04-brand__symbol {
        width: 58px;
        height: 58px;
        font-size: var(--hctclient04-text-panel-title);
    }

    .hctclient04-brand__name {
        font-size: var(--hctclient04-text-card-title);
    }
}

@media (max-width: 767px) {
    .hctclient04-container {
        width: min(calc(100% - 24px), var(--hctclient04-container));
    }

    .hctclient04-header__inner {
        min-height: 76px;
    }

    .hctclient04-brand__symbol {
        width: 48px;
        height: 48px;
    }

    .hctclient04-brand__name {
        font-size: var(--hctclient04-text-card-title);
    }
}

/*=========*/
.hctclient04-language-switcher {
    display: flex;
    align-items: center;
}

.hctclient04-language-switcher__list {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hctclient04-language-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: var(--hctclient04-text-caption);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.hctclient04-language-switcher__link.is-active {
    cursor: default;
}

.hctclient04-language-switcher__link.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.hctclient04-mobile-menu .hctclient04-language-switcher {
    margin-bottom: 16px;
}

/* ===== css/menus/hctclient04-menu-main-1.css ===== */
/*
 * HCTCLIENT04 Main Menu 1 — Thu Hùng An Đông Style V19
 * Đồng bộ visual với Main 2/3, giữ nguyên hover/submenu/mega của Main 1.
 */

.hctclient04-menu-main-1,
.hct-menu--pc-main-1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    list-style: none;
    border-radius: 18px;
}

.hctclient04-menu-main-1 .hct-menu-item,
.hct-menu--pc-main-1 .hct-menu-item {
    --hct-menu-row-size: 42px;
    position: relative;
    min-width: 0;
}

.hctclient04-menu-main-1 .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item > .hct-menu-item__head {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    overflow: hidden;
    border-radius: 21px;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
    color: var(--hctclient04-color-text, #1a1a1a);
    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-item__head:hover,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-item__head:hover,
.hctclient04-menu-main-1 > .hct-menu-item.is-ui-open > .hct-menu-item__head,
.hct-menu--pc-main-1 > .hct-menu-item.is-ui-open > .hct-menu-item__head {
    transform: translateY(-1px);
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
    background: #fff;
    color: var(--hctclient04-color-secondary);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .09);
}

.hctclient04-menu-main-1 .hct-menu-link,
.hct-menu--pc-main-1 .hct-menu-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    padding: 0 14px;
    box-sizing: border-box;
    color: inherit;
    font-size: var(--hctclient04-text-meta);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hctclient04-menu-main-1 .hct-menu-toggle,
.hct-menu--pc-main-1 .hct-menu-toggle {
    display: grid;
    flex: 0 0 var(--hct-menu-row-size);
    place-items: center;
    width: var(--hct-menu-row-size);
    height: var(--hct-menu-row-size);
    min-width: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-width: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hctclient04-menu-main-1 .hct-menu-toggle:hover,
.hct-menu--pc-main-1 .hct-menu-toggle:hover {
    background: rgba(245, 168, 0, .14);
    color: #08277E;
}



.hct-menu--pc-main-1 .hct-menu-item.is-active > .hct-menu-item__head .hct-menu-toggle{
    background: #fff;
    color: var(--hctclient04-color-secondary);
}
.hct-menu--pc-main-1 .hct-menu-item.is-active > .hct-menu-item__head .hct-menu-toggle:hover{
    background: #fff;
    color: var(--hctclient04-color-secondary);
}

.hctclient04-menu-main-1 .hct-menu-arrow,
.hct-menu--pc-main-1 .hct-menu-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}

.hctclient04-menu-main-1 .hct-menu-item.is-ui-open > .hct-menu-item__head .hct-menu-arrow,
.hct-menu--pc-main-1 .hct-menu-item.is-ui-open > .hct-menu-item__head .hct-menu-arrow,
.hctclient04-menu-main-1 .hct-menu-item.is-open > .hct-menu-item__head .hct-menu-arrow,
.hct-menu--pc-main-1 .hct-menu-item.is-open > .hct-menu-item__head .hct-menu-arrow {
    transform: rotate(225deg) translate(-1px, -1px);
}

.hctclient04-menu-main-1 .hct-menu-item.is-current > .hct-menu-item__head,
.hctclient04-menu-main-1 .hct-menu-item.is-active > .hct-menu-item__head,
.hctclient04-menu-main-1 .hct-menu-item.is-active-path > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-current > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-active > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-active-path > .hct-menu-item__head {
    border-color: var(--hctclient04-color-primary);
    background: linear-gradient(135deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover));
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .2);
}

/* Popup list */
.hctclient04-menu-main-1 .hct-menu-popup,
.hct-menu--pc-main-1 .hct-menu-popup,
.hctclient04-menu-main-1 .hct-sub-menu,
.hct-menu--pc-main-1 .hct-sub-menu {
    position: absolute;
    z-index: var(--hctclient04-z-dropdown, 700);
    top: calc(100% + 9px);
    left: 0;
    min-width: 250px;
    max-width: min(720px, calc(100vw - 32px));
    margin: 0;
    padding: 10px;
    list-style: none;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}

.hctclient04-menu-main-1 [data-hct-sub-menu][hidden],
.hct-menu--pc-main-1 [data-hct-sub-menu][hidden],
.hctclient04-menu-main-1 .hct-menu-popup[hidden],
.hct-menu--pc-main-1 .hct-menu-popup[hidden] {
    display: none !important;
}

.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-item,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-item,
.hctclient04-menu-main-1 .hct-sub-menu .hct-menu-item,
.hct-menu--pc-main-1 .hct-sub-menu .hct-menu-item {
    --hct-menu-row-size: 42px;
    width: 100%;
}

.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-item__head,
.hctclient04-menu-main-1 .hct-sub-menu .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-sub-menu .hct-menu-item__head {
    width: 100%;
    border-radius: 11px;
    background: transparent;
    color: var(--hctclient04-color-text, #1a1a1a);
}

.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-item__head:hover,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-item__head:hover,
.hctclient04-menu-main-1 .hct-sub-menu .hct-menu-item__head:hover,
.hct-menu--pc-main-1 .hct-sub-menu .hct-menu-item__head:hover {
    transform: none;
    border-color: transparent;
    background: var(--hctclient04-color-primary-soft, #FDF1D9);
    color: var(--hctclient04-color-secondary);
    box-shadow: none;
}

.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-link,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-link,
.hctclient04-menu-main-1 .hct-sub-menu .hct-menu-link,
.hct-menu--pc-main-1 .hct-sub-menu .hct-menu-link {
    padding: 0 12px;
    border-radius: 11px;
    font-weight: 400;
}

.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-popup,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-popup,
.hctclient04-menu-main-1 .hct-sub-menu .hct-sub-menu,
.hct-menu--pc-main-1 .hct-sub-menu .hct-sub-menu {
    top: -10px;
    left: calc(100% + 8px);
}

/* Mega: chỉ một box ngoài, không tạo style box cho group bên trong. */
.hctclient04-menu-main-1 .hct-menu-popup--mega.hct-mega-menu,
.hct-menu--pc-main-1 .hct-menu-popup--mega.hct-mega-menu,
.hctclient04-menu-main-1 > .hct-menu-item > .hct-mega-menu,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-mega-menu {
    display: grid;
    position: absolute;
    z-index: var(--hctclient04-z-dropdown, 700);
    top: calc(100% + 9px);
    left: 50%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    width: max-content;
    min-width: min(620px, calc(100vw - 32px));
    max-width: min(920px, calc(100vw - 32px));
    margin: 0;
    padding: 12px;
    transform: translateX(-50%);
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}

.hctclient04-menu-main-1 .hct-menu-popup--mega.hct-mega-menu[hidden],
.hct-menu--pc-main-1 .hct-menu-popup--mega.hct-mega-menu[hidden],
.hctclient04-menu-main-1 > .hct-menu-item > .hct-mega-menu[hidden],
.hct-menu--pc-main-1 > .hct-menu-item > .hct-mega-menu[hidden] {
    display: none !important;
}

.hctclient04-menu-main-1 .hct-mega-menu__group,
.hct-menu--pc-main-1 .hct-mega-menu__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hctclient04-menu-main-1 .hct-mega-menu__title,
.hct-menu--pc-main-1 .hct-mega-menu__title {
    margin: 0 0 7px;
    padding: 0 8px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-caption);
    font-weight: 800;
    text-transform: uppercase;
}

.hctclient04-menu-main-1 .hct-mega-menu__items,
.hct-menu--pc-main-1 .hct-mega-menu__items {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hctclient04-menu-main-1 [role="menuitem"]:focus-visible,
.hct-menu--pc-main-1 [role="menuitem"]:focus-visible {
    outline: 2px solid var(--hctclient04-color-primary);
    outline-offset: 2px;
}

/* Group "News Menu"/"Product Menu": 1 bài chính có ảnh + danh sách chỉ tiêu đề. */
.hctclient04-menu-main-1 .hct-mega-menu__group--content,
.hct-menu--pc-main-1 .hct-mega-menu__group--content {
    grid-column: span 2;
    min-width: 260px;
}

.hctclient04-menu-main-1 .hct-mega-menu__content-list,
.hct-menu--pc-main-1 .hct-mega-menu__content-list {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 12px;
    align-items: start;
}

.hctclient04-menu-main-1 .hct-mega-menu__featured,
.hct-menu--pc-main-1 .hct-mega-menu__featured {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--hctclient04-color-text, #20283b);
}

.hctclient04-menu-main-1 .hct-mega-menu__featured-media,
.hct-menu--pc-main-1 .hct-mega-menu__featured-media {
    display: block;
    width: 132px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hctclient04-color-surface-alt, #f2f5f3);
}

.hctclient04-menu-main-1 .hct-mega-menu__featured-media img,
.hct-menu--pc-main-1 .hct-mega-menu__featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hctclient04-menu-main-1 .hct-mega-menu__featured-title,
.hct-menu--pc-main-1 .hct-mega-menu__featured-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hctclient04-menu-main-1 .hct-mega-menu__featured:hover .hct-mega-menu__featured-title,
.hct-menu--pc-main-1 .hct-mega-menu__featured:hover .hct-mega-menu__featured-title {
    color: var(--hctclient04-color-secondary);
}

.hctclient04-menu-main-1 .hct-mega-menu__text-list,
.hct-menu--pc-main-1 .hct-mega-menu__text-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hctclient04-menu-main-1 .hct-mega-menu__text-list a,
.hct-menu--pc-main-1 .hct-mega-menu__text-list a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--hctclient04-color-text, #20283b);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.45;
}

.hctclient04-menu-main-1 .hct-mega-menu__text-list a:hover,
.hct-menu--pc-main-1 .hct-mega-menu__text-list a:hover {
    color: var(--hctclient04-color-secondary);
}

@media (max-width: 1199px) {
    .hctclient04-menu-main-1,
    .hct-menu--pc-main-1 {
        gap: 18px;
        padding: 6px;
    }

    .hctclient04-menu-main-1 .hct-menu-link,
    .hct-menu--pc-main-1 .hct-menu-link {
        padding-inline: 4px;
        font-size: var(--hctclient04-text-meta);
    }
}

@media (max-width: 991px) {
    .hctclient04-menu-main-1,
    .hct-menu--pc-main-1 {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hctclient04-menu-main-1 *,
    .hct-menu--pc-main-1 * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ========================================================================== 
   V20 — Main 1 alignment / submenu wrapper / full-width mega fixes
   ========================================================================== */

/* Root is the positioning context for full-width mega menus. */
.hctclient04-menu-main-1,
.hct-menu--pc-main-1 {
    position: relative;
}

/* Ensure text is vertically centered in every state, including active/current. */
.hctclient04-menu-main-1 .hct-menu-link > .hct-menu-title,
.hct-menu--pc-main-1 .hct-menu-link > .hct-menu-title {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 0;
    line-height: 1.2;
}

/* Top-level labels are also visually centered inside their pill. */
.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-item__head > .hct-menu-link {
    justify-content: center;
}

/*
 * List submenu owns exactly one visual box: .hct-menu-popup.
 * The inner wrapper and UL are layout-only and must not receive popup styling.
 */
.hctclient04-menu-main-1 .hct-menu-popup--submenu,
.hct-menu--pc-main-1 .hct-menu-popup--submenu {
    position: absolute;
    z-index: var(--hctclient04-z-dropdown, 700);
    top: calc(100% + 9px);
    min-width: 250px;
    max-width: min(720px, calc(100vw - 32px));
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}

/* Top-level list submenu is centered under its own parent item. */
.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-popup--submenu,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-popup--submenu {
    left: 50%;
    transform: translateX(-50%);
}

.hctclient04-menu-main-1 .hct-menu-popup--submenu > .hct-menu-popup__inner,
.hct-menu--pc-main-1 .hct-menu-popup--submenu > .hct-menu-popup__inner {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.hctclient04-menu-main-1 .hct-menu-popup--submenu > .hct-menu-popup__inner > .hct-sub-menu,
.hct-menu--pc-main-1 .hct-menu-popup--submenu > .hct-menu-popup__inner > .hct-sub-menu {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Recursive list submenu: position only the popup of the child item. */
.hctclient04-menu-main-1 .hct-menu-popup--submenu .hct-menu-item > .hct-menu-popup--submenu,
.hct-menu--pc-main-1 .hct-menu-popup--submenu .hct-menu-item > .hct-menu-popup--submenu {
    top: -10px;
    left: calc(100% + 8px);
}

/*
 * Mega at level 1 spans the full Main 1 menu width and starts at root left 0.
 * position: static removes the LI as containing block, so the root menu controls it.
 */
.hctclient04-menu-main-1 > .hct-menu-item.has-groups,
.hct-menu--pc-main-1 > .hct-menu-item.has-groups {
    position: static;
}

.hctclient04-menu-main-1 > .hct-menu-item.has-groups > .hct-menu-popup--mega.hct-mega-menu,
.hct-menu--pc-main-1 > .hct-menu-item.has-groups > .hct-menu-popup--mega.hct-mega-menu {
    top: calc(100% + 9px);
    right: auto;
    left: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transform: none;
}

/*
 * Thu Hùng An Đông restyle: nav phẳng kiểu mockup (chữ đậm, không pill nền),
 * ghi đè phần trên — giữ nguyên cấu trúc/submenu/mega gốc, chỉ đổi màu sắc/hình dạng.
 */
.hctclient04-menu-main-1,
.hct-menu--pc-main-1 {
    justify-content: flex-start;
    gap: 0;
}

.hctclient04-menu-main-1 .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item > .hct-menu-item__head {
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    background: transparent;
    color: var(--hctclient04-color-text);
    box-shadow: none;
}

.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-item__head:hover,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-item__head:hover,
.hctclient04-menu-main-1 > .hct-menu-item.is-ui-open > .hct-menu-item__head,
.hct-menu--pc-main-1 > .hct-menu-item.is-ui-open > .hct-menu-item__head {
    transform: none;
    background: transparent;
    color: var(--hctclient04-color-secondary);
    box-shadow: none;
}

.hctclient04-menu-main-1 .hct-menu-item.is-current > .hct-menu-item__head,
.hctclient04-menu-main-1 .hct-menu-item.is-active > .hct-menu-item__head,
.hctclient04-menu-main-1 .hct-menu-item.is-active-path > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-current > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-active > .hct-menu-item__head,
.hct-menu--pc-main-1 .hct-menu-item.is-active-path > .hct-menu-item__head {
    background: transparent;
    color: var(--hctclient04-color-secondary);
    box-shadow: none;
}

.hctclient04-menu-main-1 .hct-menu-link,
.hct-menu--pc-main-1 .hct-menu-link {
    padding: 0;
    font-size: var(--hctclient04-text-body);
    font-weight: 700;
}

/*
 * Đã gỡ 1 block .hct-menu-toggle trùng lặp/xung đột từng nằm ở đây: đè
 * width:20px + height:100% lên trên định nghĩa hình tròn 42x42 gốc ở trên
 * — 2 định nghĩa cùng specificity, block sau thắng, làm icon méo thành oval
 * cao/hẹp thay vì tròn, và trông "xa" chữ. Màu icon (default/hover/active)
 * nay do hctclient04-nav-bar.css xử lý riêng cho ngữ cảnh nav-bar xanh
 * dương, không cần định nghĩa lại ở đây nữa.
 */

.hctclient04-menu-main-1 .hct-sub-menu,
.hct-menu--pc-main-1 .hct-sub-menu,
.hctclient04-menu-main-1 .hct-menu-popup,
.hct-menu--pc-main-1 .hct-menu-popup {
    top: calc(100% + 16px);
    border: 1px solid var(--hctclient04-color-border);
    border-radius: var(--hctclient04-radius-sm);
    box-shadow: var(--hctclient04-shadow-md);
}

.hctclient04-menu-main-1 .hct-sub-menu .hct-menu-item__head:hover,
.hct-menu--pc-main-1 .hct-sub-menu .hct-menu-item__head:hover,
.hctclient04-menu-main-1 .hct-menu-popup .hct-menu-item__head:hover,
.hct-menu--pc-main-1 .hct-menu-popup .hct-menu-item__head:hover {
    background: var(--hctclient04-color-primary-soft);
    color: var(--hctclient04-color-secondary);
}

/*
 * Fix: nhãn menu bị cắt đầu/cuối chữ. Nguyên nhân: các item top-level được
 * phép co (min-width:0, flex-shrink mặc định) khi cột nav trong header
 * (grid minmax(0,1fr)) hết chỗ — overflow:hidden trên head/link khi đó cắt
 * chữ ở cả 2 đầu vì text được canh giữa trong 1 box hẹp hơn chính nó.
 * Never để item co nhỏ hơn nội dung; hết chỗ thì xuống dòng (đã có flex-wrap:wrap).
 */
.hctclient04-menu-main-1 > .hct-menu-item,
.hct-menu--pc-main-1 > .hct-menu-item {
    flex: 0 0 auto;
    min-width: max-content;
}

.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-item__head {
    overflow: visible;
}

.hctclient04-menu-main-1 > .hct-menu-item > .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-main-1 > .hct-menu-item > .hct-menu-item__head > .hct-menu-link {
    overflow: visible;
    text-overflow: clip;
}

/*
 * Bớt gap ở màn hẹp hơn để nav còn đủ chỗ trước khi phải xuống dòng
 * (đặt sau khối restyle Thu Hùng An Đông để thắng đúng theo thứ tự cascade).
 */
@media (max-width: 1300px) {
    .hctclient04-menu-main-1,
    .hct-menu--pc-main-1 {
        gap: 18px;
    }
}

@media (max-width: 1100px) {
    .hctclient04-menu-main-1,
    .hct-menu--pc-main-1 {
        gap: 12px;
    }

    .hctclient04-menu-main-1 .hct-menu-link,
    .hct-menu--pc-main-1 .hct-menu-link {
        font-size: var(--hctclient04-text-meta);
    }
}

/* ===== css/menus/hctclient04-menu-mobile.css ===== */
/* HCTCLIENT04 Mobile Left Drawer + Fixed Full Drill Panels V4 */
body.hctclient04-mobile-menu-open { overflow: hidden; touch-action: none; }
.hctclient04-mobile-menu { position: fixed; inset: 0; z-index: var(--hctclient04-z-modal, 99999); display: block; border: 0; background: transparent; }
.hctclient04-mobile-menu[hidden] { display: none !important; }
.hctclient04-mobile-menu__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(16,24,40,.62); backdrop-filter: blur(3px); }
.hctclient04-mobile-menu__panel {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
    width: min(88vw, 390px); max-width: 100%; display: flex; flex-direction: column;
    overflow: hidden; background: #fff; box-shadow: 18px 0 45px rgba(0,0,0,.22);
}
.hctclient04-mobile-menu__topbar { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 88px; padding: 12px 58px 12px 18px; border-bottom: 1px solid var(--hctclient04-border); }
.hctclient04-mobile-menu__logo { display: flex; align-items: center; justify-content: center; width: 80%; max-width: 80%; min-width: 0; }
.hctclient04-mobile-menu__logo img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 62px; object-fit: contain; }
.hctclient04-mobile-menu__close { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: var(--hctclient04-icon-size-lg); line-height: 1; cursor: pointer; transform: translateY(-50%); }
.hctclient04-mobile-menu__close:hover,.hctclient04-mobile-menu__close:focus-visible { color: var(--hctclient04-color-secondary); background: rgba(0,0,0,.05); }
.hctclient04-mobile-menu__body { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; padding: 0 18px; }
.hctclient04-mobile-menu__body > .hctclient04-language-switcher { flex: 0 0 auto; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hctclient04-border); }

/* Strong mobile language active state. */
.hctclient04-mobile-menu .hctclient04-language-switcher__link.is-active,
.hctclient04-mobile-menu .hctclient04-language-switcher__link[aria-current="page"] {
    border-color: var(--hctclient04-color-primary);
    background: var(--hctclient04-primary);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hctclient04-primary) 18%, transparent);
}

.hctclient04-mobile-drill-head { flex: 0 0 auto; padding: 8px 0; border-bottom: 1px solid var(--hctclient04-border); }
.hctclient04-mobile-drill-back { display: flex; align-items: center; width: 100%; gap: 10px; min-height: 42px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.hctclient04-mobile-drill-back__icon { flex: 0 0 auto; font-size: var(--hctclient04-icon-size-md); }
.hctclient04-mobile-drill-back [data-hctclient04-mobile-back-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-hctclient04-mobile-nav] { position: relative; min-height: 0; flex: 1; overflow: hidden; isolation: isolate; }
[data-hctclient04-mobile-nav] .hctclient04-menu-mobile,[data-hctclient04-mobile-nav] .hct-sub-menu,[data-hctclient04-mobile-nav] .hct-mega-menu,[data-hctclient04-mobile-nav] .hct-mega-menu__items { width: 100%; margin: 0; padding: 0; list-style: none; }
[data-hctclient04-mobile-nav] { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
[data-hctclient04-mobile-nav] .hct-menu-item { position: static !important; border-bottom: 1px solid var(--hctclient04-border); }
[data-hctclient04-mobile-nav] .hct-menu-item__head { display: flex; align-items: stretch; justify-content: space-between; min-width: 0; }
[data-hctclient04-mobile-nav] .hct-menu-link { flex: 1; min-width: 0; padding: 14px 8px 14px 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
[data-hctclient04-mobile-nav] .hct-menu-link:hover,[data-hctclient04-mobile-nav] .hct-menu-link:focus-visible,[data-hctclient04-mobile-nav] .is-current > .hct-menu-item__head > .hct-menu-link,[data-hctclient04-mobile-nav] .is-active > .hct-menu-item__head > .hct-menu-link { color: var(--hctclient04-color-secondary); }
[data-hctclient04-mobile-nav] .hct-menu-toggle { display: grid; flex: 0 0 48px; place-items: center; width: 48px; min-height: 48px; border-left: 1px solid var(--hctclient04-border); }
[data-hctclient04-mobile-nav] .hct-menu-toggle:hover,[data-hctclient04-mobile-nav] .hct-menu-toggle:focus-visible { color: var(--hctclient04-color-secondary); background: rgba(0,0,0,.04); }
[data-hctclient04-mobile-nav] .hct-menu-arrow { transform: rotate(-45deg); }

/* Panel coordinates are written by JS from the actual nav viewport rectangle. */
[data-hctclient04-mobile-nav] [data-hctclient04-mobile-panel] {
    position: fixed !important;
    top: var(--hct-mobile-panel-top, 0) !important;
    left: var(--hct-mobile-panel-left, 0) !important;
    z-index: 100000;
    display: none;
    width: var(--hct-mobile-panel-width, min(88vw, 390px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--hct-mobile-panel-height, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transform: none !important;
}
[data-hctclient04-mobile-nav] [data-hctclient04-mobile-panel].is-mobile-panel-active { display: block !important; }
[data-hctclient04-mobile-nav] .hct-menu-popup__inner { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 24px; background: #fff; border: 0; box-shadow: none; }

/* Critical reset against base theme absolute/desktop submenu rules. */
[data-hctclient04-mobile-nav] .hct-menu-popup__inner > .hct-sub-menu,
[data-hctclient04-mobile-nav] .hct-menu-popup__inner > .hct-mega-menu {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
[data-hctclient04-mobile-nav] .hct-mega-menu { display: block; }
[data-hctclient04-mobile-nav] .hct-mega-menu__group { display: block; padding: 0; }
[data-hctclient04-mobile-nav] .hct-mega-menu__title { margin: 0; padding: 14px 0 8px; color: var(--hctclient04-color-secondary); font-size: var(--hctclient04-text-meta); text-transform: uppercase; }
[data-hctclient04-mobile-nav] .hct-mega-menu__content-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; }
[data-hctclient04-mobile-nav] .hct-mega-menu__featured { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
[data-hctclient04-mobile-nav] .hct-mega-menu__featured-media { flex: none; width: 84px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--hctclient04-color-surface-alt, #f2f5f3); }
[data-hctclient04-mobile-nav] .hct-mega-menu__featured-media img { width: 100%; height: 100%; object-fit: cover; }
[data-hctclient04-mobile-nav] .hct-mega-menu__featured-title { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
[data-hctclient04-mobile-nav] .hct-mega-menu__text-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
[data-hctclient04-mobile-nav] .hct-mega-menu__text-list a { display: block; color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.45; padding-left: 12px; position: relative; }
[data-hctclient04-mobile-nav] .hct-mega-menu__text-list a::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--hctclient04-primary); }

@media (prefers-reduced-motion: no-preference) {
    .hctclient04-mobile-menu__backdrop { animation: hctclient04-mobile-backdrop-in 180ms ease both; }
    .hctclient04-mobile-menu__panel { animation: hctclient04-mobile-panel-in-left 220ms ease both; }
    [data-hctclient04-mobile-nav] [data-hctclient04-mobile-panel].is-mobile-panel-active { animation: hctclient04-mobile-drill-in 180ms ease both; }
}
@keyframes hctclient04-mobile-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hctclient04-mobile-panel-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes hctclient04-mobile-drill-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 1101px) { .hctclient04-mobile-menu { display: none !important; } }


/* V5: active language state applies both outside and inside mobile menu. */
.hctclient04-language-switcher__link.is-active,
.hctclient04-language-switcher__link[aria-current="page"] {
    border-color: var(--hctclient04-color-primary) !important;
    background: var(--hctclient04-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hctclient04-primary) 18%, transparent);
    cursor: default;
}

/* Every nested item with a real panel remains a drill row; nested panels never flow inline. */
[data-hctclient04-mobile-nav] [data-hctclient04-mobile-item] > [data-hctclient04-mobile-panel] {
    display: none !important;
}
[data-hctclient04-mobile-nav] [data-hctclient04-mobile-item] > [data-hctclient04-mobile-panel].is-mobile-panel-active {
    display: block !important;
}


/* V6: all drill panels are detached from nested LI elements into one host. */
.hctclient04-mobile-panel-host {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
}

.hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    pointer-events: auto;
}

.hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel].is-mobile-panel-active {
    display: block !important;
}

.hctclient04-mobile-panel-host .hct-menu-popup__inner {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 18px 24px;
    background: #fff;
}

/* Nested panels must never remain inside a menu row after JS initialization. */
[data-hctclient04-mobile-nav] [data-hctclient04-mobile-item] > [data-hctclient04-mobile-panel] {
    display: none !important;
}


/* V8 definitive detached-panel reset: panel host is a sibling of root UL. */
/*
 * IMPORTANT:
 * Do not target the detached panel element itself with `.hct-mega-menu`.
 * A mega panel also owns that class. Applying `display: block !important`
 * directly to it overrides both `[hidden]` and the inactive-panel rule,
 * leaving an old drill visible underneath the newly opened branch.
 */
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel] .hct-sub-menu,
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel] .hct-mega-menu:not([data-hctclient04-mobile-panel]),
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel] .hct-mega-menu__items {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    list-style: none !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-menu-item {
    position: static !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid var(--hctclient04-border) !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-menu-item__head {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-menu-link {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 14px 8px 14px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-menu-toggle {
    display: grid !important;
    flex: 0 0 48px !important;
    place-items: center !important;
    width: 48px !important;
    min-height: 48px !important;
    border-left: 1px solid var(--hctclient04-border) !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-menu-arrow {
    transform: rotate(-45deg) !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host .hct-mega-menu__group {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}


/* =========================================================
 * V22 — Shared backdrop + single visible drill panel
 * ========================================================= */
.hctclient04-mobile-menu {
    z-index: 1010;
    pointer-events: none;
}

.hctclient04-mobile-menu__panel {
    pointer-events: auto;
}

/* The old private backdrop is no longer rendered. */
.hctclient04-mobile-menu__backdrop {
    display: none !important;
}

.hctclient04-mobile-panel-host {
    pointer-events: none;
}

.hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel].is-mobile-panel-active {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =========================================================
 * V24 — definitive inactive-panel guard
 * Keep this block at the very end of the file.
 * It intentionally wins over legacy V4/V5/V6/V8 menu rules.
 * ========================================================= */
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel],
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel][hidden],
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel][aria-hidden="true"],
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel]:not(.is-mobile-panel-active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel].is-mobile-panel-active:not([hidden]),
[data-hctclient04-mobile-nav] .hctclient04-mobile-panel-host > [data-hctclient04-mobile-panel].is-mobile-panel-active[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* =========================================================
 * V25 — Mobile Menu must stay above Shared Backdrop
 * ========================================================= */
:root {
    --hctclient04-ui-z-mobile-menu: 1010;
}

body > [data-hctclient04-mobile-menu] {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--hctclient04-ui-z-mobile-menu) !important;
    isolation: isolate;
}

body > [data-hctclient04-mobile-menu] > .hctclient04-mobile-menu__panel {
    position: absolute;
    z-index: 1;
}

/* ===== css/menus/hctclient04-menu-secondary.css ===== */
/* HCT Client04 V14: Main 2, Main 3 and Footer — Thu Hùng An Đông visual language. */
.hctclient04-home-menu-section {
    position: relative;
    padding: clamp(30px, 5vw, 58px) 0;
}
.hctclient04-home-menu-section::before {
    content: "";
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(244, 248, 246, .86), rgba(255, 255, 255, .94));
}
.hctclient04-home-menu-section__head {
    margin-bottom: 20px;
    text-align: center;
}
.hctclient04-home-menu-section__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 7px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-panel-title);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-transform: uppercase;
}
.hctclient04-home-menu-section__title::before,
.hctclient04-home-menu-section__title::after {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--hctclient04-color-primary);
    transform: rotate(-18deg);
}
.hctclient04-home-menu-section__desc {
    max-width: 680px;
    margin: 0 auto;
    color: var(--hctclient04-color-text-muted, #5b5b5b);
    font-size: var(--hctclient04-text-body);
}

.hct-menu--pc-main-2,
.hct-menu--pc-main-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 14px;
    list-style: none;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
}
.hct-menu--pc-main-2 .hct-menu-item,
.hct-menu--pc-main-3 .hct-menu-item { position: relative; min-width: 0; }
.hct-menu--pc-main-2 .hct-menu-item__head,
.hct-menu--pc-main-3 .hct-menu-item__head {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    background: var(--hctclient04-color-surface-soft, #f2f5fa);
    color: var(--hctclient04-color-text, #1a1a1a);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.hct-menu--pc-main-2 > .hct-menu-item > .hct-menu-item__head:hover,
.hct-menu--pc-main-3 > .hct-menu-item > .hct-menu-item__head:hover {
    transform: translateY(-1px);
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
    background: #fff;
    color: var(--hctclient04-color-secondary);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .09);
}
.hct-menu--pc-main-2 .hct-menu-link,
.hct-menu--pc-main-3 .hct-menu-link {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;
    color: inherit;
    font-size: var(--hctclient04-text-meta);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hct-menu--pc-main-2 .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-main-3 .hct-menu-item__head > .hct-menu-link {
    align-self: stretch;
    height: 42px;
}
.hct-menu--pc-main-2 .hct-menu-toggle,
.hct-menu--pc-main-3 .hct-menu-toggle {
    flex: 0 0 42px;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    margin-right: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(245, 168, 0, .07);
    color: inherit;
    cursor: pointer;
}
.hct-menu--pc-main-2 .hct-menu-toggle:hover,
.hct-menu--pc-main-3 .hct-menu-toggle:hover { background: rgba(245, 168, 0, .14); }
.hct-menu--pc-main-2 .hct-menu-arrow,
.hct-menu--pc-main-3 .hct-menu-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .18s ease;
}
.hct-menu--pc-main-2 .is-open > .hct-menu-item__head .hct-menu-arrow,
.hct-menu--pc-main-3 .is-open > .hct-menu-item__head .hct-menu-arrow { transform: rotate(225deg) translate(-1px, -1px); }
.hct-menu--pc-main-2 .is-current > .hct-menu-item__head,
.hct-menu--pc-main-2 .is-active > .hct-menu-item__head,
.hct-menu--pc-main-3 .is-current > .hct-menu-item__head,
.hct-menu--pc-main-3 .is-active > .hct-menu-item__head {
    border-color: var(--hctclient04-color-primary);
    background: linear-gradient(135deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover));
    color: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .2);
}

.hct-menu--pc-main-2 .hct-menu-popup,
.hct-menu--pc-main-3 .hct-menu-popup {
    position: absolute;
    z-index: 40;
    top: calc(100% + 9px);
    left: 0;
    min-width: 250px;
    max-width: min(720px, calc(100vw - 32px));
    padding: 10px;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}
.hct-menu--pc-main-2 .hct-menu-popup[hidden],
.hct-menu--pc-main-3 .hct-menu-popup[hidden] { display: none !important; }
.hct-menu--pc-main-2 .hct-sub-menu,
.hct-menu--pc-main-3 .hct-sub-menu,
.hct-menu--pc-main-2 .hct-mega-menu__items,
.hct-menu--pc-main-3 .hct-mega-menu__items {
    position: static !important;
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hct-menu--pc-main-2 .hct-menu-popup .hct-menu-item__head,
.hct-menu--pc-main-3 .hct-menu-popup .hct-menu-item__head {
    width: 100%;
    border-radius: 11px;
    background: transparent;
    color: var(--hctclient04-color-text, #1a1a1a);
}
.hct-menu--pc-main-2 .hct-menu-popup .hct-menu-link,
.hct-menu--pc-main-3 .hct-menu-popup .hct-menu-link {
    flex: 1 1 auto;
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    font-weight: 600;
}
.hct-menu--pc-main-2 .hct-menu-popup .hct-menu-item__head:hover,
.hct-menu--pc-main-3 .hct-menu-popup .hct-menu-item__head:hover {
    background: var(--hctclient04-color-primary-soft, #FDF1D9);
    color: var(--hctclient04-color-secondary);
}
.hct-menu--pc-main-2 .hct-menu-popup .hct-menu-popup,
.hct-menu--pc-main-3 .hct-menu-popup .hct-menu-popup { top: 0; left: calc(100% + 8px); }

.hct-menu--pc-main-2 .hct-menu-popup--mega.hct-mega-menu,
.hct-menu--pc-main-3 .hct-menu-popup--mega.hct-mega-menu {
    display: grid;
    position: absolute;
    margin: 0;
    min-width: min(620px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}
.hct-menu--pc-main-2 .hct-menu-popup--mega.hct-mega-menu[hidden],
.hct-menu--pc-main-3 .hct-menu-popup--mega.hct-mega-menu[hidden] { display: none !important; }
.hct-menu--pc-main-2 .hct-mega-menu,
.hct-menu--pc-main-3 .hct-mega-menu { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.hct-menu--pc-main-2 .hct-mega-menu__group,
.hct-menu--pc-main-3 .hct-mega-menu__group { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hct-menu--pc-main-2 .hct-mega-menu__title,
.hct-menu--pc-main-3 .hct-mega-menu__title { margin: 0 0 7px; padding: 0 8px; color: var(--hctclient04-color-secondary); font-size: var(--hctclient04-text-caption); font-weight: 800; text-transform: uppercase; }

.hct-menu--pc-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hct-menu--pc-footer .hct-menu-item__head { display: flex; align-items: center; width: 100%; }
.hct-menu--pc-footer .hct-menu-link { flex: 1 1 auto; display: block; padding: 7px 0; color: inherit; text-decoration: none; }
.hct-menu--pc-footer .hct-menu-toggle { flex: 0 0 32px; width: 32px; height: 32px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.hct-menu--pc-footer .hct-menu-arrow { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.hct-menu--pc-footer .is-open > .hct-menu-item__head .hct-menu-arrow { transform: rotate(225deg); }
.hct-menu--pc-footer .hct-menu-popup { position: static !important; padding-left: 14px; }
.hct-menu--pc-footer .hct-menu-popup[hidden] { display: none !important; }
.hct-menu--pc-footer .hct-sub-menu,
.hct-menu--pc-footer .hct-mega-menu__items { position: static !important; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hctclient04-footer__mobile-menu-button { display: none; }

@media (max-width: 991px) {
    .hctclient04-footer__mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        margin-top: 16px;
        padding: 0 18px;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
}
@media (max-width: 767px) {
    .hct-menu--pc-main-2,
    .hct-menu--pc-main-3 { align-items: stretch; flex-direction: column; padding: 10px; }
    .hct-menu--pc-main-2 > .hct-menu-item,
    .hct-menu--pc-main-3 > .hct-menu-item { width: 100%; }
    .hct-menu--pc-main-2 > .hct-menu-item > .hct-menu-item__head,
    .hct-menu--pc-main-3 > .hct-menu-item > .hct-menu-item__head { border-radius: 14px; }
    .hct-menu--pc-main-2 .hct-menu-popup,
    .hct-menu--pc-main-3 .hct-menu-popup,
    .hct-menu--pc-main-2 .hct-menu-popup .hct-menu-popup,
    .hct-menu--pc-main-3 .hct-menu-popup .hct-menu-popup { position: static; min-width: 0; max-width: none; margin-top: 6px; box-shadow: none; }
}

/* HCTCLIENT04 V18 — square toggle for every recursive level */
.hct-menu--pc-main-2 .hct-menu-item,
.hct-menu--pc-main-3 .hct-menu-item {
    --hct-menu-row-size: 42px;
}

.hct-menu--pc-main-2 .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-main-3 .hct-menu-item > .hct-menu-item__head {
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    align-items: stretch;
}

.hct-menu--pc-main-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-main-3 .hct-menu-item > .hct-menu-item__head > .hct-menu-link {
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    box-sizing: border-box;
}

.hct-menu--pc-main-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle,
.hct-menu--pc-main-3 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle {
    flex: 0 0 var(--hct-menu-row-size);
    width: var(--hct-menu-row-size);
    height: var(--hct-menu-row-size);
    min-width: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-width: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

/* ===== css/menus/hctclient04-menu-column.css ===== */
/* HCT Client04 V14: Col 1/2 single-column accordion — Thu Hùng An Đông visual language. */
.hctclient04-home-menu-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.hctclient04-menu-column-card {
    position: relative;
    min-width: 0;
    padding: clamp(18px, 2.4vw, 26px);
    overflow: hidden;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, var(--hctclient04-color-surface-soft, #f2f5fa) 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
.hctclient04-menu-column-card::after {
    content: "";
    position: absolute;
    right: -45px;
    top: -45px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 168, 0, .12), rgba(245, 168, 0, 0) 70%);
    pointer-events: none;
}
.hctclient04-menu-column-card__title {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: var(--hctclient04-color-secondary);
    font-size: var(--hctclient04-text-card-title);
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}
.hctclient04-menu-column-card__title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hctclient04-color-primary), var(--hctclient04-color-primary-hover));
}

.hct-menu--pc-col-1,
.hct-menu--pc-col-2 {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hct-menu--pc-col-1 .hct-menu-item,
.hct-menu--pc-col-2 .hct-menu-item { min-width: 0; scroll-margin-top: 88px; }
.hct-menu--pc-col-1 > .hct-menu-item,
.hct-menu--pc-col-2 > .hct-menu-item {
    overflow: hidden;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hct-menu--pc-col-1 > .hct-menu-item:hover,
.hct-menu--pc-col-2 > .hct-menu-item:hover { transform: translateY(-1px); border-color: var(--hctclient04-color-border-strong, #ccd6e8); }
.hct-menu--pc-col-1 > .hct-menu-item.is-open,
.hct-menu--pc-col-2 > .hct-menu-item.is-open {
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .09);
}
.hct-menu--pc-col-1 .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-item__head {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    color: var(--hctclient04-color-text, #1a1a1a);
}
.hct-menu--pc-col-1 .hct-menu-link,
.hct-menu--pc-col-2 .hct-menu-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 15px;
    color: inherit;
    font-size: var(--hctclient04-text-body);
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.hct-menu--pc-col-1 .hct-menu-toggle,
.hct-menu--pc-col-2 .hct-menu-toggle {
    flex: 0 0 50px;
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    color: var(--hctclient04-color-secondary);
    cursor: pointer;
    transition: background-color .18s ease;
}
.hct-menu--pc-col-1 .hct-menu-toggle:hover,
.hct-menu--pc-col-2 .hct-menu-toggle:hover { background: var(--hctclient04-color-primary-soft, #FDF1D9); }
.hct-menu--pc-col-1 .hct-menu-arrow,
.hct-menu--pc-col-2 .hct-menu-arrow {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.hct-menu--pc-col-1 .is-open > .hct-menu-item__head .hct-menu-arrow,
.hct-menu--pc-col-2 .is-open > .hct-menu-item__head .hct-menu-arrow { transform: rotate(225deg) translate(-2px, -2px); }
.hct-menu--pc-col-1 .is-current > .hct-menu-item__head,
.hct-menu--pc-col-1 .is-active > .hct-menu-item__head,
.hct-menu--pc-col-2 .is-current > .hct-menu-item__head,
.hct-menu--pc-col-2 .is-active > .hct-menu-item__head {
    background: linear-gradient(90deg, var(--hctclient04-color-primary-soft, #FDF1D9), var(--hctclient04-color-secondary-soft, #e6eaf8));
    color: var(--hctclient04-color-secondary);
}

.hct-menu--pc-col-1 .hct-menu-popup,
.hct-menu--pc-col-2 .hct-menu-popup {
    position: static !important;
    width: auto;
    margin: 0;
    padding: 0 10px 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-margin-top: 88px;
}
.hct-menu--pc-col-1 .hct-menu-popup[hidden],
.hct-menu--pc-col-2 .hct-menu-popup[hidden] { display: none !important; }
.hct-menu--pc-col-1 .hct-menu-popup__inner,
.hct-menu--pc-col-2 .hct-menu-popup__inner { width: 100%; }
.hct-menu--pc-col-1 .hct-sub-menu,
.hct-menu--pc-col-2 .hct-sub-menu,
.hct-menu--pc-col-1 .hct-mega-menu__items,
.hct-menu--pc-col-2 .hct-mega-menu__items {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px;
    margin: 0;
    padding: 9px 0 0;
    list-style: none;
}
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-item,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-item {
    overflow: hidden;
    border: 1px solid var(--hctclient04-color-border, #e1e7f0);
    border-radius: 12px;
    background: #fff;
}
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-item__head { color: var(--hctclient04-color-text, #1a1a1a); }
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-link,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-link { min-height: 42px; padding: 9px 12px; font-size: var(--hctclient04-text-meta); font-weight: 600; }
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-toggle,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-toggle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
    aspect-ratio: 1 / 1;
}
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-popup,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-popup { padding: 0 8px 8px; }
.hct-menu--pc-col-1 .hct-menu-popup .is-open > .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-popup .is-open > .hct-menu-item__head { background: var(--hctclient04-color-primary-soft, #FDF1D9); color: var(--hctclient04-color-secondary); }

.hct-menu--pc-col-1 .hct-mega-menu,
.hct-menu--pc-col-2 .hct-mega-menu { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
.hct-menu--pc-col-1 .hct-mega-menu__group,
.hct-menu--pc-col-2 .hct-mega-menu__group { padding: 0; border: 0; background: transparent; box-shadow: none; }
.hct-menu--pc-col-1 .hct-mega-menu__title,
.hct-menu--pc-col-2 .hct-mega-menu__title { margin: 4px 0 6px; padding: 0 4px; color: var(--hctclient04-color-secondary); font-size: var(--hctclient04-text-caption); font-weight: 800; text-transform: uppercase; }

@media (max-width: 991px) {
    .hctclient04-home-menu-columns { grid-template-columns: minmax(0, 1fr); }
    .hct-menu--pc-col-1 .hct-menu-item,
    .hct-menu--pc-col-2 .hct-menu-item,
    .hct-menu--pc-col-1 .hct-menu-popup,
    .hct-menu--pc-col-2 .hct-menu-popup { scroll-margin-top: 72px; }
}
@media (max-width: 575px) {
    .hctclient04-menu-column-card { padding: 15px; border-radius: 18px; }
    .hct-menu--pc-col-1 .hct-menu-link,
    .hct-menu--pc-col-2 .hct-menu-link { min-height: 47px; padding: 10px 12px; }
}

/* HCTCLIENT04 V18 — square toggle for every recursive level */
.hct-menu--pc-col-1 > .hct-menu-item,
.hct-menu--pc-col-2 > .hct-menu-item {
    --hct-menu-row-size: 50px;
}

.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-item,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-item {
    --hct-menu-row-size: 42px;
}

.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head {
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    align-items: stretch;
}

.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-link {
    height: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    box-sizing: border-box;
}

.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle {
    flex: 0 0 var(--hct-menu-row-size);
    width: var(--hct-menu-row-size);
    height: var(--hct-menu-row-size);
    min-width: var(--hct-menu-row-size);
    min-height: var(--hct-menu-row-size);
    max-width: var(--hct-menu-row-size);
    max-height: var(--hct-menu-row-size);
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

/*===========*/
/* =========================================================
 * HCTCLIENT04 V21
 * COL 1 / COL 2 — recursive hover, active and active-hover
 * Áp dụng cho toàn bộ level 1, 2, 3...
 * ========================================================= */

/* Transition chung cho tất cả các cấp */
.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    transition:
        background-color .18s ease,
        background-image .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head > .hct-menu-link,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-link {
    position: relative;
    z-index: 1;
    color: inherit;
    transition: color .18s ease;
}

.hct-menu--pc-col-1 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle,
.hct-menu--pc-col-2 .hct-menu-item > .hct-menu-item__head > .hct-menu-toggle {
    position: relative;
    z-index: 2;
    color: inherit;
    transition:
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

/* =========================================================
 * HOVER THƯỜNG — tất cả level
 * Dùng > để chỉ tác động đúng head của item đang hover
 * ========================================================= */

.hct-menu--pc-col-1 .hct-menu-item:hover > .hct-menu-item__head,
.hct-menu--pc-col-2 .hct-menu-item:hover > .hct-menu-item__head {
    background: linear-gradient(90deg, var(--hctclient04-color-primary-soft, #FDF1D9) 0%, var(--hctclient04-color-secondary-soft, #e6eaf8) 100%);
    color: var(--hctclient04-color-secondary);
}

/* Level 1 hover: tác động thêm vào khung ngoài */
.hct-menu--pc-col-1 > .hct-menu-item:hover,
.hct-menu--pc-col-2 > .hct-menu-item:hover {
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
    transform: translateY(-1px);
}

/* Level 2+ hover */
.hct-menu--pc-col-1 .hct-menu-popup .hct-menu-item:hover,
.hct-menu--pc-col-2 .hct-menu-popup .hct-menu-item:hover {
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
    box-shadow: 0 6px 15px rgba(15, 23, 42, .07);
}

/* Toggle hover của item thường */
.hct-menu--pc-col-1
.hct-menu-item:not(.is-current):not(.is-active)
> .hct-menu-item__head
> .hct-menu-toggle:hover,
.hct-menu--pc-col-2
.hct-menu-item:not(.is-current):not(.is-active)
> .hct-menu-item__head
> .hct-menu-toggle:hover {
    background: rgba(245, 168, 0, .10);
    color: var(--hctclient04-color-secondary);
}

/* =========================================================
 * ACTIVE PATH
 * Dùng cho cha/ancestor đang chứa item hiện tại
 * Nhẹ hơn current/active để phân biệt nhánh
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-item.is-active-path:not(.is-current):not(.is-active)
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-active-path:not(.is-current):not(.is-active)
> .hct-menu-item__head {
    background: linear-gradient(90deg, var(--hctclient04-color-primary-soft, #FDF1D9) 0%, var(--hctclient04-color-secondary-soft, #e6eaf8) 100%);
    color: var(--hctclient04-color-secondary);
}

.hct-menu--pc-col-1
.hct-menu-item.is-active-path:not(.is-current):not(.is-active),
.hct-menu--pc-col-2
.hct-menu-item.is-active-path:not(.is-current):not(.is-active) {
    border-color: var(--hctclient04-color-border-strong, #ccd6e8);
}

/* Hover active-path */
.hct-menu--pc-col-1
.hct-menu-item.is-active-path:not(.is-current):not(.is-active):hover
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-active-path:not(.is-current):not(.is-active):hover
> .hct-menu-item__head {
    background: linear-gradient(90deg, var(--hctclient04-color-primary-soft, #FDF1D9) 0%, var(--hctclient04-color-secondary-soft, #e6eaf8) 100%);
    color: #08277E;
}

/* =========================================================
 * CURRENT / ACTIVE — tất cả level
 * Màu mạnh nhất
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-item.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-1
.hct-menu-item.is-active
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-active
> .hct-menu-item__head {
    background: linear-gradient(135deg, var(--hctclient04-color-primary) 0%, var(--hctclient04-color-primary-hover) 100%);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}

/* Border và shadow cho active level 1 */
.hct-menu--pc-col-1 > .hct-menu-item.is-current,
.hct-menu--pc-col-1 > .hct-menu-item.is-active,
.hct-menu--pc-col-2 > .hct-menu-item.is-current,
.hct-menu--pc-col-2 > .hct-menu-item.is-active {
    border-color: #08277E;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}

/* Border active level 2, 3... */
.hct-menu--pc-col-1
.hct-menu-popup
.hct-menu-item.is-current,
.hct-menu--pc-col-1
.hct-menu-popup
.hct-menu-item.is-active,
.hct-menu--pc-col-2
.hct-menu-popup
.hct-menu-item.is-current,
.hct-menu--pc-col-2
.hct-menu-popup
.hct-menu-item.is-active {
    border-color: #08277E;
    box-shadow: 0 7px 17px rgba(15, 23, 42, .13);
}

/* Bảo đảm link và toggle active luôn màu trắng */
.hct-menu--pc-col-1
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-link,
.hct-menu--pc-col-1
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-toggle,
.hct-menu--pc-col-1
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-link,
.hct-menu--pc-col-1
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-toggle,
.hct-menu--pc-col-2
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-link,
.hct-menu--pc-col-2
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-toggle,
.hct-menu--pc-col-2
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-link,
.hct-menu--pc-col-2
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-toggle {
    color: #fff;
}

/* =========================================================
 * HOVER CỦA CURRENT / ACTIVE
 * Không đổi về nền nhạt khi hover
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-item.is-current:hover
> .hct-menu-item__head,
.hct-menu--pc-col-1
.hct-menu-item.is-active:hover
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-current:hover
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-active:hover
> .hct-menu-item__head {
    background: linear-gradient(135deg, var(--hctclient04-color-primary-hover, #CC8A00) 0%, #051A54 100%);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        0 8px 20px rgba(15, 23, 42, .19);
}

/* Toggle hover bên trong active/current */
.hct-menu--pc-col-1
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-toggle:hover,
.hct-menu--pc-col-1
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-toggle:hover,
.hct-menu--pc-col-2
.hct-menu-item.is-current
> .hct-menu-item__head
> .hct-menu-toggle:hover,
.hct-menu--pc-col-2
.hct-menu-item.is-active
> .hct-menu-item__head
> .hct-menu-toggle:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* =========================================================
 * OPEN STATE
 * Item đang mở nhưng không phải active/current
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-item.is-open:not(.is-current):not(.is-active)
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-open:not(.is-current):not(.is-active)
> .hct-menu-item__head {
    background: linear-gradient(90deg, var(--hctclient04-color-primary-soft, #FDF1D9) 0%, var(--hctclient04-color-surface-soft, #f2f5fa) 100%);
    color: var(--hctclient04-color-secondary);
}

/* Item vừa active vừa open vẫn giữ nền đỏ */
.hct-menu--pc-col-1
.hct-menu-item.is-open.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-1
.hct-menu-item.is-open.is-active
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-open.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-item.is-open.is-active
> .hct-menu-item__head {
    background: linear-gradient(135deg, var(--hctclient04-color-primary) 0%, var(--hctclient04-color-primary-hover) 100%);
    color: #fff;
}

/* =========================================================
 * KEYBOARD FOCUS
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-item__head
> .hct-menu-link:focus-visible,
.hct-menu--pc-col-1
.hct-menu-item__head
> .hct-menu-toggle:focus-visible,
.hct-menu--pc-col-2
.hct-menu-item__head
> .hct-menu-link:focus-visible,
.hct-menu--pc-col-2
.hct-menu-item__head
> .hct-menu-toggle:focus-visible {
    outline: 2px solid var(--hctclient04-color-primary-hover, #CC8A00);
    outline-offset: -3px;
}

/* =========================================================
 * GHI ĐÈ RULE MÀU CẤP CON CŨ
 * Phải đặt cuối file để không bị rule color cấp con phía trên ghi đè
 * ========================================================= */

.hct-menu--pc-col-1
.hct-menu-popup
.hct-menu-item.is-active-path
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-popup
.hct-menu-item.is-active-path
> .hct-menu-item__head {
    color: var(--hctclient04-color-secondary);
}

.hct-menu--pc-col-1
.hct-menu-popup
.hct-menu-item.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-1
.hct-menu-popup
.hct-menu-item.is-active
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-popup
.hct-menu-item.is-current
> .hct-menu-item__head,
.hct-menu--pc-col-2
.hct-menu-popup
.hct-menu-item.is-active
> .hct-menu-item__head {
    color: #fff;
}