/* ===================================================== */
/* RESET.CSS                                             */
/* Reset và base style dùng chung cho toàn bộ website.   */
/* File này giúp trình duyệt hiển thị nhất quán hơn.     */
/* ===================================================== */


/* ===================================================== */
/* BOX SIZING                                            */
/* Tính cả padding và border vào width/height của element. */
/* Giúp layout dễ kiểm soát hơn, tránh bị tràn kích thước. */
/* ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ===================================================== */
/* HTML                                                  */
/* Thiết lập nền tảng cho toàn trang.                    */
/* ===================================================== */

html {
  min-width: 320px;
  scroll-behavior: smooth;
}


/* ===================================================== */
/* BODY                                                  */
/* Style mặc định cho toàn bộ website.                   */
/* Gồm màu chữ, nền, font chữ và độ mượt khi render text. */
/* ===================================================== */

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(184, 132, 69, 0.08),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #f9f2e8 0%,
      var(--color-paper) 45%,
      #f8f0e6 100%
    );
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


/* ===================================================== */
/* LOCK PAGE SCROLL                                      */
/* Khi mở mobile menu, cart hoặc lightbox thì khóa cuộn. */
/* JavaScript sẽ thêm các class này vào body.            */
/* ===================================================== */

body.menu-open,
body.cart-open,
body.lightbox-open {
  overflow: hidden;
}


/* ===================================================== */
/* FORM ELEMENTS                                         */
/* Cho input, select, textarea và button kế thừa font body. */
/* ===================================================== */

button,
input,
select,
textarea {
  font: inherit;
}


/* ===================================================== */
/* BUTTON RESET                                          */
/* Reset style mặc định của button trình duyệt.          */
/* Style thật của button nằm trong buttons.css.          */
/* ===================================================== */

button {
  border: 0;
  cursor: pointer;
}


/* ===================================================== */
/* MEDIA RESET                                           */
/* Ảnh và SVG tự co theo container, tránh tràn layout.   */
/* ===================================================== */

img,
svg {
  display: block;
  max-width: 100%;
}


/* ===================================================== */
/* LINK RESET                                            */
/* Link kế thừa màu chữ hiện tại và bỏ gạch chân mặc định. */
/* ===================================================== */

a {
  color: inherit;
  text-decoration: none;
}


/* ===================================================== */
/* LIST RESET                                            */
/* Bỏ margin, padding và bullet mặc định của list.       */
/* ===================================================== */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ===================================================== */
/* TEXT RESET                                            */
/* Bỏ margin mặc định của paragraph và heading.          */
/* ===================================================== */

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}


/* ===================================================== */
/* TEXT SELECTION                                        */
/* Màu khi người dùng bôi đen text.                      */
/* ===================================================== */

::selection {
  color: var(--color-white);
  background: var(--color-terracotta);
}


/* ===================================================== */
/* ACCESSIBILITY FOCUS                                   */
/* Viền focus khi dùng bàn phím Tab.                     */
/* Giúp website dễ dùng hơn cho accessibility.           */
/* ===================================================== */

:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 4px;
}