.elementor-kit-7{--e-global-color-primary:#F5F1E8;--e-global-color-secondary:#D8C7A3;--e-global-color-text:#D6CEC1;--e-global-color-accent:#C9A96E;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   VỀ TRÀ — GLOBAL DESIGN SYSTEM
   Version: 2.1 — Global Typography + Header

   DÙNG CHUNG TOÀN WEBSITE

   FONT + MÀU:
   Elementor → Cài đặt trang web
   → Phông chữ toàn trang
   → Màu toàn trang

   KÍCH THƯỚC CHỮ / SPACING / COMPONENT:
   Quản lý tại file CSS này.

   CSS BỐ CỤC RIÊNG TỪNG TRANG:
   Không đặt tại đây.
========================================================= */


/* =========================================================
   01 — GLOBAL TOKENS
========================================================= */

:root {

    /* =====================================================
       COLORS
       Nguồn: Elementor → Global Colors
    ===================================================== */

    --vt-title:
        var(--e-global-color-primary, #F5F1E8);

    --vt-text:
        var(--e-global-color-text, #D6CEC1);

    --vt-secondary:
        var(--e-global-color-secondary, #D8C7A3);

    --vt-accent:
        var(--e-global-color-accent, #C9A96E);


/* =====================================================
   FONT FAMILY

   Nguồn quản lý:
   Elementor → Cài đặt trang web
   → Phông chữ toàn trang

   Heading:
   lấy từ Primary

   Body / Button / Label:
   lấy từ Text

   Nếu Elementor không trả được font,
   fallback về Cormorant Garamond.
===================================================== */

--vt-font-display:
    var(
        --e-global-typography-primary-font-family,
        "Cormorant Garamond"
    ),
    Georgia,
    "Times New Roman",
    serif;

--vt-font-body:
    var(
        --e-global-typography-text-font-family,
        "Cormorant Garamond"
    ),
    Georgia,
    "Times New Roman",
    serif;


    /* =====================================================
       TYPOGRAPHY SCALE — V2
       Nguồn kích thước chữ dùng chung toàn website.
       Đây là nơi sửa kích thước chữ toàn website.
    ===================================================== */

/* Hero / Display */
--vt-fs-display:
    clamp(64px, 7vw, 108px);

/* Page Title / H1 */
--vt-fs-h1:
    clamp(48px, 5vw, 72px);

/* Section Title / H2 */
--vt-fs-h2:
    clamp(36px, 3.8vw, 52px);

/* Card / Small Heading / H3 */
--vt-fs-h3:
    clamp(24px, 2.2vw, 30px);

/* Lead paragraph */
--vt-fs-lead:
    18px;

/* Nội dung chính */
--vt-fs-body:
    16px;

/* Nội dung nhỏ */
--vt-fs-small:
    13px;

/* Eyebrow / Label */
--vt-fs-label:
    11px;

/* Button */
--vt-fs-button:
    11px;

/* Header navigation */
--vt-fs-nav:
    15px;

/* Language switcher */
--vt-fs-lang:
    14px;


    /* =====================================================
       LINE HEIGHT
    ===================================================== */

    --vt-lh-display:
        .96;

    --vt-lh-heading:
        1.10;

    --vt-lh-h3:
        1.25;

    --vt-lh-lead:
        1.75;

    --vt-lh-body:
        1.85;


    /* =====================================================
       LAYOUT
    ===================================================== */

    --vt-container:
        1440px;

    --vt-side-space:
        56px;

    --vt-section-space:
        105px;


    /* =====================================================
       BORDER / SURFACE
    ===================================================== */

    --vt-border:
        rgba(245, 241, 232, .16);

    --vt-border-strong:
        rgba(245, 241, 232, .28);

    --vt-border-accent:
        rgba(201, 169, 110, .48);

    --vt-glass:
        rgba(8, 8, 6, .48);

    --vt-glass-strong:
        rgba(8, 8, 6, .68);
}



/* =========================================================
   02 — BASE
========================================================= */

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


.vt-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: var(--vt-section-space);
    padding-bottom: var(--vt-section-space);

    color: var(--vt-title);

    background: transparent !important;

    font-family: var(--vt-font-body);
}


.vt-section h1,
.vt-section h2,
.vt-section h3,
.vt-section p {
    margin: 0;
}


.vt-section img,
.vt-section video {
    display: block;

    max-width: 100%;
}



/* =========================================================
   03 — CONTAINER
========================================================= */

.vt-wrap {
    width: 100%;

    max-width: var(--vt-container);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--vt-side-space);
    padding-right: var(--vt-side-space);
}



/* =========================================================
   04 — TYPOGRAPHY
========================================================= */


/* Hero / Display */
.vt-display {
    font-family: var(--vt-font-display);

    font-size: var(--vt-fs-display);

    line-height: var(--vt-lh-display);

    font-weight: 400;

    color: var(--vt-title);
}


/* H1 */
.vt-h1 {
    font-family: var(--vt-font-display);

    font-size: var(--vt-fs-h1);

    line-height: var(--vt-lh-heading);

    font-weight: 400;

    color: var(--vt-title);
}


/* H2 / Section title */
.vt-title {
    font-family: var(--vt-font-display);

    font-size: var(--vt-fs-h2);

    line-height: var(--vt-lh-heading);

    font-weight: 400;

    color: var(--vt-title);
}


/* H3 */
.vt-h3 {
    font-family: var(--vt-font-display);

    font-size: var(--vt-fs-h3);

    line-height: var(--vt-lh-h3);

    font-weight: 400;

    color: var(--vt-title);
}


/* Lead */
.vt-lead {
    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-lead);

    line-height: var(--vt-lh-lead);

    font-weight: 400;

    color: var(--vt-text);
}


/* Body */
.vt-copy {
    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-body);

    line-height: var(--vt-lh-body);

    font-weight: 400;

    color: var(--vt-text);
}


/* Small */
.vt-small {
    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-small);

    line-height: 1.70;

    font-weight: 400;

    color: var(--vt-text);
}



