/*
Theme Name: Rèm cửa Gò Vấp - Rèm Thiên Kim New
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* ========================================================= */
/* THIẾT LẬP CHUNG - ÁP DỤNG MẶC ĐỊNH CHO MÀN HÌNH RỘNG (>= 1920px) */
/* ========================================================= */

/* ========================================================= */
/* THIẾT LẬP CHUNG VÀ MẶC ĐỊNH CHO KÍCH THƯỚC BAN ĐẦU 1920PX */
/* (Áp dụng cho mọi màn hình trừ khi có Media Query ghi đè) */
/* ========================================================= */

html {
    box-sizing: border-box;
    /* Đảm bảo scrollbar luôn có sẵn để tránh nhảy nội dung khi cuộn */
    overflow-y: scroll;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0; /* Loại bỏ margin mặc định của body */
    font-family: Arial, sans-serif; /* Font chữ mong muốn */
    line-height: 1.6; /* Khoảng cách dòng chữ */
    color: #333; /* Màu chữ mặc định */
    background-color: #f4f4f4; /* Màu nền trang */
    font-size: 16px; /* Kích thước font cơ bản mặc định cho màn hình lớn */
}

/* Đảm bảo hình ảnh luôn nằm trong khung của nó và không bị tràn */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* CONTAINER CHÍNH CỦA WEBSITE */
/* Đây là nơi bạn đặt chiều rộng mặc định 1920px */
.container, .main-website-wrapper {
    width: 1920px; /* Mặc định website sẽ cố gắng có chiều rộng 1920px */
    margin: 0 auto; /* Căn giữa container trên màn hình rộng */
    /* background-color: #ffffff; */ /* Có thể thêm màu nền cho toàn bộ khu vực website */
    /* box-shadow: 0 0 20px rgba(0,0,0,0.05); */ /* Thêm bóng nhẹ nếu muốn */

    /* Thêm padding cho nội dung bên trong, để nội dung không bị dính sát cạnh */
    padding: 0 40px; /* Padding hai bên cho màn hình lớn */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng tổng chiều rộng */
}

/* Kích thước font mặc định cho các tiêu đề và đoạn văn trên màn hình lớn (1920px) */
h1 { font-size: 3.5em; }
h2 { font-size: 2.8em; }
h3 { font-size: 2.2em; }
p { font-size: 1.1em; }

/* Ví dụ về cách làm cho các phần tử xếp cạnh nhau (nhiều cột) */
.section-with-columns {
    display: flex;
    flex-wrap: wrap; /* Cho phép các cột xuống hàng */
    gap: 30px; /* Khoảng cách giữa các cột */
    justify-content: center; /* Căn giữa các cột */
    margin-top: 50px;
    margin-bottom: 50px;
}

.column-item {
    flex: 1 1 calc(33.333% - 30px); /* 3 cột trên màn hình 1920px */
    max-width: calc(33.333% - 30px); /* Giới hạn thêm chiều rộng tối đa */
    min-width: 300px; /* Kích thước tối thiểu để tránh cột quá hẹp */
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    text-align: left;
}

/* ========================================================= */
/* MEDIA QUERIES - ĐIỀU CHỈNH KHI MÀN HÌNH NHỎ HƠN 1920px */
/* (Đây là nơi Responsive "ghi đè" chiều rộng cố định) */
/* ========================================================= */

/* Áp dụng khi màn hình nhỏ hơn hoặc bằng 1920px */
@media (max-width: 1920px) {
    /* Đặt viewport meta tag trong HTML để đảm bảo responsive hoạt động */
    /* <meta name="viewport" content="width=device-width, initial-scale=1.0"> */

    .container, .main-website-wrapper {
        width: 100%; /* Lúc này, container sẽ chiếm 100% chiều rộng của viewport */
        max-width: 100%; /* Đảm bảo không bị giới hạn cứng nữa */
        padding: 0 20px; /* Điều chỉnh padding cho màn hình nhỏ hơn */
        /* Loại bỏ background-color hoặc shadow nếu bạn muốn nó tràn ra sát cạnh màn hình */
        /* background-color: unset; */
        /* box-shadow: unset; */
    }

    /* Có thể điều chỉnh font-size tổng thể cho màn hình nhỏ hơn */
    body {
        font-size: 15px; /* Giảm font cơ bản cho màn hình dưới 1920px */
    }

    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.75em; }
    p { font-size: 1em; }

    /* Điều chỉnh các cột cho màn hình nhỏ hơn */
    .section-with-columns {
        gap: 20px;
    }
    .column-item {
        flex: 1 1 calc(33.333% - 20px); /* Vẫn 3 cột, nhưng tính toán lại với gap mới */
        max-width: unset; /* Bỏ max-width cố định để flex tự tính */
    }
}

/* Màn hình Laptop nhỏ / Tablet lớn (ví dụ: dưới 1440px) */
@media (max-width: 1439px) {
    .container, .main-website-wrapper {
        padding: 0 15px;
    }
    body {
        font-size: 14px;
    }
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }
    p { font-size: 0.95em; }

    .section-with-columns {
        gap: 15px;
    }
    .column-item {
        flex: 1 1 calc(50% - 15px); /* 2 cột trên hàng */
    }
}

/* Màn hình điện thoại (ví dụ: dưới 768px) */
@media (max-width: 767px) {
    .container, .main-website-wrapper {
        padding: 0 10px;
    }
    body {
        font-size: 13px;
    }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.2em; }
    p { font-size: 0.85em; }

    .section-with-columns {
        flex-direction: column; /* Các cột xếp chồng lên nhau (1 cột) */
        align-items: center;
        gap: 15px;
    }
    .column-item {
        flex: 1 1 100%; /* Chiếm toàn bộ chiều rộng */
    }
}

/* ========================================================= */
/* TÙY CHỈNH CHO MÀN HÌNH RẤT LỚN HƠN 1920px (Tùy chọn) */
/* ========================================================= */
@media (min-width: 1921px) {
    .container, .main-website-wrapper {
        /* Bạn có thể chọn giữ nguyên 1920px (như mặc định) hoặc mở rộng hơn */
        /* Ví dụ: mở rộng tối đa 80% màn hình, nhưng không quá 2500px */
        /* max-width: 2500px; */
        /* width: 80vw; */ /* Sử dụng viewport width */
        
        /* Hoặc giữ nguyên 1920px và chỉ điều chỉnh font */
        width: 1920px; /* Vẫn giữ 1920px */
        padding: 0 60px; /* Tăng padding nếu muốn không gian rộng hơn */
    }

    body {
        font-size: 17px; /* Tăng font cơ bản một chút nữa */
    }
    h1 { font-size: 4em; }
    h2 { font-size: 3.2em; }
    /* ... tiếp tục điều chỉnh các kích thước font khác */
}