/*
 * Biến thiết kế — đo trực tiếp từ CSS gốc của homelight.vn
 * (css/style.css, css/menu.css, css/main.css, css/mstyle.css).
 *
 * KHÔNG hardcode màu ở nơi khác. Mọi giá trị màu/khoảng cách dùng chung
 * phải khai báo ở đây.
 */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local("Roboto"), url("../fonts/roboto-normal-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local("Roboto"), url("../fonts/roboto-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: local("Roboto Italic"), url("../fonts/roboto-italic-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: local("Roboto Italic"), url("../fonts/roboto-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- thương hiệu ------------------------------------------------- */
  --hl-blue: #0288d1;        /* menu ngang, nhãn tiêu đề khối, header sidebar */
  --hl-amber: #f5b700;       /* nút chính, hover menu, tab đang mở, giỏ hàng */
  --hl-orange: #f7941d;      /* a:hover toàn site */
  --hl-blue-2: #1d75bd;      /* nút phụ */
  --hl-blue-2-b: #2b3a8f;    /* viền dưới nút phụ */
  --hl-red-b: #ef3c28;       /* viền dưới nút chính */
  --hl-green: #64bc46;       /* nút gọi nổi */

  /* --- giá ---------------------------------------------------------- */
  --hl-price: #ed1e26;       /* giá trên card */
  --hl-price-lg: #eb1c24;    /* giá trang chi tiết */
  --hl-price-old: #595959;   /* giá gạch ngang */
  --hl-save: #2a5f6d;        /* "Tiết kiệm:" */

  /* --- chữ & nền ---------------------------------------------------- */
  --hl-text: #000;
  --hl-link: #555;
  --hl-muted: #666;
  --hl-spec: #545454;        /* bảng thông số trang SP */
  --hl-name: #874143;        /* tên nhân viên hỗ trợ */
  --hl-phone: #ff0000;       /* số điện thoại hỗ trợ */

  --hl-bg: #fff;
  --hl-bg-block: #f2f2f2;
  --hl-bg-title: #f3f3f3;
  --hl-bg-tab: #f5f5f5;
  --hl-bg-soft: #f7f7f7;
  --hl-topbar: #e6e7e9;
  --hl-footer: #333;
  --hl-footer-2: #222;

  /* --- viền --------------------------------------------------------- */
  --hl-border-img: #dddfde;  /* viền ảnh SP 1px + padding 4px — dấu ấn nhận diện */
  --hl-border: #ededed;
  --hl-border-2: #e7e7e7;
  --hl-border-3: #eaeaea;
  --hl-border-4: #ddd;

  /* --- layout ------------------------------------------------------- */
  --hl-container: 1200px;
  --hl-sidebar: 260px;
  --hl-gutter: 30px;
  --hl-pad: 15px;            /* lề trong của container ở màn nhỏ */
  --hl-radius: 3px;
  --hl-radius-btn: 5px;

  --hl-topbar-h: 30px;
  --hl-header-h: 100px;
  --hl-nav-h: 50px;
  --hl-block-head-h: 44px;

  /* --- chữ ---------------------------------------------------------- */
  --hl-font: "Roboto", Arial, Helvetica, sans-serif;
  --hl-fs: 14px;
  --hl-fs-sm: 13px;
  --hl-fs-xs: 12px;
  --hl-fs-block: 20px;       /* nhãn tiêu đề khối */
  --hl-fs-h1: 18px;
  --hl-fs-price: 17px;
  --hl-fs-price-lg: 24px;

  /* --- chuyển động --------------------------------------------------- */
  --hl-ease: .2s ease;
}

/* Bản gốc không có transition nào. Cho phép đúng một nâng cấp: làm mờ ảnh
   khi hover mượt hơn. Người dùng tắt hiệu ứng thì bỏ hẳn. */
@media (prefers-reduced-motion: reduce) {
  :root { --hl-ease: 0s; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}