/* =========================================================
   05 — EYEBROW
========================================================= */

.vt-eyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 17px;

    color: var(--vt-accent);

    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-label);

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.vt-eyebrow::before {
    content: "";

    width: 32px;
    height: 1px;

    flex: 0 0 auto;

    background: var(--vt-accent);
}



/* =========================================================
   06 — LABEL
========================================================= */

.vt-label {
    color: var(--vt-accent);

    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-label);

    font-weight: 500;

    line-height: 1.4;

    letter-spacing: .22em;

    text-transform: uppercase;
}



/* =========================================================
   07 — LINK
========================================================= */

.vt-link {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 5px;

    color: var(--vt-title);

    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-small);

    font-weight: 400;

    line-height: 1.4;

    text-decoration: none;

    border-bottom:
        1px solid var(--vt-border-accent);

    transition:
        color .25s ease,
        border-color .25s ease;
}


.vt-link::after {
    content: "→";

    color: var(--vt-accent);

    transition:
        transform .25s ease;
}


.vt-link:hover {
    color: var(--vt-accent);
}


.vt-link:hover::after {
    transform: translateX(5px);
}



/* =========================================================
   08 — BUTTON
========================================================= */

.vt-btn {
    min-height: 49px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0 26px;

    color: var(--vt-title);

    font-family: var(--vt-font-body);

    font-size: var(--vt-fs-button);

    font-weight: 500;

    line-height: 1;

    letter-spacing: .15em;

    text-transform: uppercase;

    text-decoration: none;

    border:
        1px solid var(--vt-border-strong);

    background:
        rgba(255, 255, 255, .04);

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.vt-btn:hover {
    color: #17130D;

    background: var(--vt-accent);

    border-color: var(--vt-accent);
}


.vt-btn-light {
    color: #17130D;

    background: var(--vt-title);

    border-color: var(--vt-title);
}



/* =========================================================
   09 — GLASS
========================================================= */

.vt-glass {
    background: var(--vt-glass);

    border:
        1px solid var(--vt-border);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}



/* =========================================================
   10 — COMMON HEADING ROW
========================================================= */

.vt-heading-row {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 43px;
}



/* =========================================================
   11 — DIVIDER
========================================================= */

.vt-divider {
    width: 100%;

    height: 1px;

    background:
        var(--vt-border);
}



/* =========================================================
   12 — PAGE BACKGROUND ENGINE

   KHÔNG thay URL ảnh tại Global CSS.

   URL từng trang được đặt trong:
   "01 — PAGE BACKGROUND"
========================================================= */

.vt-page-background {
    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(
                0,
                0,
                0,
                var(--vt-bg-overlay, .52)
            ),
            rgba(
                0,
                0,
                0,
                var(--vt-bg-overlay, .52)
            )
        ),
        var(--vt-page-bg);

    background-size:
        cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}





