/*
📁 src/shared/styles/1-reset/reset.css
*/

/**
 * =============================================================================
 * RESET.CSS – Professional CSS Reset for Custom WordPress Themes
 * =============================================================================
 * File Path: assets/css/2-reset/2-reset.css
 *
 * 🎯 Mục đích:
 * - Xóa toàn bộ style mặc định của trình duyệt (user agent stylesheet).
 * - Trả về trạng thái "sạch" (barebone) cho tất cả thẻ HTML.
 * - Đảm bảo bạn có thể xây dựng giao diện hoàn toàn từ đầu, kiểm soát 100%.
 *
 * 📌 Lưu ý:
 * - Một số `display` mặc định được khôi phục lại thủ công (như `block`, `inline`).
 * - File này chỉ nên dùng nếu bạn muốn **tự định nghĩa toàn bộ UI**.
 * - Dùng song song với file `base.css` để định nghĩa lại style cơ bản (font, màu...).
 *
 * ✅ Dùng tốt cho:
 * - Custom WordPress Themes
 * - Design System mới
 * - Headless / Barebone layout
 * =============================================================================
 */

/* ============================================================================
 * [01] RESET TOÀN BỘ
 * - Xoá toàn bộ style kế thừa từ user agent stylesheet.
 * - Giữ lại display mặc định cho các thẻ cần thiết.
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*tạm không dùng unset ? ==> phát sinh nhiều lỗi khồng kiểm soát đc */
/* *,
*::before,
*::after {
  all: unset;
  box-sizing: border-box;
} */


/* ============================================================================
   * 
   * 
   * ========================================================================== */

/* ============================================================================
 * [02] KHÔI PHỤC LẠI DISPLAY CHO THẺ BLOCK CƠ BẢN
 * ---------------------------------------------------------------------------
 * - Vì unset sẽ gỡ luôn display nên cần set lại cho HTML hoạt động đúng.
 * ============================================================================ */
html,
body,
div,
section,
main,
header,
footer,
article,
aside,
nav {
  display: block;
}


/* ============================================================================
 * [03] THẺ INLINE CƠ BẢN
 * ---------------------------------------------------------------------------
 * - Cho phép inline element giữ nguyên dòng
 * ============================================================================ */
span,
a,
b,
strong,
i,
em {
  display: inline;
}

/* ============================================================================
 * [04] DANH SÁCH UL / OL / LI
 * ---------------------------------------------------------------------------
 * - 
 * ============================================================================ */
ul,
ol {
  display: block;
  list-style: none; /* Xóa chấm đầu dòng */
}

ul {
  margin: var(--margin-ul);
  padding: var(--padding-ul);
}

ol {
  margin: var(--margin-0l);
  padding: var(--padding-0l);
}


li {
  display: list-item; /* Quan trọng: cần cho ul/ol hoạt động */
}


/* ============================================================================
 * [05] THẺ FORM – Reset cơ bản & chuẩn hóa
 * ---------------------------------------------------------------------------
 * - 
 * ============================================================================ */
/* [5.1] Reset chung cho toàn bộ form element */
input,
button,
select,
textarea,
label,
fieldset,
legend,
optgroup,
option {
  display: inline-block;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* [5.2] Padding & Margin cơ bản – áp dụng cho các field nhập liệu */
input,
select,
textarea,
label,
fieldset,
legend,
optgroup,
option {
  margin: var(--margin-form-fields);
  padding: var(--padding-form-fiels);
}

/* [5.3] Button chuẩn: Có thể là <button> hoặc <input type="submit|button|reset"> */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
  border-radius: var(--radius-form-btn);
  margin: var(--margin-form-btn);
  padding: var(--padding-form-btn);
}

/* [4] ⚠️ Radio & Checkbox giữ mặc định (chờ nâng cấp sau nếu custom UI) */
input[type="radio"],
input[type="checkbox"] {
  all: revert;
}

/* ============================================================================
 * [06] H1 – H6
 * ---------------------------------------------------------------------------
 * - ❓ có nên dưa vào trong 4-typography hay không nhé. 
 * ============================================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  margin: var(--margin-h);
  padding: var(--padding-h);
}

/* ============================================================================
 * [07] P – THẺ ĐOẠN VĂN
 * ---------------------------------------------------------------------------
 * - ❓ có nên dưa vào trong 4-typography hay không nhé. 
 * ============================================================================ */
p {
  display: block;
  margin: var(--margin-h);
  padding: var(--padding-h);
  font-size: inherit;
  font-weight: inherit;
}

/* ============================================================================
 * [08] IMG – ẢNH - Video - Canvas
 * ---------------------------------------------------------------------------
 * -
 * ============================================================================ */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: clip!important; /* ✅ tránh lỗi tràn vùng hiển thị */
}

/* ============================================================================
 * [09] TABLE
 * ---------------------------------------------------------------------------
 * -
 * ============================================================================ */
table {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ============================================================================
 * [10] THẺ SPECIAL
 * ---------------------------------------------------------------------------
 * -
 * ============================================================================ */
hr {
  display: block;
  border: none;
  border-top: 1px solid #ccc;
  margin: 0;
}

pre,
code {
  display: block;
  font-family: monospace;
  font-size: 1em;
}

/* ============================================================================
 * [11] BASE HTML & BODY
 * ---------------------------------------------------------------------------
 * - ❓ có nên dưa vào trong 2-base.css hay không nhé. 
 * ============================================================================ */
html {
  scroll-behavior: smooth;
  /* font-size: 1.25rem;
  line-height: 1.5; */
}

body {
  min-width: 320px!important;
  font-family: sans-serif;
  font-size: inherit;
  line-height: inherit;
  
  color: inherit;
  background-color: #FFF;
}

/* @media screen and (max-width: 319px)
{
  body {
    display: none!important;
  }
} */

/* Giữ chỗ cho thanh cuộn trên mọi trang (hỗ trợ tốt) */
/* html { scrollbar-gutter: stable both-edges; } */
/* Nếu cần fallback cũ: */
body { overflow-y: scroll; }