/*
  Font chữ Inter được nạp qua thẻ <link> trong header.php (không dùng @import ở đây để tránh chặn render).
*/

/*
  Định nghĩa hệ màu sắc chủ đạo (Design Tokens) của dự án HVG Education dựa trên thiết kế Figma:
  - Màu chủ đạo thứ nhất (Primary): Xanh navy đậm (#013475) dùng cho tiêu đề, nút bấm chính, menu.
  - Màu chủ đạo thứ hai (Secondary): Xanh dương tươi sáng (#005ed6) dùng cho topbar và các điểm nhấn nổi bật.
  - Các màu bổ trợ như màu nền nhẹ (#fafafa), màu phân tách (#dddddd) và các biến thể font chữ.
*/
:root {
  /* Bảng màu dự án */
  --primary-color: #013475;      /* Xanh Navy đậm - màu thương hiệu chính */
  --secondary-color: #005ed6;    /* Xanh dương Topbar */
  --accent-light: #ebf8ff;       /* Xanh dương nhạt dùng cho background phụ */
  --body-bg: #fafafa;            /* Màu nền xám trắng của trang chủ */
  --text-dark: #001c38;          /* Màu chữ tối chính */
  --text-muted: #2f2f2f;         /* Màu chữ xám phụ */
  --divider-color: #dddddd;      /* Màu của đường phân tách */
  --white: #ffffff;

  /* Định nghĩa font chữ toàn cục */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 
  Thiết lập các thuộc tính mặc định cho toàn bộ trang web sử dụng các biến toàn cục:
*/
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  background-color: var(--body-bg);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

/*  */
.customize-partial-edit-shortcut {
    z-index: 999;
    top: -2rem;
    right: -2rem;
    position: absolute;
}
.customize-partial-edit-shortcut-button {
    width: 2rem;
    height: 2rem;
    background: #28b4e9;
    border-radius: 100%;
    border: 2px solid white;
}
.customize-partial-edit-shortcut-button svg {
    fill: white;
}
.main-section > .customize-partial-edit-shortcut {
    z-index: 999;
    top: 0;
    left: 0;
    right: unset;
    position: absolute;
}
.hidden-edit-shortcut > .customize-partial-edit-shortcut {
    display: none;
}
.customize_bottom_left > .customize-partial-edit-shortcut {
    bottom: 0;
    left: 0;
    right: unset;
    top: unset;
}
.customize_bottom_right > .customize-partial-edit-shortcut {
    bottom: 0;
    left: unset;
    right: 0;
    top: unset;
}
.customize_top_left > .customize-partial-edit-shortcut {
    bottom: unset;
    left: 0;
    right: unset;
    top: 0;
}
.relative {
    position: relative;
}