/* =========================================================
   HEADER TYPOGRAPHY — VI + EN

   Cách dùng trong Elementor:
   - Widget menu chính: CSS Class = vt-header-menu
   - Widget đổi ngôn ngữ: CSS Class = vt-header-language

   Font family lấy từ:
   Elementor → Site Settings → Global Fonts → Text
========================================================= */

/* Main navigation */
.vt-header-menu .elementor-nav-menu > li > a {
    font-family: var(--vt-font-body) !important;
    font-size: var(--vt-fs-nav) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Language switcher */
.vt-header-language .elementor-nav-menu > li > a {
    font-family: var(--vt-font-body) !important;
    font-size: var(--vt-fs-lang) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Main-menu dropdown */
.vt-header-menu .sub-menu a {
    font-family: var(--vt-font-body) !important;
    font-size: var(--vt-fs-nav) !important;
    font-weight: 400 !important;
}

/* Language dropdown */
.vt-header-language .sub-menu a {
    font-family: var(--vt-font-body) !important;
    font-size: var(--vt-fs-lang) !important;
    font-weight: 400 !important;
}

/* =========================================================
   13 — TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {

        --vt-side-space:
            32px;

        --vt-section-space:
            82px;
    }

}



/* =========================================================
   14 — MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {

        --vt-side-space:
            20px;

        --vt-section-space:
            70px;
    }


    .vt-heading-row {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .vt-page-background {
        background-image:
            linear-gradient(
                rgba(
                    0,
                    0,
                    0,
                    var(--vt-bg-overlay-mobile, .60)
                ),
                rgba(
                    0,
                    0,
                    0,
                    var(--vt-bg-overlay-mobile, .60)
                )
            ),
            var(
                --vt-page-bg-mobile,
                var(--vt-page-bg)
            );
    }

}

/* =========================================================
   MOBILE TYPOGRAPHY — V2
========================================================= */

@media (max-width: 767px) {

    :root {
        --vt-fs-display: 58px;
        --vt-fs-h1: 42px;
        --vt-fs-h2: 34px;
        --vt-fs-h3: 24px;

        --vt-fs-lead: 17px;
        --vt-fs-body: 16px;
        --vt-fs-small: 13px;
        --vt-fs-label: 11px;
        --vt-fs-button: 11px;

        --vt-fs-nav: 16px;
        --vt-fs-lang: 14px;
    }

}
/* =========================================================
   VỀ TRÀ — FIXED HEADER
   Header bám viewport, không chiếm chiều cao layout
========================================================= */

.elementor-location-header {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 9999;
}


/* Container thực chứa Logo + Menu + Language */

.vt-header-reveal {
    width: 100%;

    background: rgba(10, 10, 8, .88);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* =========================================================
   SINGLE PRODUCT — SHORT DESCRIPTION TYPOGRAPHY
   VI + EN
========================================================= */

.elementor-location-single
.elementor-widget-woocommerce-product-short-description,
.elementor-location-single
.elementor-widget-woocommerce-product-short-description *,
.elementor-location-single
.woocommerce-product-details__short-description,
.elementor-location-single
.woocommerce-product-details__short-description * {
    font-family: var(--vt-font-body) !important;
}

.elementor-location-single
.woocommerce-product-details__short-description {
    color: var(--vt-text) !important;

    font-size: var(--vt-fs-body) !important;
    font-weight: 400 !important;
    line-height: var(--vt-lh-body) !important;
}

.elementor-location-single
.woocommerce-product-details__short-description p {
    margin: 0 0 18px !important;

    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.elementor-location-single
.woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0 !important;
}
/* =========================================================
   VỀ TRÀ — CATALOG MODE
   Keep variations / hide purchase actions
========================================================= */


/* =========================================================
   SIMPLE PRODUCT
   Không cần form mua hàng
========================================================= */

.single-product
.product-type-simple
form.cart {
    display: none !important;
}


/* =========================================================
   VARIABLE PRODUCT
   GIỮ variation .elementor-kit-7
========================================================= */

.single-product
.product-type-variable
form.variations_form {
    display: block !important;

    margin-top: 24px;
}


/* Bảng chọn variation */

.single-product
.variations {
    width: 100%;

    margin: 0 !important;

    border: 0 !important;
}

.single-product
.variations tr {
    display: grid;

    grid-template-columns:
        150px
        minmax(0,1fr);

    align-items: center;

    gap: 20px;

    padding: 14px 0;

    border-top: 1px solid var(--vt-border);
}

.single-product
.variations th,
.single-product
.variations td {
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* ATTRIBUTE LABEL */

.single-product
.variations label {
    color: var(--vt-text);

    font-family: var(--vt-font-body);
    font-size: var(--vt-fs-body);
    font-weight: 400;
}


/* SELECT */

.single-product
.variations select {
    width: 100%;

    min-height: 46px;

    padding: 0 42px 0 15px;

    color: var(--vt-title);

    background:
        rgba(8,7,5,.58);

    border:
        1px solid
        var(--vt-border);

    border-radius: 0;

    font-family: var(--vt-font-body);
    font-size: var(--vt-fs-body);

    outline: none;
}

.single-product
.variations select:focus {
    border-color:
        var(--vt-border-accent);
}


/* RESET */

.single-product
.reset_variations {
    display: inline-block;

    margin-top: 10px;

    color: var(--vt-accent) !important;

    font-family: var(--vt-font-body);
    font-size: 13px;

    text-decoration: none;
}


/* =========================================================
   SELECTED VARIATION PRICE
========================================================= */

.single-product
.single_variation {
    margin-top: 18px;
}

.single-product
.woocommerce-variation-price
.price {
    color: var(--vt-accent) !important;

    font-family:
        var(--vt-font-display) !important;

    font-size: 26px !important;
    font-weight: 400 !important;

    line-height: 1.25;
}


/* =========================================================
   ẨN PHẦN MUA
   nhưng KHÔNG ẩn variation price
========================================================= */

.single-product
.woocommerce-variation-add-to-cart {
    display: none !important;
}


/* Nếu theme sinh quantity riêng */

.single-product
form.cart .quantity {
    display: none !important;
}


/* Nếu button lọt ra ngoài */

.single-product
.single_add_to_cart_button {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

    .single-product
    .variations tr {
        grid-template-columns: 1fr;

        gap: 8px;
    }

}

/* =====================================
   VỀ TRÀ — GLOBAL TYPOGRAPHY
   Áp dụng cho toàn bộ website VI / EN
===================================== */

:root {
    --vt-font-display: "Cormorant Garamond", Georgia, serif;
    --vt-font-body: "Inter", Arial, sans-serif;
}

/* Văn bản thông thường */
body,
p,
li,
blockquote,
input,
textarea,
select,
label {
    font-family: var(--vt-font-body);
}

/* Tiêu đề nghệ thuật */
h1, h2, h3,
.elementor-heading-title {
    font-family: var(--vt-font-display);
}

/* Nhãn nhỏ, nhãn vàng */
.vt-eyebrow,
.vt-kicker,
.vt-label {
    font-family: var(--vt-font-body) !important;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

/* Nút bấm */
button,
.vt-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button {
    font-family: var(--vt-font-body);
    font-size: 13px;
    letter-spacing: 0.08em;
}

/* Menu */
.elementor-nav-menu,
.elementor-nav-menu a {
    font-family: var(--vt-font-body);
    font-size: 14px;
}

/* Nội dung WooCommerce */
.woocommerce-product-details__short-description,
.woocommerce-product-attributes,
.woocommerce-tabs,
.woocommerce .price {
    font-family: var(--vt-font-body);
}

/* Mobile */
@media (max-width: 767px) {
    .vt-eyebrow,
    .vt-kicker,
    .vt-label {
        font-size: 12px;
    }
}/* End custom CSS */