* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* File: assets/css/global.css */

@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Parisienne&family=Paytone+One&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Rochester&family=Sigmar+One&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* --- 1. MÀU SẮC (COLORS) --- */
    --id4-container-color-xam: #f5f5f7;
    --id4-button-color: #2e3192;
    --id4-bordrer-color: #2e3192;
    /* --- 2. FONT CHỮ (TYPOGRAPHY) --- */
    /* Thin 100 - ExtraLight 200 - Light 300 - Regular 400 -
       Medium 500 - SemiBold 600 - Bold 700 - ExtraBold 800 - Black 900 */
    --id4-font-main: 'Open Sans';
    --id4-font-weight-big-bold: 900;
    --id4-font-weight-small-bold: 700;
    --id4-font-weight-title: 600;
    --id4-font-weight-desript: 400;
    /* Lưu ý: Font cần được load trong Flatsome hoặc Google Fonts trước */
    /* Font size co giãn: ~24px → 32px */
    --id4-font-size-title: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
    /* Font size co giãn: ~15px → 16px */
    --id4-font-size-desription: clamp(0.9375rem, 0.25vw + 0.9rem, 1rem);
    /* ---
        3. KÍCH THƯỚC & KHOẢNG CÁCH (DIMENSIONS & SPACING)
        -
    --- */
    /* Container: 1100px nhưng tự co theo màn hình (chừa padding 2rem) */
    --id4-container-width: min(68.75rem, calc(100% - 2rem));
    /* Header height co giãn: ~60px → 80px */
    --id4-header-height: clamp(3.75rem, 5vw, 5rem);
    /* Spacing block co giãn: ~24px → 40px */
    --id4-spacing-block: clamp(1.5rem, 3vw, 2.5rem);
    /* Spacing sm: 8px */
    --id4-spacing-sm: 0.5rem;
    /* Spacing md: 16px */
    --id4-spacing-md: 1rem;
    /* Spacing lg: 32px */
    --id4-spacing-lg: 2rem;
    /* --- 4. MÀU SẮC CHỮ --- */
    --id4-color-text-title: #2e3192;
    --id4-color-text-desription: #000000;
    /* --- 4. BORDER & RADIUS --- */
    /* Radius card: 28px */
    --id4-border-radius-card: 1.75rem;
    /* Radius card small: 16px */
    --id4-border-radius-card-small: 1rem;
    /* --- 5. Khoảng cách --- */
    /* Text indent: 25px */
    --id4-text-indent: 1.5625rem;
    /* ---
        6. thêm kích thước cho thẻ trỏ xuống
    --- */
    /* Arrow width co giãn: ~32px → 40px */
    --arrow-width: clamp(2rem, 4vw, 2.5rem);
    /* Arrow height co giãn: ~28px → 35px */
    --arrow-height: clamp(1.75rem, 3.5vw, 2.1875rem);
    /* Arrow border: 3px */
    --arrow-border-width: 0.1875rem;
    /* ---
        7. KÍCH THƯỚC & KHOẢNG CÁCH (DIMENSIONS & SPACING)
        -
    --- */
    /* Button padding height: 10px */
    --id4-padding-height-button: 0.625rem;
    /* Button padding width: 40px */
    --id4-padding-width-button: 2.5rem;
}


/* --- MAIN WRAPPER --- */

.id4-cg-wrapper {
    font-family: var(--id4-font-main);
    background-color: #fff;
    color: var(--id4-color-text-desription);
    width: 100%;
    /* min-height: 100vh; */
    padding: var(--id4-header-height) 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* --- TYPOGRAPHY & TITLES --- */

.id4-cg-section-title {
    font-family: var(--id4-font-main);
    color: var(--id4-color-text-title);
    font-weight: var(--id4-font-weight-small-bold);
    font-size: var(--id4-font-size-title);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
    margin-top: var(--id4-spacing-block);
}

.id4-cg-section-title:first-child {
    margin-top: 0;
}


/* --- TABLE STRUCTURE USING FLEXBOX --- */

.id4-cg-table-container {
    width: 100%;
    max-width: var(--id4-container-width);
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}


/* Hàng tiêu đề của bảng */

.id4-cg-table-header {
    display: flex;
    background-color: var(--id4-button-color);
    color: #ffffff;
    font-weight: var(--id4-font-weight-small-bold);
    font-size: var(--id4-color-text-desription);
    /* Đã bỏ padding top/bottom ở đây để border full chiều cao */
    text-transform: uppercase;
}


/* Các hàng dữ liệu */

.id4-cg-table-row {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s;
}

.id4-cg-table-row:last-child {
    border-bottom: none;
}

.id4-cg-table-row:nth-child(even) {
    background-color: #f3f6fa;
}

.id4-cg-table-row:hover {
    background-color: #eef2ff;
}


/* Cột dữ liệu chung */

.id4-cg-col {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 0.95rem; */
    padding: 0 5px;
}


/* --- CSS MỚI CẬP NHẬT: Style riêng cho cột trong Header --- */


/* Thêm đường kẻ dọc màu trắng mờ giữa các cột tiêu đề */

.id4-cg-table-header .id4-cg-col {
    padding: clamp(0.75rem, 1vw, 0.9375rem) !important;
    border-right: 0.125rem solid rgba(255, 255, 255, 0.4);
}


/* Bỏ đường kẻ dọc ở cột cuối cùng */

.id4-cg-table-header .id4-cg-col:last-child {
    border-right: none;
}


/* Cột đầu tiên (Đơn vị) đậm hơn */

.id4-cg-col:first-child {
    font-weight: 600;
}


/* Cột cuối cùng (Tổng chi phí) đậm hơn */

.id4-cg-col:last-child {
    font-weight: 700;
}


/* Màu chữ riêng cho cột tổng chi phí ở phần body (không phải header) */

.id4-cg-table-row .id4-cg-col:last-child {
    color: var(--id4-color-text-title);
}


/* --- BUTTON STYLES --- */

.id4-cg-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: var(--id4-spacing-sm);
}

.id4-cg-btn {
    display: inline-block;
    font-family: var(--id4-font-main);
    background-color: var(--id4-button-color);
    padding: var(--id4-padding-height-button) var(--id4-padding-width-button);
    font-weight: var(--id4-font-weight-small-bold);
    font-size: var(--id4-font-size-desription);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.2s;
    /* box-shadow: 0 4px 6px var(--id4-button-color); */
}

.id4-cg-btn:hover {
    background-color: var(--id4-button-color);
    color: #ffffff;
    transform: translateY(-2px);
}


/* --- FOOTER NOTE --- */

.id4-cg-footer-note {
    max-width: 900px;
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    margin-top: 20px;
    line-height: 1.5;
    padding: 0 20px;
}

.id4-cg-footer-title {
    color: #2e3b8f;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
    display: block;
}


/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 768px) {
    .id4-cg-wrapper {
        padding: 80px 20px;
    }

    .id4-cg-section-title {
        font-size: 1.1rem;
    }

    .id4-cg-col {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .id4-cg-table-header {
        font-size: 0.75rem;
    }

    .id4-cg-col {
        font-size: 0.8rem;
        padding: 0 2px;
    }

    /* Table header padding chỉnh lại chút cho mobile */
    .id4-cg-table-header .id4-cg-col {
        padding: 12px 2px;
    }

    .id4-cg-table-container {
        overflow-x: auto;
        display: block;
    }

    .id4-cg-table-header,
    .id4-cg-table-row {
        min-width: 400px;
        display: flex;
    }
}