/* define root colors */
:root {
    --qlm-color-red: #DC2D32;
    --qlm-color-pink: #c200eb;
    --qlm-color-grey: #9B9B9B;
    --qlm-color-medium-grey: #4B4B60;
    --qlm-color-light-grey: #B2B2B9;
    --qlm-color-dark-grey: #1D1D1F;
    --qlm-color-off-grey: #F5F5F7;
    --qlm-color-light-grey-hover: #dbdade57;
    --qlm-color-light-grey-bold-hover: #DBDADE;
    --qlm-letter-spacing-normal: -0.025em;
    --qlm-letter-spacing-header: -0.0275em;

    --design-width: 1920;
    --unit: calc(100vw / var(--design-width));

    /* Các container size lấy từ thiết kế (Figma) */
    --width-hero: 1655;   /* hero section */
    --width-content: 1200; /* phần nội dung thông thường */
    --width-wide: 1440;    /* section rộng vừa */
    /* ... thêm bao nhiêu tuỳ ý */

    /* Tạo biến max-width hoàn chỉnh, dùng chung */
    --container-hero: clamp(calc(var(--width-content) * 1px), calc(var(--width-hero) * var(--unit)), calc(var(--width-hero) * 1px));
    --container-content: clamp(100%, calc(var(--width-content) * var(--unit)), calc(var(--width-content) * 1px));
    --container-wide: clamp(100%, calc(var(--width-wide) * var(--unit)), calc(var(--width-wide) * 1px));

}

/* mobile root */
@media (max-width: 767px) 
{
    :root 
    {
        /* Mobile unit: scale theo chuẩn 375px, clamp chặn giá trị cực đoan */
        /*
         * Cơ chế:
         Nếu màn hình = 375px → 375 / 375 = 1 (Giao diện chuẩn 100%).
         Nếu màn hình = 750px (Tablet dọc) → 750 / 375 = 2 (Giao diện phóng to gấp đôi).
         Nếu màn hình = 300px (Máy cũ nhỏ) → 300 / 375 = 0.8 (Giao diện thu nhỏ).
         * */
--mobile-unit: calc(100vw / 375);
  }
}

.qlm-color-red {
    color: var(--qlm-color-red);
}

/* default header */

h2 {
    color: var(--qlm-color-red);
    font-weight: normal;
    font-size: 33px;
    letter-spacing: -2px;
}

/* override flatsome */

#content .banner {
    min-height: 30px;
    position: relative;
    width: 100%;
}

.bg_red {
  background-color: var(--qlm-color-red);
}

.color-white {
  color: white;
}

.header-title {
    font-size: 33px;
    letter-spacing: -2px;
    font-family: 'SVN-HelveticaNowDisplay-Medium';
  }
