/* ==========================================================================
   FILE: public/css/style.css
   MÔ TẢ: Chứa các thiết lập CSS dùng chung (Global) cho toàn bộ dự án.
   KHÔNG chứa các CSS đặc thù của từng Section.
   ========================================================================== */

/* --- 1. BIẾN DÙNG CHUNG (VARIABLES) --- */
:root {
    --primary-color: #d89f3c;
    /* Vàng đồng đặc trưng Küchen */
    --text-main: #333333;
    /* Màu chữ tối chính */
    --text-white: #ffffff;
    /* Màu chữ trắng */
    --bg-black: #ffffff;
    /* Nền đen chủ đạo của Body */
    --bg-section: #ffffff;
    /* Nền trắng của các Section nội dung */
    --max-width: 1300px;
    /* Chiều rộng chuẩn cho nội dung */
}

/* --- 2. KHAI BÁO FONT CHỮ (LOCAL FONTS - NUNITO) --- */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../fonts/Nunito-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* --- 3. RESET CƠ BẢN & CÀI ĐẶT CHUNG --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-black);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    /* Tránh vỡ khung theo chiều ngang */
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- 4. TIỆN ÍCH HIỂN THỊ (RESPONSIVE UTILITIES) --- */
/* Class điều khiển ẩn hiện giữa PC và Mobile */
.show-pc {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .show-pc {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

/* --- 5. BỐ CỤC CHUNG (LAYOUT) --- */

/* Class dùng để bọc nội dung các section (Sec 2 -> 6) để gom về 1300px */
.container-custom {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

/* Định dạng các section có nền trắng và khoảng cách nhẹ giữa chúng */
.section-white-wrap {
    background-color: var(--bg-section);
    width: 100%;
    padding: 1px 0;
    /* Tránh lỗi margin collapse */
}

/* Áp dụng 1300px và căn giữa cho các khối ảnh bên trong section */
.section-content-centered {
    max-width: var(--max-width);
    margin: 10px auto;
    /* Khoảng cách 10px giúp các sec không bị dính sát nhau quá mức */
}

/* --- 6. CÁC THÀNH PHẦN DÙNG CHUNG (SHARED COMPONENTS) --- */

/* Nút bấm mặc định (nếu cần dùng ở nơi khác ngoài Sec 1) */
.btn-cta-base {
    display: inline-block;
    background-color: var(--primary-color);
    color: #000;
    text-transform: uppercase;
    font-weight: 800;
    padding: 12px 35px;
    border-radius: 8px;
    text-align: center;
}

.btn-cta-base:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}