/* ==========================================================================
   NHA HANG NHAT CO - style.css (Template Guest, AZ Framework V4)
   TemplateID 8E3B2118-B184-48D0-BF7B-37F0EA001F80
   Chuan: TEMPLATE_GUEST.md muc 6 - MOT tep, token o layer tokens,
   MOI rule o layer template (ke ca media query), tien to az-template-*,
   khong dung important, khong dung 100vw.
   Font: Bricolage Grotesque (tieu de) + Noto Sans SC (van ban) nap bang
   the link Google Fonts trong Layout (ca hai co subset vietnamese).
   Nguon thiet ke: src.zip (Figma Make) - ke hoach NHATCO_WEB_MASTER.md
   ========================================================================== */

/* Noto Sans SC ve dau ba cham (U+2026) thanh 3 cham giua dong kieu CJK - ke ca dau
   ba cham tu dong cua line-clamp. Mat chu nay chi phu U+2026, lay tu font he thong;
   khong co font nao thi trinh duyet tu roi ve Noto Sans SC (nhu cu). */
@font-face {
    font-family: "Nhat Co Punct";
    src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"),
        local("Roboto"), local("Roboto-Regular"), local("Segoe UI"), local("SegoeUI"),
        local("Noto Sans"), local("NotoSans-Regular"), local("DejaVu Sans"), local("Liberation Sans");
    unicode-range: U+2026;
    font-display: swap;
}

@layer reset, tokens, base, layout, components, template, utilities, overrides;

