/* Root variables: dùng để tái sử dụng màu, font và thay đổi theme dễ dàng */
:root{
  --bg:#fffaf7; /* nền chính */
  --text:#2b2b2b; /* màu chữ chính */
  --muted:#6b6b6b; /* màu chữ phụ */
  --accent:#6b4f3f; /* màu chủ đạo (coffee) */
  --accent-2:#d29b6a; /* màu phụ để gradient */
  --radius:8px; /* bo góc chuẩn */
  --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; /* font stack an toàn */
}

/* Tối ưu box model */
*{box-sizing:border-box}
html,body{height:100%}

/* Body: font, màu chữ, nền và bố cục cơ bản */
body{font-family:var(--ff-sans);color:var(--text);background:var(--bg);font-size:16px;line-height:1.5}

/* Skip link: ẩn theo mặc định nhưng hiện khi focus (hữu ích cho keyboard navigation) */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:0;top:0;background:#fff;padding:0.5rem;z-index:1000;border:2px solid var(--accent)}

/* Container: giới hạn chiều ngang và căn giữa nội dung */
.container{max-width:1000px;margin:0 auto;padding:1rem}

/* Header: gradient background và màu chữ trắng */
.site-header{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.logo{width:44px;height:44px;margin-right:0.5rem}

/* Navigation: kiểu ngang, các liên kết có vùng nhấn rõ ràng */
.nav{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem}
.nav a{color:inherit;text-decoration:none;padding:0.5rem;border-radius:4px}
.nav a:focus,.nav a:hover{background:rgba(255,255,255,0.12);outline:2px solid rgba(255,255,255,0.18)}

/* Focus improvements: làm outline cách phần tử để dễ quan sát */
*:focus{outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Hero và button */
.hero{text-align:center;padding:2rem 0}
.btn{display:inline-block;background:var(--text);color:#fff;padding:0.5rem 1rem;border-radius:20px;text-decoration:none}

/* Grid helpers: tái sử dụng cho nhiều phần */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Figure và ảnh: responsive, bo góc */
figure{margin:1rem 0}
.gallery-grid img, .grid img, .hero-figure img{width:100%;height:auto;border-radius:var(--radius)}

/* Card-style cho features */
.features article{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}

/* Footer */
.site-footer{background:#f3efe9;padding:1rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Form styles: input full-width, khoảng cách hợp lý */
.contact-form{display:grid;gap:1rem}
.contact-form label{display:block;margin-bottom:0.25rem}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=password],.contact-form textarea,.contact-form select{width:100%;padding:0.5rem;border:1px solid #ddd;border-radius:6px}

.form-actions{display:flex;gap:0.5rem}
button{background:var(--accent);color:#fff;border:none;padding:0.5rem 1rem;border-radius:6px}
button:focus{outline:3px solid rgba(107,79,63,0.25)}

/* Tùy chỉnh gallery*/

/* Thiết lập các thẻ figure trong gallery */
.gallery-grid figure {
    /* Đảm bảo khung ảnh có chiều rộng đầy đủ trong cột lưới */
    width: 100%; 
    /* Thường thì cần chiều cao tự động, nhưng để cân bằng, ta dùng trick padding */
    position: relative;
    padding-bottom: 75%; /* Thiết lập tỷ lệ 4:3 (75% của width). Dùng 100% cho hình vuông. */
    height: 0;
    overflow: hidden; /* Che đi phần ảnh bị tràn */
}

/* Áp dụng cho ảnh bên trong thẻ figure */
.gallery-grid figure img {
    /* Đặt ảnh tuyệt đối trong figure */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* key point: làm sao để ảnh lấp đầy khung mà không bị méo */
    object-fit: cover; 
    /* Giúp ảnh lấp đầy toàn bộ khung hình mà vẫn giữ nguyên tỷ lệ, phần thừa sẽ bị cắt đi. */
}

/* Tùy chỉnh chú thích */
.gallery-grid figcaption {
    /* Đặt figcaption bên ngoài khung ảnh nếu cần, hoặc ở cuối khung */
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Thêm màu nền hoặc hiệu ứng để dễ nhìn */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    text-align: center;
}
/* Kết thúc phần tùy chỉnh gallery */

/* Responsive nhỏ: chuyển grid 3 cột thành 1 cột */
@media (max-width:768px){
  .grid-3{grid-template-columns:1fr}
  .header-inner{flex-direction:column;gap:0.5rem;align-items:flex-start}
  .nav{flex-wrap:wrap}
}