@layer tokens {
    :root {
        color-scheme: light;

        /* Mau chuan guideline QKArt + mau dan xuat trong thiet ke */
        --az-template-cream: #ede1cd;
        --az-template-cream-rgb: 237 225 205;
        --az-template-cream-2: #f5f0e8;
        --az-template-cream-2-rgb: 245 240 232;
        --az-template-terracotta: #884735;
        --az-template-terracotta-rgb: 136 71 53;
        --az-template-terracotta-hover: #9e5540;
        --az-template-maroon: #4c1b1a;
        --az-template-olive: #45582d;
        --az-template-olive-rgb: 69 88 45;
        --az-template-green: #313b1a;
        --az-template-green-dark: #1e2a10;
        --az-template-green-dark-rgb: 30 42 16;
        --az-template-green-section: #2e3d18;
        --az-template-green-section-rgb: 46 61 24;
        --az-template-green-card: #243314;
        --az-template-green-card-rgb: 36 51 20;
        --az-template-green-deep-rgb: 26 42 10;
        --az-template-green-footer: #1a2210;
        --az-template-green-field: #2a3c15;
        --az-template-green-night-rgb: 13 21 8;
        --az-template-shade-rgb: 10 26 16;
        --az-template-sepia-rgb: 58 26 8;
        --az-template-gold: #d09b3e;
        --az-template-gold-rgb: 208 155 62;
        --az-template-gold-hover: #b8830a;
        --az-template-gold-deep: #9a7118;
        --az-template-ink: #2a1f0f;
        --az-template-ink-rgb: 42 31 15;
        --az-template-white: #ffffff;
        --az-template-white-rgb: 255 255 255;
        --az-template-black-rgb: 0 0 0;
        --az-template-zalo: #0068ff;
        --az-template-call: #16a34a;
        --az-template-error: #ffb4a2;

        /* Chu */
        --az-template-font-head: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
        --az-template-font-body: "Nhat Co Punct", "Noto Sans SC", "Be Vietnam Pro", system-ui, sans-serif;

        /* Kich thuoc khung - header co dinh 32 + 72 = 104 o moi be ngang */
        --az-template-topbar-h: 32px;
        --az-template-nav-h: 72px;
        --az-template-header-h: 104px;
        --az-template-gutter: 24px;
        --az-template-radius-sm: 12px;
        --az-template-radius: 16px;
        --az-template-radius-lg: 24px;
        --az-template-ease: cubic-bezier(.4, 0, .2, 1);

        /* Hoa tiet thuong hieu (data-URI, khong JS) */
        --az-template-img-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28A28 28 0 0 1 56 28M-28 28A28 28 0 0 1 28 28M28 28A28 28 0 0 1 84 28' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3C/svg%3E");
        --az-template-img-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60C480 0 960 0 1440 60Z'/%3E%3C/svg%3E");
        --az-template-img-bowl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0C360 50 1080 50 1440 0V50H0Z'/%3E%3C/svg%3E");
        --az-template-img-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}

@layer template {
    /* ======================================================================
       1. NEN TANG - phan tu goc
       ====================================================================== */

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

    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--az-template-header-h) + 16px);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        min-height: 100vh;
        font-family: var(--az-template-font-body);
        font-size: 16px;
        line-height: 1.6;
        color: var(--az-template-ink);
        background: var(--az-template-cream-2);
        overflow-x: hidden;
        /* Noto Sans SC ve dau ngoac kep, nhay don, cham giua theo be ngang CJK (1em);
           palt thu hep ve 0.5em cho van ban tieng Viet (do bang fontTools 26/09) */
        font-feature-settings: "palt" 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Khoa cuon khi mo lightbox (JS gan) */
    body.az-template-lock {
        overflow: hidden;
    }

    img,
    svg,
    video,
    iframe {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

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

    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote {
        margin: 0;
    }

    /* :where giu do uu tien = 0 de lop thanh phan ghi de duoc margin */
    :where(ul[class], ol[class]) {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    button {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    input,
    select,
    textarea {
        font: inherit;
    }

    /* Vong focus: dat hon 3:1 tren ca nen sang (dat nung) lan nen toi (vang) */
    :focus-visible {
        outline: 2px solid var(--az-template-focus, var(--az-template-gold));
        outline-offset: 3px;
    }

    ::selection {
        background: rgb(var(--az-template-gold-rgb) / .35);
    }

    /* ======================================================================
       2. KHUNG - main, wrap, section
       ====================================================================== */

    /* Header co dinh: main chua cho header; khoi anh lon tu keo nguoc len */
    .az-template-main {
        display: block;
        padding-top: var(--az-template-header-h);
    }

    .az-template-wrap {
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
        padding-inline: var(--az-template-gutter);
    }

    .az-template-wrap--page {
        max-width: 1152px;
    }

    .az-template-wrap--content {
        max-width: 1024px;
    }

    .az-template-wrap--narrow {
        max-width: 896px;
    }

    .az-template-wrap--text {
        max-width: 768px;
    }

    .az-template-wrap--form {
        max-width: 672px;
    }

    /* overflow clip (khong phai hidden) de phan tu sticky ben trong van dinh theo man hinh */
    .az-template-section {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        overflow: clip;
        padding-block: 64px 112px;
    }

    /* Section dung ngay sau song vom cua section toi */
    .az-template-section--after-arch {
        padding-top: 32px;
    }

    .az-template-section--cream {
        background: var(--az-template-cream);
    }

    .az-template-section--cream2 {
        background: var(--az-template-cream-2);
    }

    .az-template-section--dark {
        background: var(--az-template-green-section);
    }

    .az-template-section--darker {
        background: var(--az-template-green-dark);
    }

    .az-template-section--olive {
        background: var(--az-template-olive);
    }

    /* Tong mau chu: dat bien cho moi thanh phan ben trong (body = mac dinh nen sang) */
    body,
    .az-template-tone-light,
    .az-template-section--cream,
    .az-template-section--cream2 {
        --az-template-fg: var(--az-template-ink);
        --az-template-text: rgb(var(--az-template-ink-rgb) / .7);
        --az-template-muted: rgb(var(--az-template-ink-rgb) / .65);
        --az-template-accent: var(--az-template-terracotta);
        --az-template-focus: var(--az-template-terracotta);
        --az-template-line: var(--az-template-olive);
        --az-template-dot: rgb(var(--az-template-gold-rgb) / .6);
        color: var(--az-template-fg);
    }

    .az-template-tone-dark,
    .az-template-section--dark,
    .az-template-section--darker,
    .az-template-section--olive {
        --az-template-fg: var(--az-template-white);
        --az-template-text: rgb(var(--az-template-white-rgb) / .6);
        --az-template-muted: rgb(var(--az-template-white-rgb) / .55);
        --az-template-accent: var(--az-template-gold);
        --az-template-focus: var(--az-template-gold);
        --az-template-line: rgb(var(--az-template-gold-rgb) / .7);
        --az-template-dot: rgb(var(--az-template-gold-rgb) / .5);
        color: var(--az-template-fg);
    }

    /* Khoi nen toi khong gan lop tone: vong focus mau vang */
    .az-template-header,
    .az-template-footer,
    .az-template-fab,
    .az-template-hero,
    .az-template-articlehero,
    .az-template-lightbox {
        --az-template-focus: var(--az-template-gold);
    }

    /* ======================================================================
       3. HOA TIET - vay ca, vong trang, song mai dinh
       ====================================================================== */

    /* Vay ca: pseudo nam DUOI noi dung nho isolation (khong dung z-index con) */
    .az-template-scale {
        position: relative;
        isolation: isolate;
    }

    .az-template-scale::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--az-template-img-scale) 0 0 / 56px 28px repeat;
        opacity: .05;
        pointer-events: none;
    }

    .az-template-scale--64::before {
        background-size: 64px 32px;
    }

    .az-template-scale--52::before {
        background-size: 52px 26px;
        opacity: .06;
    }

    .az-template-scale--44::before {
        background-size: 44px 22px;
        opacity: .07;
    }

    .az-template-scale--soft::before {
        opacity: .04;
    }

    .az-template-scale--strong::before {
        opacity: .06;
    }

    /* Vong trang: mot phan tu ve toi da 3 vong */
    .az-template-rings {
        position: absolute;
        z-index: -1;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .07);
        border-radius: 50%;
        pointer-events: none;
    }

    .az-template-rings::before,
    .az-template-rings::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border: inherit;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    /* Hero trang con: 3 vong dong tam giua khoi */
    .az-template-rings--page {
        left: 50%;
        top: 50%;
        width: 700px;
        height: 700px;
        transform: translate(-50%, -50%);
    }

    .az-template-rings--page::before {
        width: 500px;
        height: 500px;
    }

    .az-template-rings--page::after {
        width: 320px;
        height: 320px;
    }

    /* Gioi thieu trang chu: 2 vong lech phai */
    .az-template-rings--about {
        right: -128px;
        top: 25%;
        width: 384px;
        height: 384px;
        border-color: rgb(var(--az-template-terracotta-rgb) / .07);
    }

    .az-template-rings--about::before {
        top: 0;
        left: calc(50% + 8px);
        width: 240px;
        height: 240px;
        transform: translateX(-50%);
        border-color: rgb(var(--az-template-terracotta-rgb) / .05);
    }

    .az-template-rings--about::after {
        display: none;
    }

    /* Video: 1 vong ben trai */
    .az-template-rings--video {
        left: -80px;
        top: 50%;
        width: 320px;
        height: 320px;
        transform: translateY(-50%);
        border-color: rgb(var(--az-template-terracotta-rgb) / .08);
    }

    .az-template-rings--video::before,
    .az-template-rings--video::after,
    .az-template-rings--feedback::before,
    .az-template-rings--feedback::after,
    .az-template-rings--cta::before,
    .az-template-rings--cta::after {
        display: none;
    }

    /* Feedback: 1 vong goc trai tren */
    .az-template-rings--feedback {
        left: 64px;
        top: 64px;
        width: 192px;
        height: 192px;
    }

    /* Khoi dat ban chan trang: 1 vong ben phai */
    .az-template-rings--cta {
        right: 64px;
        top: 50%;
        width: 256px;
        height: 256px;
        transform: translateY(-50%);
        border-color: rgb(var(--az-template-gold-rgb) / .08);
    }

    /* Song mai dinh noi hai section: to mau bang background, cat hinh bang mask */
    .az-template-wave {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        z-index: 3;
        height: 51px;
        background: var(--az-template-cream);
        pointer-events: none;
        -webkit-mask: var(--az-template-img-arch) 0 0 / 100% 100% no-repeat;
        mask: var(--az-template-img-arch) 0 0 / 100% 100% no-repeat;
    }

    .az-template-wave--bowl {
        -webkit-mask-image: var(--az-template-img-bowl);
        mask-image: var(--az-template-img-bowl);
    }

    .az-template-wave--hero {
        height: 61px;
    }

    .az-template-wave--sm {
        height: 45px;
    }

    .az-template-wave--to-cream2 {
        background: var(--az-template-cream-2);
    }

    .az-template-wave--to-dark {
        background: var(--az-template-green-section);
    }

    .az-template-wave--to-olive {
        background: var(--az-template-olive);
    }

    .az-template-wave--to-footer {
        background: var(--az-template-green-footer);
    }

    /* ======================================================================
       4. CHU - eyebrow, tieu de, doan dan, ornament
       ====================================================================== */

    .az-template-eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 16px;
        font-family: var(--az-template-font-body);
        font-size: 10px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: .4em;
        text-transform: uppercase;
        color: var(--az-template-accent);
    }

    .az-template-eyebrow::before {
        content: "";
        flex: none;
        width: 32px;
        height: 1px;
        background: var(--az-template-line);
    }

    .az-template-eyebrow--lg {
        font-size: 11px;
        letter-spacing: .35em;
    }

    /* Eyebrow giua: gach + cham ca hai ben */
    .az-template-eyebrow--center {
        justify-content: center;
        text-align: center;
    }

    .az-template-eyebrow--center::before,
    .az-template-eyebrow--center::after {
        content: "";
        flex: none;
        width: 60px;
        height: 8px;
        background:
            radial-gradient(circle closest-side, var(--az-template-dot) 80%, transparent 100%) right center / 8px 8px no-repeat,
            linear-gradient(var(--az-template-line), var(--az-template-line)) left center / 48px 1px no-repeat;
    }

    .az-template-eyebrow--center::after {
        transform: scaleX(-1);
    }

    /* Eyebrow giua dang don gian: chi hai gach */
    .az-template-eyebrow--plain::before,
    .az-template-eyebrow--plain::after {
        width: 32px;
        height: 1px;
        background: var(--az-template-line);
    }

    .az-template-title {
        margin: 0 0 20px;
        font-family: var(--az-template-font-head);
        font-size: clamp(1.9rem, 3vw, 2.8rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.005em;
        color: var(--az-template-fg);
        text-wrap: balance;
    }

    .az-template-title--md {
        font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    }

    .az-template-title--sm {
        font-size: clamp(1.6rem, 2.5vw, 2.3rem);
    }

    .az-template-title--xs {
        font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    }

    .az-template-lead {
        max-width: 32rem;
        margin: 0;
        font-size: .9rem;
        line-height: 1.8;
        color: var(--az-template-muted);
    }

    /* Khoi dau section: eyebrow + tieu de + doan dan */
    .az-template-head {
        margin-bottom: 56px;
    }

    .az-template-head .az-template-title {
        margin-bottom: 0;
    }

    .az-template-head .az-template-lead {
        margin-top: 16px;
    }

    .az-template-head--center {
        text-align: center;
    }

    .az-template-head--center .az-template-lead {
        margin-inline: auto;
    }

    /* Ornament gach - vong - gach */
    .az-template-ornament {
        position: relative;
        display: block;
        width: 72px;
        height: 8px;
        margin: 0 0 20px;
        background:
            linear-gradient(rgb(var(--az-template-gold-rgb) / .6), rgb(var(--az-template-gold-rgb) / .6)) left center / 24px 1px no-repeat,
            linear-gradient(rgb(var(--az-template-gold-rgb) / .6), rgb(var(--az-template-gold-rgb) / .6)) right center / 24px 1px no-repeat;
    }

    .az-template-ornament::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 8px;
        height: 8px;
        margin-left: -4px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .6);
        border-radius: 50%;
    }

    /* Ornament gach - cham - gach dai - cham (khoi gioi thieu) */
    .az-template-ornament--dots {
        width: 100px;
        margin-bottom: 24px;
        background:
            linear-gradient(var(--az-template-gold), var(--az-template-gold)) 0 center / 20px 1px no-repeat,
            radial-gradient(circle closest-side, rgb(var(--az-template-gold-rgb) / .5) 80%, transparent 100%) 28px center / 8px 8px no-repeat,
            linear-gradient(var(--az-template-gold), var(--az-template-gold)) 44px center / 40px 1px no-repeat,
            radial-gradient(circle closest-side, rgb(var(--az-template-gold-rgb) / .3) 80%, transparent 100%) 92px center / 8px 8px no-repeat;
    }

    .az-template-ornament--dots::after {
        display: none;
    }

    /* ======================================================================
       5. NUT - chip - nhom nut - icon
       ====================================================================== */

    .az-template-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 44px;
        padding: 12px 28px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-family: var(--az-template-font-body);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: .2em;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color .3s var(--az-template-ease),
            border-color .3s var(--az-template-ease),
            color .3s var(--az-template-ease),
            box-shadow .3s var(--az-template-ease),
            transform .3s var(--az-template-ease);
    }

    .az-template-btn--lg {
        padding: 14px 36px;
        letter-spacing: .25em;
    }

    .az-template-btn--sm {
        min-height: 38px;
        padding: 10px 24px;
    }

    .az-template-btn--block {
        display: flex;
        width: 100%;
    }

    .az-template-btn--primary {
        background: var(--az-template-terracotta);
        border-color: rgb(var(--az-template-gold-rgb) / .3);
        color: var(--az-template-white);
        box-shadow: 0 4px 20px rgb(var(--az-template-terracotta-rgb) / .35);
    }

    .az-template-btn--primary:hover {
        background: var(--az-template-terracotta-hover);
        border-color: rgb(var(--az-template-gold-rgb) / .6);
    }

    .az-template-btn--ghost {
        border-color: rgb(var(--az-template-white-rgb) / .3);
        color: rgb(var(--az-template-white-rgb) / .8);
        font-weight: 500;
    }

    .az-template-btn--ghost:hover {
        border-color: rgb(var(--az-template-gold-rgb) / .6);
        color: var(--az-template-gold);
    }

    .az-template-btn--outline {
        border-color: var(--az-template-olive);
        color: var(--az-template-olive);
    }

    .az-template-btn--outline:hover {
        background: var(--az-template-olive);
        color: var(--az-template-white);
    }

    .az-template-btn--gold-outline {
        border-color: rgb(var(--az-template-gold-rgb) / .5);
        color: var(--az-template-gold);
    }

    .az-template-btn--gold-outline:hover {
        background: rgb(var(--az-template-gold-rgb) / .1);
    }

    .az-template-btn--gold {
        background: var(--az-template-gold);
        color: var(--az-template-green-dark);
        font-weight: 700;
        box-shadow: 0 4px 16px rgb(var(--az-template-gold-rgb) / .4);
    }

    .az-template-btn--gold:hover {
        background: var(--az-template-gold-hover);
    }

    .az-template-btn--terracotta-outline {
        border-color: rgb(var(--az-template-terracotta-rgb) / .3);
        color: var(--az-template-terracotta);
    }

    .az-template-btn--terracotta-outline:hover {
        background: var(--az-template-terracotta);
        color: var(--az-template-white);
    }

    .az-template-btn[disabled],
    .az-template-btn.is-busy {
        opacity: .6;
        pointer-events: none;
    }

    /* Mui ten trong nut: nhich sang phai khi hover */
    .az-template-arrow-r {
        display: inline-block;
        transition: transform .3s var(--az-template-ease);
    }

    .az-template-btn:hover .az-template-arrow-r,
    a:hover > .az-template-arrow-r {
        transform: translateX(4px);
    }

    .az-template-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 36px;
    }

    .az-template-actions--center {
        justify-content: center;
    }

    .az-template-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .az-template-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border: 1px solid rgb(var(--az-template-olive-rgb) / .2);
        border-radius: 999px;
        background: rgb(var(--az-template-olive-rgb) / .1);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .025em;
        color: var(--az-template-olive);
    }

    .az-template-chip::before {
        content: "";
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--az-template-terracotta);
    }

    /* Chip dip to chuc tren nen toi */
    .az-template-chip--dark {
        padding: 8px 16px;
        border-color: rgb(var(--az-template-white-rgb) / .15);
        background: transparent;
        font-weight: 400;
        color: rgb(var(--az-template-white-rgb) / .6);
    }

    .az-template-chip--dark::before {
        background: rgb(var(--az-template-gold-rgb) / .7);
    }

    /* Icon SVG noi tuyen (sprite symbol) */
    .az-template-icon {
        flex: none;
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .az-template-icon--fill {
        fill: currentColor;
        stroke: none;
    }

    /* Chu an cho trinh doc man hinh */
    .az-template-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Lien ket bo qua toi noi dung chinh (M2): nam ngoai man hinh cho toi khi duoc focus ban phim */
    .az-template-skip {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 1000;
        padding: 10px 16px;
        border-radius: var(--az-template-radius-sm);
        background: var(--az-template-gold);
        color: var(--az-template-ink);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transform: translateY(-200%);
    }

    .az-template-skip:focus {
        transform: none;
    }

    /* Dich den cua lien ket bo qua: khung noi dung, khong phai nut - khong ve vien */
    .az-template-main:focus {
        outline: none;
    }

    @media (max-width: 639px) {
        .az-template-eyebrow--center::before,
        .az-template-eyebrow--center::after {
            width: 36px;
            background:
                radial-gradient(circle closest-side, var(--az-template-dot) 80%, transparent 100%) right center / 8px 8px no-repeat,
                linear-gradient(var(--az-template-line), var(--az-template-line)) left center / 24px 1px no-repeat;
        }

        .az-template-eyebrow--plain::before,
        .az-template-eyebrow--plain::after {
            width: 24px;
            background: var(--az-template-line);
        }

        .az-template-section {
            padding-block: 56px 96px;
        }

        .az-template-section--after-arch {
            padding-top: 32px;
        }

        /* Man hep: song thap lai de do cong khong qua gat */
        .az-template-wave {
            height: 33px;
        }

        .az-template-wave--hero {
            height: 41px;
        }

        .az-template-wave--sm {
            height: 29px;
        }
    }

    /* ======================================================================
       6. HEADER - top bar + thanh dieu huong + menu di dong
       Mac dinh NEN DAC. Trang co .az-template-hero (trang chu) thi trong suot
       khi chua cuon - trinh duyet tu nhan biet bang :has(), JS chi gan
       .scrolled khi scrollY > 10 (TEMPLATE_GUEST 6.4) va .is-open khi mo menu di dong.
       ====================================================================== */

    .az-template-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        color: var(--az-template-white);
        background: rgb(var(--az-template-green-dark-rgb) / .95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 15px -3px rgb(var(--az-template-black-rgb) / .12), 0 4px 6px -4px rgb(var(--az-template-black-rgb) / .12);
        transition: background-color .5s var(--az-template-ease), box-shadow .5s var(--az-template-ease);
    }

    body:has(.az-template-hero) .az-template-header:not(.scrolled):not(.is-open) {
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .az-template-topbar {
        background: rgb(var(--az-template-olive-rgb) / .9);
        color: rgb(var(--az-template-white-rgb) / .9);
        font-size: 12px;
        line-height: 16px;
    }

    .az-template-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: var(--az-template-topbar-h);
        padding-inline: var(--az-template-gutter);
    }

    .az-template-topbar-phone {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: .025em;
        transition: color .3s var(--az-template-ease);
    }

    .az-template-topbar-phone:hover {
        color: var(--az-template-gold);
    }

    .az-template-topbar-phone .az-template-icon {
        font-size: 11px;
    }

    .az-template-topbar-address,
    .az-template-topbar-hours {
        display: none;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .az-template-topbar-address {
        color: rgb(var(--az-template-white-rgb) / .8);
    }

    .az-template-topbar-hours {
        color: rgb(var(--az-template-white-rgb) / .7);
    }

    .az-template-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        max-width: 1280px;
        height: var(--az-template-nav-h);
        margin-inline: auto;
        padding: 12px var(--az-template-gutter);
    }

    .az-template-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        color: var(--az-template-white);
    }

    /* Logo xanh chuyen trang tren nen toi (cho logo am ban cua MKT - B1) */
    .az-template-brand-logo {
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .az-template-brand-text {
        display: none;
        line-height: 1.25;
    }

    .az-template-brand-name {
        display: block;
        font-family: var(--az-template-font-head);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .az-template-brand-slogan {
        display: block;
        font-size: 9px;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: rgb(var(--az-template-white-rgb) / .45);
    }

    .az-template-menu {
        display: none;
        align-items: center;
        gap: 24px;
    }

    .az-template-menu-link {
        position: relative;
        padding: 12px 0;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgb(var(--az-template-white-rgb) / .75);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-menu-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 8px;
        width: 0;
        height: 1px;
        background: var(--az-template-gold);
        transition: width .3s var(--az-template-ease);
    }

    .az-template-menu-link:hover,
    .az-template-menu-link.is-active {
        color: var(--az-template-gold);
    }

    .az-template-menu-link:hover::after,
    .az-template-menu-link.is-active::after {
        width: 100%;
    }

    .az-template-menu-link.is-active {
        font-weight: 600;
    }

    .az-template-menu .az-template-btn {
        min-height: 40px;
        padding: 10px 24px;
        box-shadow: 0 2px 12px rgb(var(--az-template-terracotta-rgb) / .4);
    }

    /* Nut ba gach - chuyen thanh dau X khi mo */
    .az-template-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        color: var(--az-template-white);
    }

    .az-template-burger-lines,
    .az-template-burger-lines::before,
    .az-template-burger-lines::after {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .3s var(--az-template-ease), background-color .3s var(--az-template-ease);
    }

    .az-template-burger-lines {
        position: relative;
    }

    .az-template-burger-lines::before,
    .az-template-burger-lines::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .az-template-burger-lines::before {
        top: -7px;
    }

    .az-template-burger-lines::after {
        top: 7px;
    }

    .az-template-header.is-open .az-template-burger-lines {
        background: transparent;
    }

    .az-template-header.is-open .az-template-burger-lines::before {
        transform: translateY(7px) rotate(45deg);
    }

    .az-template-header.is-open .az-template-burger-lines::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    .az-template-mobilemenu {
        display: none;
        flex-direction: column;
        gap: 4px;
        max-height: calc(100vh - var(--az-template-header-h));
        max-height: calc(100svh - var(--az-template-header-h));
        overflow-y: auto;
        padding: 20px var(--az-template-gutter);
        background: rgb(var(--az-template-green-dark-rgb) / .98);
        border-top: 1px solid rgb(var(--az-template-olive-rgb) / .4);
    }

    .az-template-header.is-open .az-template-mobilemenu {
        display: flex;
    }

    .az-template-mobilemenu-link {
        padding: 12px 0;
        border-bottom: 1px solid rgb(var(--az-template-white-rgb) / .08);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgb(var(--az-template-white-rgb) / .8);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-mobilemenu-link:hover,
    .az-template-mobilemenu-link.is-active {
        color: var(--az-template-gold);
    }

    .az-template-mobilemenu-link.is-active {
        font-weight: 600;
    }

    .az-template-mobilemenu .az-template-btn {
        margin-top: 12px;
    }

    @media (min-width: 640px) {
        .az-template-topbar-hours,
        .az-template-brand-text {
            display: block;
        }
    }

    @media (min-width: 768px) {
        .az-template-topbar-address {
            display: block;
        }
    }

    @media (min-width: 1024px) {
        .az-template-menu {
            display: flex;
        }

        .az-template-burger,
        .az-template-header.is-open .az-template-mobilemenu {
            display: none;
        }
    }

    /* ======================================================================
       7. O NHAP TREN NEN TOI - dung chung form chan trang + form Lien he
       ====================================================================== */

    .az-template-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        text-align: left;
    }

    .az-template-label {
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-input {
        width: 100%;
        min-height: 44px;
        padding: 10px 16px;
        border: 1px solid rgb(var(--az-template-white-rgb) / .2);
        border-radius: var(--az-template-radius-sm);
        background: rgb(var(--az-template-white-rgb) / .1);
        font-size: 14px;
        line-height: 1.5;
        color: var(--az-template-white);
        transition: border-color .3s var(--az-template-ease);
    }

    .az-template-input::placeholder {
        color: rgb(var(--az-template-white-rgb) / .3);
    }

    .az-template-input:focus {
        border-color: var(--az-template-gold);
    }

    /* O ngay: bieu tuong lich sang mau tren nen toi */
    .az-template-input[type="date"] {
        color-scheme: dark;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-select {
        -webkit-appearance: none;
        appearance: none;
        padding-right: 40px;
        background: var(--az-template-green-field) var(--az-template-img-chevron) right 16px center / 14px 14px no-repeat;
        color: rgb(var(--az-template-white-rgb) / .85);
        cursor: pointer;
    }

    .az-template-select option {
        background: var(--az-template-green-dark);
        color: var(--az-template-white);
    }

    .az-template-textarea {
        min-height: 96px;
        resize: vertical;
    }

    .az-template-input.is-invalid {
        border-color: var(--az-template-error);
        box-shadow: 0 0 0 1px var(--az-template-error);
    }

    /* iOS phong to trang khi o nhap duoi 16px */
    @media (max-width: 1023px) {
        .az-template-input {
            font-size: 16px;
        }
    }

    /* ======================================================================
       8. CHAN TRANG - khoi Dat ban (moi trang) + 4 cot + dong ban quyen
       ====================================================================== */

    .az-template-footer {
        background: var(--az-template-green-footer);
        color: var(--az-template-white);
    }

    .az-template-footcta {
        overflow: hidden;
        padding-block: 56px;
        background: var(--az-template-olive);
        text-align: center;
    }

    .az-template-footcta .az-template-title {
        margin-bottom: 8px;
    }

    .az-template-footcta .az-template-lead {
        max-width: none;
        font-size: 14px;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    /* Trang Lien he da co form day du: an khoi dat ban o chan trang */
    body:has(.az-template-bookcard) .az-template-footcta {
        display: none;
    }

    .az-template-quickform {
        display: grid;
        gap: 12px;
        max-width: 672px;
        margin: 32px auto 0;
    }

    .az-template-quickform-fields {
        display: grid;
        gap: 12px;
    }

    .az-template-quickform-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .az-template-quickform-row .az-template-select {
        flex: 1 1 0;
        min-width: 0;
    }

    .az-template-quickform-row .az-template-btn {
        flex: none;
        padding-inline: 32px;
    }

    /* Thong bao form (M2): chu kem tren nen olive 6:1; loi dung mau error 4,6:1 (vang chi 3,1:1) */
    .az-template-quickform-msg {
        min-height: 20px;
        font-size: 14px;
        color: var(--az-template-cream);
    }

    .az-template-quickform-msg.is-error {
        color: var(--az-template-error);
    }

    .az-template-footmain {
        overflow: hidden;
    }

    .az-template-footgrid {
        display: grid;
        gap: 40px;
        padding-block: 64px;
    }

    .az-template-footbrand-kicker {
        margin-bottom: 4px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .4em;
        text-transform: uppercase;
        color: var(--az-template-gold);
    }

    .az-template-footbrand-name {
        font-family: var(--az-template-font-head);
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
    }

    .az-template-footbrand-slogan {
        margin-top: 4px;
        font-size: 9px;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: rgb(var(--az-template-gold-rgb) / .5);
    }

    .az-template-footbrand-tagline {
        margin: 24px 0;
        font-size: 14px;
        line-height: 1.8;
        color: rgb(var(--az-template-white-rgb) / .5);
    }

    .az-template-footcontact {
        display: grid;
        gap: 0;
    }

    .az-template-footcontact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        line-height: 1.5;
        color: rgb(var(--az-template-white-rgb) / .6);
        transition: color .3s var(--az-template-ease);
        min-height: 40px;
        padding-block: 9px;
    }

    a.az-template-footcontact-item:hover {
        color: var(--az-template-gold);
    }

    .az-template-footcontact-item .az-template-icon {
        margin-top: 3px;
        font-size: 13px;
    }

    .az-template-footcol-title {
        margin-bottom: 24px;
        font-family: var(--az-template-font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--az-template-white);
    }

    .az-template-footlinks {
        display: grid;
        gap: 0;
    }

    .az-template-footlink {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: rgb(var(--az-template-white-rgb) / .55);
        transition: color .3s var(--az-template-ease);
        min-height: 40px;
    }

    .az-template-footlink:hover {
        color: var(--az-template-gold);
    }

    /* Nhan lien ket ngoai (Oasian) */
    .az-template-footlink-tag {
        padding: 2px 6px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .25);
        border-radius: 999px;
        font-size: 10px;
        line-height: 1;
        color: rgb(var(--az-template-gold-rgb) / .6);
    }

    .az-template-footsocials {
        display: grid;
        gap: 4px;
        margin-bottom: 32px;
    }

    .az-template-footsocial {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: rgb(var(--az-template-white-rgb) / .55);
        transition: color .3s var(--az-template-ease);
        min-height: 40px;
    }

    .az-template-footsocial-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid rgb(var(--az-template-white-rgb) / .12);
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        transition: border-color .3s var(--az-template-ease);
    }

    .az-template-footsocial-icon .az-template-icon {
        font-size: 14px;
    }

    .az-template-footsocial:hover {
        color: var(--az-template-gold);
    }

    .az-template-footsocial:hover .az-template-footsocial-icon {
        border-color: rgb(var(--az-template-gold-rgb) / .4);
    }

    .az-template-footmap {
        height: 140px;
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-white-rgb) / .1);
        border-radius: var(--az-template-radius-sm);
    }

    .az-template-footmap iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .az-template-footbar {
        border-top: 1px solid rgb(var(--az-template-white-rgb) / .06);
        padding-block: 20px;
        font-size: 12px;
        color: rgb(var(--az-template-white-rgb) / .5);
    }

    .az-template-footbar-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }

    @media (min-width: 640px) {
        .az-template-quickform-fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .az-template-quickform-fields .az-template-field:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

        .az-template-quickform-row {
            flex-direction: row;
        }
    }

    @media (min-width: 768px) {
        .az-template-footgrid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .az-template-footbar-inner {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
    }

    @media (min-width: 1024px) {
        .az-template-quickform-fields {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .az-template-quickform-fields .az-template-field:last-child:nth-child(odd) {
            grid-column: auto;
        }

        .az-template-footgrid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 767px) {
        .az-template-rings--cta {
            right: -96px;
        }
    }

    /* ======================================================================
       9. NUT NOI - Zalo + Goi (moi trang)
       ====================================================================== */

    .az-template-fab {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 45;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .az-template-fab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        color: var(--az-template-white);
        box-shadow: 0 10px 15px -3px rgb(var(--az-template-black-rgb) / .2), 0 4px 6px -4px rgb(var(--az-template-black-rgb) / .2);
        transition: transform .2s var(--az-template-ease);
    }

    .az-template-fab-btn:hover {
        transform: scale(1.1);
    }

    .az-template-fab-btn:active {
        transform: scale(.95);
    }

    .az-template-fab-btn--zalo {
        background: var(--az-template-zalo);
        font-family: Arial, var(--az-template-font-body);
        font-size: 13px;
        font-weight: 700;
    }

    .az-template-fab-btn--call {
        background: var(--az-template-call);
    }

    .az-template-fab-btn--call .az-template-icon {
        font-size: 28px;
    }

    @media (max-width: 639px) {
        .az-template-fab {
            right: 16px;
            bottom: 16px;
            gap: 10px;
        }

        .az-template-fab-btn {
            width: 52px;
            height: 52px;
        }
    }

    /* ======================================================================
       10. TRANG CHU - HERO 3 slide (SiteAds SLIDE)
       Slide dau render .is-active ngay tu server (khong nhay khi cho JS).
       Tieu de slide dau la h1, cac slide sau la h2 (dung 1 h1 moi trang).
       ====================================================================== */

    .az-template-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        height: 100vh;
        height: 100svh;
        min-height: 580px;
        max-height: 860px;
        margin-top: calc(var(--az-template-header-h) * -1);
        background: var(--az-template-green-dark);
        color: var(--az-template-white);
    }

    .az-template-hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .7s var(--az-template-ease), visibility 0s linear .7s;
    }

    .az-template-hero-slide.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        transition: opacity .7s var(--az-template-ease), visibility 0s linear 0s;
    }

    .az-template-hero-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 25%;
    }

    /* Mang toi doc tu trai + tu duoi len; hai pseudo la hai vong trang */
    .az-template-hero-shade {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to bottom, rgb(var(--az-template-shade-rgb) / .55), transparent 28%),
            linear-gradient(to top, rgb(var(--az-template-shade-rgb) / .65), transparent 55%),
            linear-gradient(to right, rgb(var(--az-template-shade-rgb) / .88), rgb(var(--az-template-shade-rgb) / .48) 50%, transparent),
            linear-gradient(rgb(var(--az-template-shade-rgb) / .2), rgb(var(--az-template-shade-rgb) / .2));
    }

    .az-template-hero-shade::before,
    .az-template-hero-shade::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .az-template-hero-shade::before {
        right: 8%;
        top: 15%;
        width: 288px;
        height: 288px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .12);
    }

    .az-template-hero-shade::after {
        right: 10%;
        top: 18%;
        width: 208px;
        height: 208px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .08);
    }

    .az-template-hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: var(--az-template-header-h) 40px 104px;
    }

    .az-template-hero-inner {
        max-width: 576px;
        transform: translateY(12px);
        opacity: 0;
        transition: transform .6s var(--az-template-ease) .2s, opacity .6s var(--az-template-ease) .2s;
    }

    .az-template-hero-slide.is-active .az-template-hero-inner {
        transform: none;
        opacity: 1;
    }

    .az-template-hero-tag {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .4em;
        text-transform: uppercase;
        color: var(--az-template-gold);
    }

    .az-template-hero-tag::before {
        content: "";
        flex: none;
        width: 40px;
        height: 1px;
        background: var(--az-template-gold);
    }

    .az-template-hero-title {
        margin-bottom: 20px;
        font-family: var(--az-template-font-head);
        font-size: clamp(2.6rem, 5.5vw, 4.2rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -.01em;
        color: var(--az-template-white);
        text-wrap: balance;
    }

    .az-template-hero-sub {
        margin-bottom: 36px;
        font-size: clamp(.88rem, 1.4vw, 1.05rem);
        line-height: 1.65;
        color: rgb(var(--az-template-white-rgb) / .7);
        white-space: pre-line;
    }

    .az-template-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .az-template-hero-actions .az-template-btn--primary {
        box-shadow: 0 4px 20px rgb(var(--az-template-terracotta-rgb) / .5);
    }

    .az-template-hero-arrow {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        border: 1px solid rgb(var(--az-template-white-rgb) / .2);
        border-radius: 50%;
        background: rgb(var(--az-template-green-dark-rgb) / .5);
        color: var(--az-template-white);
        font-size: 18px;
        transition: background-color .3s var(--az-template-ease), border-color .3s var(--az-template-ease);
    }

    .az-template-hero-arrow:hover {
        background: rgb(var(--az-template-olive-rgb) / .8);
        border-color: rgb(var(--az-template-gold-rgb) / .4);
    }

    .az-template-hero-arrow--prev {
        left: 20px;
    }

    .az-template-hero-arrow--next {
        right: 20px;
    }

    .az-template-hero-dots {
        position: absolute;
        left: 50%;
        bottom: 60px;
        z-index: 4;
        display: flex;
        align-items: center;
        transform: translateX(-50%);
    }

    /* Nut cham: vung bam 26px, cham ve bang pseudo */
    .az-template-hero-dot {
        position: relative;
        width: 40px;
        height: 44px;
        transition: width .3s var(--az-template-ease);
    }

    .az-template-hero-dot::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgb(var(--az-template-white-rgb) / .3);
        transform: translate(-50%, -50%);
        transition: width .3s var(--az-template-ease), background-color .3s var(--az-template-ease);
    }

    .az-template-hero-dot:hover::after {
        background: rgb(var(--az-template-white-rgb) / .55);
    }

    .az-template-hero-dot.is-active {
        width: 56px;
    }

    .az-template-hero-dot.is-active::after {
        width: 28px;
        background: var(--az-template-gold);
    }

    /* Nut tam dung / tiep tuc trinh chieu cuoi hang cham (M2 - WCAG 2.2.2) */
    .az-template-hero-pause {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 44px;
        margin-left: 4px;
        color: rgb(var(--az-template-white-rgb) / .75);
        font-size: 13px;
        transition: color .3s var(--az-template-ease);
    }

    .az-template-hero-pause:hover {
        color: var(--az-template-white);
    }

    /* So dem dat ben TRAI: goc phai duoi danh cho nut noi Zalo/Goi */
    .az-template-hero-count {
        position: absolute;
        left: 40px;
        bottom: 72px;
        z-index: 4;
        display: none;
        font-size: 12px;
        letter-spacing: .1em;
        color: rgb(var(--az-template-white-rgb) / .35);
    }

    @media (min-width: 768px) {
        .az-template-hero-content {
            padding-inline: 80px;
        }

        .az-template-hero-arrow {
            display: inline-flex;
        }

        .az-template-hero-count {
            display: block;
        }
    }

    @media (min-width: 1024px) {
        .az-template-hero-content {
            padding-inline: 128px;
        }
    }

    @media (max-width: 639px) {
        /* Man thap (iPhone SE co thanh cong cu): du cho noi dung, khong de len header/cham */
        .az-template-hero {
            min-height: 640px;
        }

        .az-template-hero-content {
            padding-inline: var(--az-template-gutter);
        }

        .az-template-hero-shade::before {
            right: -64px;
        }

        .az-template-hero-shade::after {
            right: -24px;
        }
    }

    /* ======================================================================
       11. TRANG CHU - GIOI THIEU (chu dinh ben trai + infographic)
       Dung lai o trang /ve-nhat-co cho khoi Hanh trinh.
       ====================================================================== */

    .az-template-about-grid {
        display: grid;
        gap: 56px;
        align-items: start;
    }

    .az-template-about-text {
        padding-top: 16px;
    }

    .az-template-about-body {
        display: grid;
        gap: 16px;
        font-size: .93rem;
        line-height: 1.85;
        color: var(--az-template-text);
    }

    .az-template-about .az-template-chips {
        margin-top: 28px;
    }

    .az-template-about-media {
        position: relative;
    }

    .az-template-about-media::before {
        content: "";
        position: absolute;
        top: -16px;
        right: -16px;
        bottom: 32px;
        left: 32px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .15);
        border-radius: var(--az-template-radius-lg);
        pointer-events: none;
    }

    .az-template-about-media img {
        position: relative;
        width: 100%;
        border-radius: var(--az-template-radius);
        box-shadow: 0 24px 64px rgb(var(--az-template-terracotta-rgb) / .2);
    }

    @media (min-width: 768px) {
        .az-template-about-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .az-template-about-text {
            position: sticky;
            top: calc(var(--az-template-header-h) + 8px);
        }
    }

    @media (max-width: 767px) {
        .az-template-about-media::before {
            right: -8px;
            top: -8px;
        }
    }

    /* ======================================================================
       12. TRANG CHU - VE AM THUC: the mon le + the mam co doc 4:5
       ====================================================================== */

    .az-template-dishes {
        display: grid;
        gap: 20px;
        margin-bottom: 80px;
    }

    .az-template-feasts {
        display: grid;
        gap: 24px;
    }

    .az-template-dish {
        position: relative;
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-white-rgb) / .1);
        border-radius: var(--az-template-radius);
        background: var(--az-template-green-card);
        box-shadow: 0 8px 32px rgb(var(--az-template-black-rgb) / .3);
        transition: border-color .5s var(--az-template-ease), box-shadow .5s var(--az-template-ease);
    }

    .az-template-dish:hover {
        border-color: rgb(var(--az-template-gold-rgb) / .4);
        box-shadow: 0 12px 40px rgb(var(--az-template-gold-rgb) / .15);
    }

    /* Vach vang - dat chay ngang day the khi hover */
    .az-template-dish::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(to right, var(--az-template-gold), var(--az-template-terracotta));
        transition: width .5s var(--az-template-ease);
    }

    .az-template-dish:hover::after {
        width: 100%;
    }

    .az-template-dish-media {
        position: relative;
        height: 256px;
        overflow: hidden;
    }

    .az-template-dish-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s var(--az-template-ease);
    }

    .az-template-dish:hover .az-template-dish-media img {
        transform: scale(1.05);
    }

    .az-template-dish-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(var(--az-template-green-card-rgb) / .6), transparent);
        pointer-events: none;
    }

    .az-template-dish-body {
        padding: 24px;
    }

    .az-template-dish-name {
        margin-bottom: 8px;
        font-family: var(--az-template-font-head);
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--az-template-white);
    }

    .az-template-dish-desc {
        font-size: 14px;
        line-height: 1.7;
        color: rgb(var(--az-template-white-rgb) / .5);
    }

    /* The mam co: anh doc 4:5, ten mon nam tren anh */
    .az-template-dish--portrait .az-template-dish-media {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .az-template-dish--portrait .az-template-dish-media img {
        object-position: top;
    }

    .az-template-dish--portrait .az-template-dish-media::after {
        background: linear-gradient(to top, rgb(var(--az-template-green-deep-rgb) / .8), transparent 55%);
    }

    .az-template-dish--portrait .az-template-dish-name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        margin: 0;
        padding: 20px;
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .az-template-dish--portrait .az-template-dish-body {
        padding: 20px;
    }

    .az-template-dish--portrait .az-template-dish-desc {
        line-height: 1.75;
        color: rgb(var(--az-template-white-rgb) / .55);
    }

    .az-template-dish-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--az-template-gold);
        transition: gap .3s var(--az-template-ease);
        min-height: 40px;
    }

    .az-template-dish-link:hover {
        gap: 12px;
    }

    .az-template-occasions {
        justify-content: center;
        margin-top: 40px;
    }

    @media (min-width: 768px) {
        .az-template-dishes,
        .az-template-feasts {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* ======================================================================
       13. TRANG CHU - THUC DON (anh bia menu) + KHONG GIAN (luoi 4 anh)
       ====================================================================== */

    .az-template-menucover {
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .1);
        border-radius: var(--az-template-radius);
        box-shadow: 0 20px 60px rgb(var(--az-template-ink-rgb) / .18);
    }

    .az-template-menucover img {
        width: 100%;
    }

    .az-template-mosaic {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 200px;
        gap: 16px;
    }

    .az-template-mosaic-item {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--az-template-radius);
        box-shadow: 0 8px 32px rgb(var(--az-template-black-rgb) / .25);
        outline: 1px solid transparent;
        outline-offset: -1px;
        transition: outline-color .3s var(--az-template-ease);
    }

    .az-template-mosaic-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s var(--az-template-ease);
    }

    .az-template-mosaic-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(var(--az-template-green-dark-rgb) / .7), transparent 60%);
        opacity: 0;
        transition: opacity .3s var(--az-template-ease);
    }

    .az-template-mosaic-cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 16px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: .025em;
        color: var(--az-template-white);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .3s var(--az-template-ease), transform .3s var(--az-template-ease);
    }

    .az-template-mosaic-item:hover {
        outline-color: rgb(var(--az-template-gold-rgb) / .3);
    }

    .az-template-mosaic-item:hover img {
        transform: scale(1.05);
    }

    .az-template-mosaic-item:hover::after,
    .az-template-mosaic-item:hover .az-template-mosaic-cap,
    .az-template-mosaic-item:focus-visible::after,
    .az-template-mosaic-item:focus-visible .az-template-mosaic-cap {
        opacity: 1;
        transform: none;
    }

    .az-template-mosaic-item:focus-visible {
        outline: 2px solid var(--az-template-gold);
        outline-offset: 3px;
    }

    .az-template-mosaic + .az-template-actions {
        margin-top: 40px;
    }

    @media (min-width: 768px) {
        .az-template-mosaic {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Luoi 3 cot: anh 1 chiem 2x2, anh 4 trai het hang (khong de o trong) */
    @media (min-width: 1024px) {
        .az-template-mosaic {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-auto-rows: 220px;
        }

        .az-template-mosaic-item:nth-child(4n + 1) {
            grid-column: span 2;
            grid-row: span 2;
        }

        .az-template-mosaic-item:nth-child(4n) {
            grid-column: 1 / -1;
        }
    }

    /* ======================================================================
       14. TRANG CHU - VIDEO TVC (poster + nut phat, bam moi nap iframe)
       ====================================================================== */

    .az-template-video {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .15);
        border-radius: var(--az-template-radius-lg);
        background: var(--az-template-green-dark);
        box-shadow: 0 20px 60px rgb(var(--az-template-terracotta-rgb) / .2);
    }

    .az-template-video-poster {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .az-template-video::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top, rgb(var(--az-template-ink-rgb) / .6), transparent 60%),
            linear-gradient(rgb(var(--az-template-sepia-rgb) / .2), rgb(var(--az-template-sepia-rgb) / .2));
        pointer-events: none;
    }

    .az-template-video-play {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
        color: var(--az-template-white);
    }

    .az-template-video-play-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 96px;
        height: 96px;
        border: 2px solid rgb(var(--az-template-gold-rgb) / .4);
        border-radius: 50%;
        font-size: 26px;
        transition: transform .3s var(--az-template-ease), border-color .3s var(--az-template-ease);
    }

    .az-template-video-play-icon::before {
        content: "";
        position: absolute;
        inset: 8px;
        z-index: -1;
        border-radius: 50%;
        background: rgb(var(--az-template-terracotta-rgb) / .9);
        box-shadow: 0 4px 20px rgb(var(--az-template-terracotta-rgb) / .6);
        transition: background-color .3s var(--az-template-ease);
    }

    .az-template-video-play-icon .az-template-icon {
        margin-left: 4px;
    }

    .az-template-video-play:hover .az-template-video-play-icon {
        transform: scale(1.1);
        border-color: rgb(var(--az-template-gold-rgb) / .7);
    }

    .az-template-video-play:hover .az-template-video-play-icon::before {
        background: var(--az-template-terracotta-hover);
    }

    /* Nut phat phu kin khung (overflow hidden): ve vong focus vao trong */
    .az-template-video-play:focus-visible {
        outline-offset: -8px;
    }

    .az-template-video-label {
        font-size: 11px;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: rgb(var(--az-template-white-rgb) / .7);
    }

    .az-template-video iframe,
    .az-template-video video {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        border: 0;
        background: var(--az-template-green-dark);
    }

    .az-template-video.is-playing::after,
    .az-template-video.is-playing .az-template-video-play {
        display: none;
    }

    @media (max-width: 639px) {
        .az-template-video {
            border-radius: var(--az-template-radius);
        }

        .az-template-video-play-icon {
            width: 72px;
            height: 72px;
            font-size: 22px;
        }

        .az-template-video-play-icon::before {
            inset: 6px;
        }
    }

    /* ======================================================================
       15. TRANG CHU - FEEDBACK: bang truot anh chup feedback (SiteAds)
       KHONG dung the danh gia chu + sao (tranh du lieu gia, tranh schema Review)
       ====================================================================== */

    .az-template-feedback-head {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 56px;
    }

    .az-template-feedback-head .az-template-title {
        margin-bottom: 0;
    }

    .az-template-arrows {
        display: flex;
        gap: 8px;
    }

    .az-template-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .3);
        border-radius: 50%;
        font-size: 18px;
        color: var(--az-template-gold);
        transition: border-color .3s var(--az-template-ease), background-color .3s var(--az-template-ease);
    }

    .az-template-arrow:hover {
        border-color: rgb(var(--az-template-gold-rgb) / .7);
        background: rgb(var(--az-template-gold-rgb) / .1);
    }

    /* JS khoa mui ten khi bang truot da cham dau / cuoi (M2) */
    .az-template-arrow:disabled {
        opacity: .35;
        cursor: default;
        pointer-events: none;
    }

    .az-template-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .az-template-track::-webkit-scrollbar {
        display: none;
    }

    .az-template-feedback-item {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 4 / 5;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .2);
        border-radius: var(--az-template-radius);
        background: var(--az-template-green-card);
        box-shadow: 0 8px 32px rgb(var(--az-template-black-rgb) / .25);
        scroll-snap-align: start;
        cursor: zoom-in;
        transition: border-color .3s var(--az-template-ease);
    }

    .az-template-feedback-item:hover {
        border-color: rgb(var(--az-template-gold-rgb) / .5);
    }

    .az-template-feedback-item:focus-visible {
        outline-offset: -4px;
    }

    .az-template-feedback-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @media (min-width: 640px) {
        .az-template-track {
            grid-auto-columns: calc((100% - 20px) / 2);
        }
    }

    @media (min-width: 768px) {
        .az-template-feedback-head {
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
        }
    }

    @media (min-width: 1024px) {
        .az-template-track {
            grid-auto-columns: calc((100% - 40px) / 3);
        }
    }

    /* ======================================================================
       16. HERO TRANG CON (Ve Nhat Co, Thuc don, Khong gian, Blog, Lien he)
       Keo len duoi header roi bu padding - header nen dac nen lien mach.
       ====================================================================== */

    .az-template-pagehero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        margin-top: calc(var(--az-template-header-h) * -1);
        padding: calc(var(--az-template-header-h) + 40px) 0 80px;
        background: var(--az-template-green-dark);
        text-align: center;
    }

    .az-template-pagehero-inner {
        position: relative;
        max-width: 768px;
        margin-inline: auto;
        padding-inline: var(--az-template-gutter);
    }

    .az-template-pagehero .az-template-eyebrow {
        margin-bottom: 20px;
        letter-spacing: .45em;
    }

    .az-template-pagehero-title {
        margin-bottom: 16px;
        font-family: var(--az-template-font-head);
        font-size: clamp(2.6rem, 6vw, 4.2rem);
        font-weight: 700;
        line-height: 1.08;
        color: var(--az-template-white);
        text-wrap: balance;
    }

    .az-template-pagehero-lead {
        max-width: 32rem;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.85;
        color: rgb(var(--az-template-white-rgb) / .55);
    }

    /* Bien the co anh nen mo (Khong gian) */
    .az-template-pagehero--photo {
        background: var(--az-template-green-section);
    }

    .az-template-pagehero--photo::before {
        z-index: -2;
    }

    .az-template-pagehero-bg {
        position: absolute;
        inset: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        opacity: .2;
    }

    .az-template-pagehero--photo::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(to bottom, rgb(var(--az-template-green-section-rgb) / .6), rgb(var(--az-template-green-section-rgb) / .5) 50%, var(--az-template-green-section));
    }

    .az-template-pagehero--photo .az-template-pagehero-inner {
        max-width: 1024px;
    }

    .az-template-pagehero--photo .az-template-pagehero-title {
        font-size: clamp(2.8rem, 8vw, 6.5rem);
        line-height: 1.05;
    }

    .az-template-pagehero--photo .az-template-pagehero-lead {
        color: rgb(var(--az-template-white-rgb) / .6);
    }

    /* Nut lien he nhanh trong hero Lien he */
    .az-template-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 32px;
    }

    .az-template-pills .az-template-btn {
        min-height: 40px;
        padding: 10px 24px;
    }

    .az-template-pills .az-template-btn--ghost {
        border-color: rgb(var(--az-template-white-rgb) / .2);
        color: rgb(var(--az-template-white-rgb) / .7);
    }

    .az-template-pills .az-template-btn--ghost:hover {
        border-color: rgb(var(--az-template-white-rgb) / .4);
        color: var(--az-template-white);
    }

    /* ======================================================================
       17. THUC DON - tab dinh + trang anh menu
       Tab dinh DUOI header (top = chieu cao header), khong phai top 0.
       ====================================================================== */

    .az-template-tabs {
        position: sticky;
        top: var(--az-template-header-h);
        z-index: 40;
        background: rgb(var(--az-template-cream-2-rgb) / .95);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border-bottom: 1px solid rgb(var(--az-template-terracotta-rgb) / .12);
        box-shadow: 0 2px 16px rgb(var(--az-template-ink-rgb) / .07);
    }

    .az-template-tabs-inner {
        display: flex;
        justify-content: center;
        max-width: 1024px;
        margin-inline: auto;
        padding-inline: var(--az-template-gutter);
    }

    .az-template-tab {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 40px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-tab:hover {
        color: rgb(var(--az-template-ink-rgb) / .85);
    }

    .az-template-tab.is-active {
        font-weight: 700;
        color: var(--az-template-terracotta);
    }

    .az-template-tab.is-active::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--az-template-terracotta);
    }

    .az-template-tab-count {
        padding: 2px 6px;
        border: 1px solid rgb(var(--az-template-ink-rgb) / .1);
        border-radius: 999px;
        background: rgb(var(--az-template-ink-rgb) / .05);
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: 0;
        /* M3: .6 chi dat ~4:1 cho chu 9px -> .75 dat ~6:1 */
        color: rgb(var(--az-template-ink-rgb) / .75);
    }

    .az-template-tab.is-active .az-template-tab-count {
        border-color: rgb(var(--az-template-terracotta-rgb) / .3);
        background: rgb(var(--az-template-terracotta-rgb) / .1);
        color: var(--az-template-terracotta);
    }

    .az-template-tabpanel[hidden] {
        display: none;
    }

    .az-template-menubook {
        padding-block: 56px;
    }

    .az-template-menubook .az-template-eyebrow {
        margin-bottom: 48px;
    }

    .az-template-menupages {
        display: grid;
        gap: 32px;
    }

    .az-template-menupage {
        position: relative;
    }

    .az-template-menupage-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 1;
        padding: 6px 12px;
        border: 1px solid rgb(var(--az-template-gold-rgb) / .2);
        border-radius: 999px;
        /* M3: nen gan dac (.92) - chu vang 9px van dat >= 4,5:1 ca khi nam tren vung sang cua anh menu */
        background: rgb(var(--az-template-green-dark-rgb) / .92);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: .32em;
        text-transform: uppercase;
        color: var(--az-template-gold);
    }

    .az-template-menupage-frame {
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .08);
        border-radius: var(--az-template-radius);
        background: var(--az-template-white);
        box-shadow: 0 8px 40px rgb(var(--az-template-ink-rgb) / .12);
        transition: box-shadow .4s var(--az-template-ease);
    }

    .az-template-menupage:hover .az-template-menupage-frame {
        box-shadow: 0 20px 64px rgb(var(--az-template-ink-rgb) / .2);
    }

    .az-template-menupage-frame img {
        width: 100%;
    }

    .az-template-note {
        margin-top: 48px;
        font-size: 12px;
        line-height: 1.9;
        text-align: center;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-backtop {
        display: flex;
        justify-content: center;
        padding-bottom: 40px;
    }

    .az-template-backtop-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        font-size: 11px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--az-template-olive);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-backtop-btn:hover {
        color: var(--az-template-terracotta);
    }

    @media (max-width: 639px) {
        .az-template-tab {
            padding: 16px 18px;
            letter-spacing: .15em;
        }

        .az-template-tab.is-active::after {
            left: 8px;
            right: 8px;
        }
    }

    /* ======================================================================
       18. KHONG GIAN - khu anh + luoi anh + the CTA + lightbox (dung chung)
       ====================================================================== */

    .az-template-zones {
        display: grid;
        gap: 80px;
        padding-block: 64px;
    }

    .az-template-zone-head {
        margin-bottom: 32px;
    }

    .az-template-zone-head .az-template-title {
        margin-bottom: 12px;
    }

    .az-template-zone-head .az-template-lead {
        font-size: 14px;
        line-height: 1.85;
    }

    .az-template-gallery {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .az-template-gallery-item {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 4 / 3;
        border-radius: var(--az-template-radius);
        box-shadow: 0 4px 24px rgb(var(--az-template-ink-rgb) / .1);
        outline: 1px solid transparent;
        outline-offset: -1px;
        cursor: zoom-in;
        transition: box-shadow .4s var(--az-template-ease), outline-color .3s var(--az-template-ease);
    }

    .az-template-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s var(--az-template-ease);
    }

    .az-template-gallery-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(var(--az-template-green-dark-rgb) / .7), transparent 60%);
        opacity: 0;
        transition: opacity .3s var(--az-template-ease);
    }

    .az-template-gallery-cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        padding: 16px;
        font-size: 14px;
        font-weight: 500;
        color: var(--az-template-white);
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .3s var(--az-template-ease), transform .3s var(--az-template-ease);
    }

    .az-template-gallery-cap .az-template-icon {
        font-size: 16px;
        color: rgb(var(--az-template-white-rgb) / .7);
    }

    .az-template-gallery-item:hover {
        outline-color: rgb(var(--az-template-gold-rgb) / .3);
        box-shadow: 0 12px 48px rgb(var(--az-template-ink-rgb) / .2);
    }

    .az-template-gallery-item:hover img {
        transform: scale(1.06);
    }

    .az-template-gallery-item:hover::after,
    .az-template-gallery-item:hover .az-template-gallery-cap,
    .az-template-gallery-item:focus-visible::after,
    .az-template-gallery-item:focus-visible .az-template-gallery-cap {
        opacity: 1;
        transform: none;
    }

    .az-template-gallery-item:focus-visible {
        outline: 2px solid var(--az-template-focus, var(--az-template-terracotta));
        outline-offset: 3px;
    }

    @media (min-width: 640px) {
        .az-template-gallery {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Khu 4 anh: anh dau cao gap doi, anh cuoi trai ngang - luoi khong de o trong */
        .az-template-gallery--quad .az-template-gallery-item:first-child {
            grid-row: span 2;
            aspect-ratio: auto;
        }

        .az-template-gallery--quad .az-template-gallery-item:nth-child(4) {
            grid-column: span 2;
            aspect-ratio: 8 / 3;
        }
    }

    /* Luoi 2 cot: anh le cuoi cung trai het hang (khong de o trong) */
    @media (min-width: 640px) and (max-width: 1023px) {
        .az-template-gallery:not(.az-template-gallery--quad) .az-template-gallery-item:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            aspect-ratio: 8 / 3;
        }
    }

    @media (min-width: 1024px) {
        .az-template-gallery {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        /* Luoi 3 cot: hang cuoi con 2 anh thi anh cuoi trai 2 cot */
        .az-template-gallery:not(.az-template-gallery--quad) .az-template-gallery-item:last-child:nth-child(3n + 2) {
            grid-column: span 2;
            aspect-ratio: 8 / 3;
        }

        /* Luoi 3 cot: hang cuoi con 1 anh thi anh do trai het hang (M3 - khu co so anh bat ky) */
        .az-template-gallery:not(.az-template-gallery--quad) .az-template-gallery-item:last-child:nth-child(3n + 1) {
            grid-column: 1 / -1;
            aspect-ratio: 12 / 5;
        }
    }

    .az-template-ctacard {
        overflow: hidden;
        padding: 56px 32px;
        border-radius: var(--az-template-radius-lg);
        background: var(--az-template-green-section);
        text-align: center;
    }

    .az-template-ctacard .az-template-title {
        margin-bottom: 12px;
    }

    .az-template-ctacard .az-template-lead {
        max-width: 28rem;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.85;
        color: rgb(var(--az-template-white-rgb) / .6);
    }

    .az-template-ctacard .az-template-actions {
        margin-top: 32px;
    }

    /* Lightbox: JS tao/mo; dung chung Khong gian + Feedback + anh bai viet */
    .az-template-lightbox {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgb(var(--az-template-green-night-rgb) / .93);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .az-template-lightbox.is-open {
        display: flex;
    }

    .az-template-lightbox-figure {
        width: 100%;
        max-width: 1024px;
    }

    .az-template-lightbox-img {
        width: 100%;
        max-height: 80vh;
        object-fit: contain;
        border-radius: var(--az-template-radius);
    }

    .az-template-lightbox-cap {
        margin-top: 16px;
        font-size: 14px;
        letter-spacing: .05em;
        text-align: center;
        color: rgb(var(--az-template-white-rgb) / .5);
    }

    .az-template-lightbox-count {
        margin-left: 12px;
        color: rgb(var(--az-template-white-rgb) / .5);
    }

    .az-template-lightbox-btn {
        position: absolute;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        color: rgb(var(--az-template-white-rgb) / .6);
        font-size: 28px;
        transition: color .3s var(--az-template-ease);
    }

    .az-template-lightbox-btn:hover {
        color: var(--az-template-white);
    }

    .az-template-lightbox-btn--close {
        top: 16px;
        right: 16px;
    }

    .az-template-lightbox-btn--prev,
    .az-template-lightbox-btn--next {
        top: 50%;
        margin-top: -24px;
        font-size: 32px;
    }

    .az-template-lightbox-btn--prev {
        left: 8px;
    }

    .az-template-lightbox-btn--next {
        right: 8px;
    }

    /* M3: display inline-flex o tren de mat [hidden] mac dinh -> tra lai an cho mui ten khi nhom chi co 1 anh */
    .az-template-lightbox-btn[hidden] {
        display: none;
    }

    /* ======================================================================
       19. LIEN HE - dia chi + ban do + form dat cho + 3 the + mang xa hoi
       ====================================================================== */

    .az-template-contact {
        display: grid;
        gap: 64px;
        padding-block: 56px 80px;
    }

    .az-template-contact-grid {
        display: grid;
        gap: 24px;
    }

    .az-template-infocard {
        padding: 28px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .1);
        border-radius: var(--az-template-radius);
        background: var(--az-template-white);
        box-shadow: 0 4px 24px rgb(var(--az-template-ink-rgb) / .07);
    }

    .az-template-infocard-title {
        margin-bottom: 4px;
        font-family: var(--az-template-font-head);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--az-template-ink);
    }

    .az-template-infocard-sub {
        margin-bottom: 24px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--az-template-terracotta);
    }

    .az-template-inforows {
        display: grid;
        gap: 16px;
        margin-bottom: 24px;
    }

    .az-template-inforow {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .az-template-inforow > .az-template-icon {
        margin-top: 3px;
        font-size: 15px;
        color: var(--az-template-terracotta);
    }

    .az-template-inforow-label {
        margin-bottom: 2px;
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-inforow-value {
        font-size: 14px;
        line-height: 1.7;
        color: rgb(var(--az-template-ink-rgb) / .8);
        overflow-wrap: anywhere;
    }

    a.az-template-inforow-value:hover {
        color: var(--az-template-terracotta);
    }

    .az-template-map {
        position: relative;
        min-height: 360px;
        overflow: hidden;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .1);
        border-radius: var(--az-template-radius);
        background: var(--az-template-cream);
        box-shadow: 0 4px 24px rgb(var(--az-template-ink-rgb) / .1);
    }

    .az-template-map iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Khung cho khi chua co ma nhung ban do that */
    .az-template-map-empty {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 24px;
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
        color: rgb(var(--az-template-ink-rgb) / .65);
        background:
            repeating-linear-gradient(45deg, rgb(var(--az-template-terracotta-rgb) / .04) 0 12px, transparent 12px 24px),
            var(--az-template-cream);
    }

    .az-template-map-empty .az-template-icon {
        font-size: 32px;
        color: var(--az-template-terracotta);
    }

    .az-template-footmap .az-template-map-empty {
        position: static;
        height: 100%;
        font-size: 12px;
        color: rgb(var(--az-template-white-rgb) / .4);
        background: repeating-linear-gradient(45deg, rgb(var(--az-template-white-rgb) / .03) 0 10px, transparent 10px 20px);
    }

    .az-template-footmap .az-template-map-empty .az-template-icon {
        font-size: 20px;
        color: rgb(var(--az-template-gold-rgb) / .6);
    }

    /* Chua co ma nhung ban do (B3): o ban do la lien ket mo Google Maps theo dia chi site (M2) */
    a.az-template-map-empty {
        text-decoration: none;
        transition: color .3s var(--az-template-ease);
    }

    .az-template-footmap a.az-template-map-empty {
        color: rgb(var(--az-template-white-rgb) / .8);
    }

    .az-template-footmap a.az-template-map-empty:hover {
        color: var(--az-template-gold);
    }

    .az-template-footmap a.az-template-map-empty:focus-visible {
        outline-offset: -4px;
    }

    .az-template-bookcard {
        overflow: hidden;
        padding: 48px var(--az-template-gutter);
        border-radius: var(--az-template-radius-lg);
        background: var(--az-template-olive);
    }

    .az-template-bookcard .az-template-head {
        margin-bottom: 40px;
    }

    .az-template-bookcard .az-template-lead {
        margin-top: 8px;
        font-size: 14px;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-form {
        display: grid;
        gap: 16px;
        max-width: 672px;
        margin-inline: auto;
    }

    .az-template-form-grid {
        display: grid;
        gap: 16px;
    }

    .az-template-form .az-template-label {
        letter-spacing: .3em;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-form .az-template-input {
        padding-block: 12px;
    }

    .az-template-form .az-template-btn {
        margin-top: 4px;
        padding-block: 14px;
        letter-spacing: .25em;
    }

    .az-template-form-done {
        max-width: 672px;
        margin-inline: auto;
        padding-block: 40px;
        text-align: center;
    }

    .az-template-form-done[hidden],
    .az-template-form[hidden] {
        display: none;
    }

    .az-template-form-done > .az-template-icon {
        margin: 0 auto 16px;
        font-size: 48px;
        color: var(--az-template-gold);
    }

    .az-template-form-done-title {
        margin-bottom: 8px;
        font-family: var(--az-template-font-head);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--az-template-white);
    }

    .az-template-form-done-text {
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.8;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-linkbtn {
        font-size: 11px;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: var(--az-template-gold);
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-inline: 12px;
    }

    .az-template-linkbtn:hover {
        text-decoration: underline;
    }

    .az-template-contactcards {
        display: grid;
        gap: 24px;
    }

    .az-template-contactcard {
        padding: 24px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .1);
        border-radius: var(--az-template-radius);
        background: var(--az-template-white);
        box-shadow: 0 4px 20px rgb(var(--az-template-ink-rgb) / .07);
    }

    .az-template-contactcard-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
        border-radius: 50%;
        background: rgb(var(--az-template-terracotta-rgb) / .08);
        font-size: 20px;
        color: var(--az-template-terracotta);
    }

    .az-template-contactcard-label {
        margin-bottom: 8px;
        font-size: 10px;
        letter-spacing: .35em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-contactcard-line {
        display: block;
        font-size: 14px;
        line-height: 1.8;
        color: rgb(var(--az-template-ink-rgb) / .8);
        overflow-wrap: anywhere;
    }

    a.az-template-contactcard-line:hover {
        color: var(--az-template-terracotta);
    }

    .az-template-contactcard-sub {
        margin-top: 4px;
        font-size: 12px;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-socials {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .az-template-social {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 10px 20px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .2);
        border-radius: 999px;
        font-size: 14px;
        color: rgb(var(--az-template-ink-rgb) / .7);
        transition: color .2s var(--az-template-ease), border-color .2s var(--az-template-ease), background-color .2s var(--az-template-ease);
    }

    .az-template-social .az-template-icon {
        font-size: 18px;
    }

    .az-template-social-abbr {
        font-size: 14px;
        font-weight: 700;
    }

    .az-template-social:hover {
        border-color: rgb(var(--az-template-terracotta-rgb) / .5);
        background: rgb(var(--az-template-terracotta-rgb) / .05);
        color: var(--az-template-terracotta);
    }

    @media (min-width: 640px) {
        .az-template-bookcard {
            padding-inline: 40px;
        }

        .az-template-form-grid,
        .az-template-contactcards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 768px) {
        .az-template-contactcards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .az-template-contact-grid {
            grid-template-columns: 2fr 3fr;
        }
    }

    /* ======================================================================
       20. BLOG - thanh loc chuyen muc (link nhom, server render) + bai noi bat
       + luoi bai + phan trang (thiet ke khong co - bo sung)
       ====================================================================== */

    .az-template-filter {
        position: sticky;
        top: var(--az-template-header-h);
        z-index: 40;
        background: rgb(var(--az-template-cream-2-rgb) / .95);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border-bottom: 1px solid rgb(var(--az-template-terracotta-rgb) / .12);
        box-shadow: 0 2px 16px rgb(var(--az-template-ink-rgb) / .07);
    }

    .az-template-filter-inner {
        display: flex;
        align-items: center;
        gap: 4px;
        max-width: 1024px;
        margin-inline: auto;
        padding: 4px var(--az-template-gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .az-template-filter-inner::-webkit-scrollbar {
        display: none;
    }

    /* Man hep: mo dan mep phai de bao hieu con muc cuon ngang */
    @media (max-width: 767px) {
        .az-template-filter-inner {
            -webkit-mask-image: linear-gradient(to right, var(--az-template-ink) calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, var(--az-template-ink) calc(100% - 40px), transparent);
        }

        /* Khoang dem cuoi de muc cuoi cuon ra khoi vung mo */
        .az-template-filter-inner::after {
            content: "";
            flex: 0 0 40px;
        }
    }

    .az-template-filter-link {
        flex: none;
        margin-block: 4px;
        padding: 12px 20px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
        transition: color .25s var(--az-template-ease), background-color .25s var(--az-template-ease);
    }

    .az-template-filter-link:hover {
        background: rgb(var(--az-template-ink-rgb) / .05);
        color: rgb(var(--az-template-ink-rgb) / .9);
    }

    .az-template-filter-link.is-active {
        background: var(--az-template-green-dark);
        font-weight: 700;
        color: var(--az-template-gold);
    }

    .az-template-blog {
        padding-block: 56px 80px;
    }

    /* Nhan chuyen muc: mau theo thu tu nhom (c1..c4), khong theo ten */
    .az-template-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgb(var(--az-template-terracotta-rgb) / .14);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--az-template-terracotta);
    }

    .az-template-badge--sm {
        padding: 4px 10px;
        font-size: 9px;
    }

    .az-template-badge--hot {
        background: var(--az-template-gold);
        color: var(--az-template-green-dark);
    }

    .az-template-badge--c2 {
        background: rgb(var(--az-template-olive-rgb) / .14);
        color: var(--az-template-olive);
    }

    .az-template-badge--c3 {
        background: rgb(var(--az-template-gold-rgb) / .14);
        color: var(--az-template-gold-deep);
    }

    .az-template-badge--c4 {
        background: rgb(var(--az-template-green-dark-rgb) / .1);
        color: var(--az-template-olive);
    }

    /* Nhan tren anh toi: nen dac hon de doc duoc */
    .az-template-articlehero .az-template-badge,
    .az-template-post-media .az-template-badge,
    .az-template-featured-badges .az-template-badge {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .az-template-featured {
        display: grid;
        overflow: hidden;
        margin-bottom: 56px;
        border-radius: var(--az-template-radius-lg);
        background: var(--az-template-white);
        box-shadow: 0 8px 40px rgb(var(--az-template-ink-rgb) / .12);
        transition: box-shadow .5s var(--az-template-ease);
    }

    .az-template-featured:hover {
        box-shadow: 0 20px 64px rgb(var(--az-template-ink-rgb) / .2);
    }

    .az-template-featured-media {
        position: relative;
        min-height: 260px;
        overflow: hidden;
    }

    .az-template-featured-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .7s var(--az-template-ease);
    }

    .az-template-featured:hover .az-template-featured-media img {
        transform: scale(1.05);
    }

    .az-template-featured-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent, rgb(var(--az-template-green-dark-rgb) / .2));
    }

    .az-template-featured-badges {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .az-template-featured-badges .az-template-badge:not(.az-template-badge--hot),
    .az-template-articlehero .az-template-badge {
        background: rgb(var(--az-template-white-rgb) / .85);
    }

    .az-template-featured-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px;
    }

    .az-template-featured-title {
        margin-bottom: 16px;
        font-family: var(--az-template-font-head);
        font-size: clamp(1.3rem, 2vw, 1.65rem);
        font-weight: 700;
        line-height: 1.28;
        color: var(--az-template-ink);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-featured:hover .az-template-featured-title {
        color: var(--az-template-terracotta);
    }

    .az-template-featured-excerpt {
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 1.9;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-postmeta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid rgb(var(--az-template-ink-rgb) / .06);
    }

    .az-template-postmeta-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
        font-size: 12px;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-postmeta-info > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .az-template-postmeta-info .az-template-icon {
        font-size: 11px;
    }

    .az-template-readmore {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--az-template-terracotta);
    }

    .az-template-readmore .az-template-icon {
        font-size: 12px;
        transition: transform .3s var(--az-template-ease);
    }

    .az-template-featured:hover .az-template-readmore .az-template-icon {
        transform: translateX(4px);
    }

    .az-template-posts {
        display: grid;
        gap: 24px;
    }

    .az-template-post {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--az-template-radius);
        background: var(--az-template-white);
        box-shadow: 0 4px 24px rgb(var(--az-template-ink-rgb) / .08);
        transition: box-shadow .4s var(--az-template-ease), transform .4s var(--az-template-ease);
    }

    .az-template-post:hover {
        box-shadow: 0 12px 48px rgb(var(--az-template-ink-rgb) / .18);
        transform: translateY(-4px);
    }

    .az-template-post-media {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .az-template-post-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s var(--az-template-ease);
    }

    .az-template-post:hover .az-template-post-media img {
        transform: scale(1.06);
    }

    .az-template-post-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(var(--az-template-green-dark-rgb) / .35), transparent 50%);
    }

    .az-template-post-media .az-template-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 1;
        background: rgb(var(--az-template-white-rgb) / .85);
    }

    .az-template-post-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 20px;
    }

    .az-template-post-title {
        display: -webkit-box;
        margin-bottom: 12px;
        overflow: hidden;
        font-family: var(--az-template-font-head);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--az-template-ink);
        transition: color .25s var(--az-template-ease);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .az-template-post:hover .az-template-post-title {
        color: var(--az-template-terracotta);
    }

    .az-template-post-excerpt {
        display: -webkit-box;
        flex: 1;
        margin-bottom: 16px;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.8;
        color: rgb(var(--az-template-ink-rgb) / .65);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .az-template-post .az-template-postmeta {
        padding-top: 16px;
    }

    .az-template-post .az-template-postmeta-info {
        font-size: 11px;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-post-chevron {
        font-size: 14px;
        color: rgb(var(--az-template-terracotta-rgb) / .4);
        transition: color .2s var(--az-template-ease), transform .2s var(--az-template-ease);
    }

    .az-template-post:hover .az-template-post-chevron {
        color: var(--az-template-terracotta);
        transform: translateX(2px);
    }

    .az-template-label-line {
        margin-bottom: 32px;
    }

    .az-template-pager {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 48px;
    }

    .az-template-pager-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding-inline: 14px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .2);
        border-radius: 999px;
        font-size: 13px;
        color: rgb(var(--az-template-ink-rgb) / .6);
        transition: color .2s var(--az-template-ease), border-color .2s var(--az-template-ease);
    }

    .az-template-pager-link:hover {
        border-color: rgb(var(--az-template-terracotta-rgb) / .5);
        color: var(--az-template-terracotta);
    }

    .az-template-pager-link.is-active {
        border-color: var(--az-template-green-dark);
        background: var(--az-template-green-dark);
        font-weight: 700;
        color: var(--az-template-gold);
    }

    .az-template-pager-link.is-disabled {
        opacity: .35;
        pointer-events: none;
    }

    .az-template-empty {
        padding-block: 96px;
        font-size: 14px;
        text-align: center;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    @media (min-width: 640px) {
        .az-template-posts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .az-template-featured-body {
            padding: 40px;
        }
    }

    @media (min-width: 1024px) {
        .az-template-posts {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .az-template-featured {
            grid-template-columns: 3fr 2fr;
        }

        .az-template-featured-media {
            min-height: 360px;
        }
    }

    /* ======================================================================
       21. BAI VIET - anh hero + tieu de phu, noi dung RichText, cot phai
       ====================================================================== */

    .az-template-articlehero {
        position: relative;
        overflow: hidden;
        margin-top: calc(var(--az-template-header-h) * -1);
        padding-top: var(--az-template-header-h);
        background: var(--az-template-green-dark);
    }

    .az-template-articlehero-media {
        position: relative;
        height: 55vh;
        min-height: 380px;
        max-height: 520px;
        overflow: hidden;
    }

    .az-template-articlehero-media > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        opacity: .7;
    }

    .az-template-articlehero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, var(--az-template-green-dark), rgb(var(--az-template-green-dark-rgb) / .4) 50%, transparent);
    }

    .az-template-articlehero-top {
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .az-template-articlehero-top .az-template-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .az-template-articlehero-bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 0 var(--az-template-gutter) 40px;
    }

    .az-template-articlehero-title {
        max-width: 768px;
        margin-inline: auto;
        font-family: var(--az-template-font-head);
        font-size: clamp(1.8rem, 4vw, 3rem);
        font-weight: 700;
        line-height: 1.12;
        color: var(--az-template-white);
        text-wrap: balance;
    }

    .az-template-backlink {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        font-size: 11px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--az-template-olive);
        transition: color .3s var(--az-template-ease);
    }

    .az-template-backlink:hover {
        color: var(--az-template-terracotta);
    }

    .az-template-backlink--light {
        font-size: 12px;
        letter-spacing: .05em;
        text-transform: none;
        color: rgb(var(--az-template-white-rgb) / .75);
    }

    .az-template-backlink--light:hover {
        color: var(--az-template-white);
    }

    .az-template-article-layout {
        display: grid;
        gap: 40px;
        padding-block: 48px 80px;
    }

    .az-template-article {
        min-width: 0;
    }

    .az-template-article-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 20px;
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid rgb(var(--az-template-ink-rgb) / .08);
    }

    .az-template-article-meta .az-template-postmeta-info {
        margin-left: auto;
    }

    .az-template-author {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .az-template-author-avatar {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--az-template-olive);
        font-family: var(--az-template-font-head);
        font-size: 12px;
        font-weight: 700;
        color: var(--az-template-white);
    }

    .az-template-author-name {
        font-size: 14px;
        font-weight: 600;
        color: rgb(var(--az-template-ink-rgb) / .8);
    }

    .az-template-author-role {
        font-size: 12px;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-article-intro {
        margin-bottom: 40px;
        font-size: 1.05rem;
        line-height: 2;
        color: rgb(var(--az-template-ink-rgb) / .7);
    }

    /* Vach ngan: gach - cham - gach */
    .az-template-divider {
        display: flex;
        align-items: center;
        gap: 30px;
        height: 6px;
        margin-bottom: 40px;
        background: radial-gradient(circle closest-side, rgb(var(--az-template-terracotta-rgb) / .4) 80%, transparent 100%) center / 6px 6px no-repeat;
    }

    .az-template-divider::before,
    .az-template-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgb(var(--az-template-terracotta-rgb) / .2);
    }

    /* Noi dung RichText tu quan tri: chi style the, khong doi cau truc */
    .az-template-prose {
        font-size: .96rem;
        line-height: 2;
        color: rgb(var(--az-template-ink-rgb) / .65);
        overflow-wrap: break-word;
    }

    .az-template-prose p,
    .az-template-prose ul,
    .az-template-prose ol,
    .az-template-prose table {
        margin: 0 0 20px;
    }

    .az-template-prose h2 {
        margin: 48px 0 20px;
        font-family: var(--az-template-font-head);
        font-size: clamp(1.2rem, 2vw, 1.5rem);
        font-weight: 700;
        line-height: 1.3;
        color: var(--az-template-ink);
    }

    .az-template-prose h3 {
        margin: 32px 0 16px;
        font-family: var(--az-template-font-head);
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--az-template-ink);
    }

    .az-template-prose > :first-child {
        margin-top: 0;
    }

    .az-template-prose a {
        color: var(--az-template-terracotta);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .az-template-prose strong {
        font-weight: 700;
        color: rgb(var(--az-template-ink-rgb) / .8);
    }

    .az-template-prose ul,
    .az-template-prose ol {
        padding-left: 1.4em;
    }

    /* Danh sach co class (vd wp-block-list) bi reset list-style: tra lai dau dong */
    .az-template-prose ul {
        list-style: disc;
    }

    .az-template-prose ol {
        list-style: decimal;
    }

    .az-template-prose li + li {
        margin-top: 6px;
    }

    .az-template-prose blockquote {
        margin: 32px 0;
        padding-left: 24px;
        border-left: 4px solid var(--az-template-terracotta);
        font-size: 1rem;
        font-style: italic;
        line-height: 1.9;
        color: var(--az-template-terracotta);
    }

    .az-template-prose blockquote p {
        margin: 0;
    }

    .az-template-prose figure {
        margin: 32px 0;
    }

    .az-template-prose img {
        max-width: 100%;
        height: auto;
        border-radius: var(--az-template-radius);
    }

    .az-template-prose figure img {
        width: 100%;
        max-height: 380px;
        object-fit: cover;
        box-shadow: 0 8px 32px rgb(var(--az-template-ink-rgb) / .12);
    }

    .az-template-prose figcaption {
        margin-top: 12px;
        font-size: 12px;
        font-style: italic;
        text-align: center;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    /* Bang rong tu RichText: cuon ngang trong khung, khong day trang ra ngoai */
    .az-template-prose table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 1.6;
    }

    .az-template-prose th,
    .az-template-prose td {
        padding: 8px 12px;
        border: 1px solid rgb(var(--az-template-ink-rgb) / .12);
        text-align: left;
        overflow-wrap: anywhere;
    }

    .az-template-prose iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        border: 0;
        border-radius: var(--az-template-radius);
    }

    .az-template-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 32px 0;
        padding-top: 32px;
        border-top: 1px solid rgb(var(--az-template-ink-rgb) / .08);
    }

    .az-template-tag {
        padding: 6px 12px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .25);
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: rgb(var(--az-template-terracotta-rgb) / .7);
    }

    .az-template-share {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    .az-template-share-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-share-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 6px 16px;
        border: 1px solid rgb(var(--az-template-ink-rgb) / .15);
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: rgb(var(--az-template-ink-rgb) / .65);
        transition: color .2s var(--az-template-ease), border-color .2s var(--az-template-ease);
    }

    .az-template-share-link:hover {
        border-color: rgb(var(--az-template-terracotta-rgb) / .4);
        color: var(--az-template-terracotta);
    }

    .az-template-aside {
        display: grid;
        align-content: start;
        gap: 32px;
    }

    .az-template-asidecta {
        overflow: hidden;
        padding: 24px;
        border-radius: var(--az-template-radius);
        background: var(--az-template-green-section);
        text-align: center;
    }

    .az-template-asidecta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
        border-radius: 50%;
        background: rgb(var(--az-template-gold-rgb) / .15);
        font-size: 16px;
        color: var(--az-template-gold);
    }

    .az-template-asidecta-title {
        margin-bottom: 8px;
        font-family: var(--az-template-font-head);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--az-template-white);
    }

    .az-template-asidecta-text {
        margin-bottom: 20px;
        font-size: 12px;
        line-height: 1.8;
        color: rgb(var(--az-template-white-rgb) / .6);
    }

    .az-template-asidecta .az-template-btn {
        margin-bottom: 12px;
    }

    .az-template-asidecta-phone {
        font-size: 14px;
        color: var(--az-template-gold);
    }

    .az-template-related-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .35em;
        text-transform: uppercase;
        color: var(--az-template-terracotta);
    }

    .az-template-related-head::before {
        content: "";
        width: 20px;
        height: 1px;
        background: var(--az-template-olive);
    }

    .az-template-related {
        display: grid;
        gap: 4px;
    }

    .az-template-related-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
        border-radius: var(--az-template-radius-sm);
        transition: background-color .2s var(--az-template-ease);
    }

    .az-template-related-item:hover {
        background: rgb(var(--az-template-white-rgb) / .7);
    }

    .az-template-related-thumb {
        flex: none;
        width: 80px;
        height: 64px;
        overflow: hidden;
        border-radius: 8px;
    }

    .az-template-related-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s var(--az-template-ease);
    }

    .az-template-related-item:hover .az-template-related-thumb img {
        transform: scale(1.05);
    }

    .az-template-related-body {
        flex: 1;
        min-width: 0;
    }

    .az-template-related-cat {
        display: block;
        margin-bottom: 4px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--az-template-terracotta);
    }

    .az-template-related-title {
        display: -webkit-box;
        overflow: hidden;
        font-family: var(--az-template-font-head);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        color: rgb(var(--az-template-ink-rgb) / .8);
        transition: color .2s var(--az-template-ease);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .az-template-related-item:hover .az-template-related-title {
        color: var(--az-template-terracotta);
    }

    .az-template-related-date {
        margin-top: 4px;
        font-size: 12px;
        color: rgb(var(--az-template-ink-rgb) / .65);
        display: block;
    }

    @media (min-width: 1024px) {
        .az-template-article-layout {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        }
    }

    /* ======================================================================
       22. VE NHAT CO (Intro) - 4 muc SiteIntro xen ke anh/chu
       ====================================================================== */

    .az-template-chapters {
        display: grid;
        gap: 80px;
        padding-block: 64px 96px;
    }

    .az-template-chapter {
        display: grid;
        align-items: center;
        gap: 32px;
    }

    .az-template-chapter-no {
        display: block;
        margin-bottom: 8px;
        font-family: var(--az-template-font-head);
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        color: rgb(var(--az-template-terracotta-rgb) / .18);
    }

    .az-template-chapter .az-template-title {
        font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    }

    .az-template-chapter .az-template-prose {
        color: rgb(var(--az-template-ink-rgb) / .7);
    }

    .az-template-chapter-media {
        position: relative;
    }

    .az-template-chapter-media::before {
        content: "";
        position: absolute;
        inset: -12px 12px 12px -12px;
        border: 1px solid rgb(var(--az-template-terracotta-rgb) / .15);
        border-radius: var(--az-template-radius-lg);
        pointer-events: none;
    }

    .az-template-chapter-media img {
        position: relative;
        width: 100%;
        border-radius: var(--az-template-radius);
        box-shadow: 0 20px 56px rgb(var(--az-template-terracotta-rgb) / .18);
    }

    @media (min-width: 768px) {
        .az-template-chapter {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 56px;
        }

        .az-template-chapter:nth-child(even) .az-template-chapter-media {
            order: 2;
        }

        .az-template-chapter:nth-child(even) .az-template-chapter-media::before {
            inset: -12px -12px 12px 12px;
        }
    }

    /* ======================================================================
       23. TRANG ANH DON (Service - slug anh khong gian) + 404
       ====================================================================== */

    .az-template-single {
        padding-block: 56px 80px;
    }

    .az-template-single-figure img {
        width: 100%;
        border-radius: var(--az-template-radius);
        box-shadow: 0 12px 48px rgb(var(--az-template-ink-rgb) / .16);
    }

    .az-template-single-figure figcaption {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.8;
        text-align: center;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-notfound {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        min-height: 78vh;
        margin-top: calc(var(--az-template-header-h) * -1);
        padding: calc(var(--az-template-header-h) + 56px) var(--az-template-gutter) 96px;
        background: var(--az-template-green-dark);
        text-align: center;
    }

    .az-template-notfound-code {
        margin-bottom: 8px;
        font-family: var(--az-template-font-head);
        font-size: clamp(5rem, 18vw, 10rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: .04em;
        color: rgb(var(--az-template-gold-rgb) / .3);
    }

    @supports (-webkit-text-stroke: 1px) {
        .az-template-notfound-code {
            color: transparent;
            -webkit-text-stroke: 1px rgb(var(--az-template-gold-rgb) / .6);
        }
    }

    .az-template-notfound-title {
        margin-bottom: 16px;
        font-family: var(--az-template-font-head);
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        font-weight: 700;
        line-height: 1.15;
        color: var(--az-template-white);
    }

    .az-template-notfound .az-template-lead {
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.85;
    }

    /* ======================================================================
       24. THIET BI CHAM + GIAM CHUYEN DONG
       ====================================================================== */

    /* Man hinh cham: noi rong vung bam cac lien ket chu nho (>= 40px) */
    @media (pointer: coarse) {
        .az-template-share-link,
        .az-template-tag,
        .az-template-pager-link {
            min-height: 44px;
        }

        .az-template-share-link,
        .az-template-tag {
            display: inline-flex;
            align-items: center;
        }
    }

    /* Man hinh cham khong co hover: hien san chu thich anh */
    @media (hover: none) {
        .az-template-mosaic-item::after,
        .az-template-gallery-item::after,
        .az-template-mosaic-cap,
        .az-template-gallery-cap {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        /* :where() = do uu tien 0 se THUA moi rule lop -> them :not(#id) (trong so ID) */
        :is(.az-template-header, .az-template-main, .az-template-footer, .az-template-fab, .az-template-lightbox):not(#az-template-rm),
        :is(.az-template-header, .az-template-main, .az-template-footer, .az-template-fab, .az-template-lightbox) :not(#az-template-rm),
        :is(.az-template-header, .az-template-main, .az-template-footer, .az-template-fab, .az-template-lightbox) :not(#az-template-rm)::before,
        :is(.az-template-header, .az-template-main, .az-template-footer, .az-template-fab, .az-template-lightbox) :not(#az-template-rm)::after {
            transition-duration: .01ms;
            transition-delay: 0s;
            animation-duration: .01ms;
            animation-delay: 0s;
            animation-iteration-count: 1;
            scroll-behavior: auto;
        }
    }

    /* ======================================================================
       25. M3 - bo sung cho Thuc don / Khong gian / anh don / Ve Nhat Co / Lien he
       ====================================================================== */

    /* Duong dan (breadcrumb) o hero trang chi tiet: dung cho va kieu chu cua eyebrow; vang tren nen toi 6:1 */
    .az-template-crumbs {
        margin-bottom: 20px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--az-template-gold);
    }

    .az-template-crumbs ol {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .az-template-crumbs li {
        display: inline-flex;
        align-items: center;
    }

    .az-template-crumbs li + li::before {
        content: "/";
        margin-inline: 12px;
        color: rgb(var(--az-template-gold-rgb) / .55);
    }

    /* Vung bam >= 24px (WCAG 2.5.8) du chu chi 10px */
    .az-template-crumbs a {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        color: var(--az-template-gold);
        text-decoration: underline;
        text-decoration-color: rgb(var(--az-template-gold-rgb) / .35);
        text-underline-offset: 4px;
        transition: text-decoration-color .3s var(--az-template-ease);
    }

    .az-template-crumbs a:hover {
        text-decoration-color: currentColor;
    }

    /* Tieu de khoi co lien ket (ten muc SiteIntro dan sang trang rieng) */
    .az-template-title a {
        color: inherit;
        text-decoration: none;
        transition: color .3s var(--az-template-ease);
    }

    .az-template-title a:hover {
        color: var(--az-template-terracotta);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 6px;
    }

    /* ---------- Thuc don: khung anh la lien ket phong to; trang chi tiet; nhom khac ---------- */
    a.az-template-menupage-frame {
        display: block;
        cursor: zoom-in;
    }

    .az-template-menupage--more {
        margin-top: 24px;
    }

    /* Tieu de dai (trang chi tiet thuc don) - nho hon tieu de trang chung */
    .az-template-pagehero-title--sm {
        font-size: clamp(2rem, 4.4vw, 3.2rem);
        line-height: 1.12;
    }

    .az-template-stepnav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px 20px;
        margin-top: 32px;
    }

    .az-template-stepnav-count {
        font-size: 12px;
        letter-spacing: .2em;
        color: rgb(var(--az-template-ink-rgb) / .65);
    }

    .az-template-stepnav .az-template-icon {
        font-size: 14px;
    }

    /* ---------- Anh don (Service): anh bam de phong to, nhieu anh, mo ta, anh khac ---------- */
    a.az-template-single-zoom {
        display: block;
        border-radius: var(--az-template-radius);
        cursor: zoom-in;
    }

    .az-template-single-figure + .az-template-single-figure {
        margin-top: 24px;
    }

    .az-template-single-text {
        max-width: 768px;
        margin: 32px auto 0;
    }

    .az-template-single .az-template-empty {
        padding-block: 48px;
    }

    .az-template-single .az-template-more {
        margin-top: 72px;
    }

    .az-template-more > .az-template-eyebrow {
        margin-bottom: 32px;
    }

    .az-template-more .az-template-actions {
        margin-top: 40px;
    }

    /* The anh dan sang trang khac (khong mo lightbox) */
    .az-template-gallery-item--link {
        cursor: pointer;
    }

    /* ---------- Ve Nhat Co: muc khong co anh -> mot cot; trang mot muc ---------- */
    @media (min-width: 768px) {
        .az-template-chapter--text {
            grid-template-columns: minmax(0, 1fr);
            max-width: 768px;
            margin-inline: auto;
        }
    }

    .az-template-chapters--one {
        padding-top: 56px;
    }

    /* ---------- Lien he: vung thong bao form dat cho (nen olive: chu kem 6:1, loi 4,6:1 - cung quy tac chan trang).
       Giu phan tu trong cay truy cap (khong display none) de trinh doc man hinh doc duoc khi co chu. ---------- */
    .az-template-form .az-template-quickform-msg {
        min-height: 0;
    }

    /* ======================================================================
       26. M4 - Blog: chia se (nut sao chep / ung dung), phan trang rut gon, khoi hanh dong
       ====================================================================== */

    /* Nut chia se dang <button>: cung dang voi lien ket; thuoc tinh hidden phai thang display cua lop */
    button.az-template-share-link {
        cursor: pointer;
    }

    .az-template-share-link[hidden] {
        display: none;
    }

    /* Bai khong co the: tach hang chia se khoi than bai bang vach nhu khoi the */
    .az-template-share--top {
        margin-top: 32px;
        padding-top: 32px;
        border-top: 1px solid rgb(var(--az-template-ink-rgb) / .08);
    }

    /* Vung thong bao (role=status) - giu trong cay truy cap, khong an bang display */
    .az-template-share-msg {
        font-size: 12px;
        line-height: 1.5;
        color: var(--az-template-olive);
    }

    /* Phan trang nhieu trang: dau ba cham giua cac so */
    .az-template-pager-gap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 40px;
        font-size: 13px;
        color: rgb(var(--az-template-ink-rgb) / .55);
    }

    .az-template-blog-actions {
        margin-top: 48px;
    }

    .az-template-empty + .az-template-blog-actions {
        margin-top: 0;
    }

    /* Tieu de bai viet rat dai (du lieu cu viet HOA toan bo): nho lai tren dien thoai, khong tran ngang */
    .az-template-articlehero-title {
        overflow-wrap: break-word;
    }

    @media (max-width: 639px) {
        .az-template-articlehero-title {
            font-size: clamp(1.5rem, 6.4vw, 1.8rem);
        }
    }

    /* Anh bia nhieu chi tiet: them lop toi o mep tren de nut "Blog" + nhan chuyen muc luon doc duoc */
    .az-template-articlehero-media::after {
        background: linear-gradient(to top, var(--az-template-green-dark), rgb(var(--az-template-green-dark-rgb) / .4) 50%, transparent 78%, rgb(var(--az-template-green-dark-rgb) / .55));
    }

    /* Nhan chuyen muc tren anh bia la lien ket toi trang chuyen muc: vung bam >= 24px (WCAG 2.5.8) */
    a.az-template-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        transition: background-color .2s var(--az-template-ease);
    }

    a.az-template-badge:hover {
        background: var(--az-template-white);
    }
}