/*
  Biến giao diện EGA Autocare (tách từ <head> của template/index.html).
  Đổi màu / font / bo góc toàn site tại đây.
*/
@font-face {
  font-family: ega-iconfont;
  src: url(../fonts/ega-iconfont.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

:root {
  --font-body-family: 'Be Vietnam Pro', sans-serif;
  --font-body-weight: 400;
  --font-headings-family: 'Oswald', serif;
  --font-headings-weight: 600;

  --color-foreground: #14213A;
  --color-background: #FFFFFF;
  --color-background-body: #F6F8FC;

  --color-primary: #0B2D66;
  /* Thương hiệu Asia Auto: navy chủ đạo + cam đỏ nhấn (không dùng vàng) */
  --brand-navy: #0B2D66;
  --brand-navy-dark: #071D45;
  --brand-navy-light: #1B4A99;
  --brand-navy-soft: #EEF3FB;
  --brand-navy-line: #CFDCF0;
  --brand-orange: #F26522;
  --brand-orange-dark: #D9501A;
  --brand-orange-soft: #FFEFE6;
  --color-primary-rgb: 11, 45, 102;
  --color-highlight: #F26522;
  --color-secondary: #0B2D66;
  --color-link: #0B2D66;
  --color-accent: #CFDCF0;
  --coll-bg-hover: #F26522;
  --color-border: #E3E8F0;
  --color-neutral-50: #EEF1F6;
  --color-neutral-100: #C5CDD9;
  --color-neutral-200: #8A96A8;
  --color-neutral-300: #5B6678;
  --color-neutral-400: #3A4352;

  --color-label: var(--color-neutral-200);
  --color-price: #eb3030;
  --color-price-compare: #8A96A8;
  --color-sale-bg: #eb3030;
  --color-sale: #FFFFFF;
  --color-addtocart: #ffffff;
  --color-addtocart-bg: #0B2D66;
  --coupon-active-bg: #141414;
  --coupon-badge-color: #F26522;
  --coupon-active-title: #FFFFFF;
  --coupon-active-desc: #C9CED3;
  --coupon-active-button-bg: #F26522;
  --coupon-active-button-text: #FFFFFF;
  --color-button-primary: #F26522;
  --color-button-primary-text: #ffffff;
  --color-footer: #071D45;
  --color-footer-text: #B8C4D9;
  --color-footer-hover: #F26522;
  --color-error: #EE1926;
  --color-success: #2BAD14;
  --color-warning: #E8590C;

  --color-header: var(--color-foreground);
  --color-header-bg: var(--color-background);
  --header-height: 7rem;
  --logo-width: 22rem;
  --color-cart-bubble: #FFFFFF;
  --color-cart-bubble-bg: #EE1926;
  --color-search: var(--color-primary);
  --color-transparent-header: #ffffff;

  --font-size-body: 1.6rem;
  --font-size-h1: 4.8rem;
  --font-size-h2: 4rem;
  --font-size-h3: 3.2rem;
  --font-size-h4: 2.8rem;
  --font-size-h5: 2rem;
  --font-size-h6: 1.6rem;

  --rounded: 0.8rem;
  --rounded-lg: calc(var(--rounded) * 1.5);
  --rounded-md: calc(var(--rounded) * 1);
  --rounded-sm: calc(var(--rounded) / 2);
  --rounded-xs: calc(var(--rounded) / 4);
  --rounded-full: 9999px;
  --rounded-button: 9999px;
  --rounded-input: 8px;
  --product-card-rounded: 16px;

  --spacing-0-5: 0.2rem;
  --spacing-1: 0.4rem;
  --spacing-1-5: 0.6rem;
  --spacing-2: 0.8rem;
  --spacing-2-5: 1rem;
  --spacing-3: 1.2rem;
  --spacing-3-5: 1.4rem;
  --spacing-4: 1.6rem;
  --spacing-4-5: 1.8rem;
  --spacing-5: 2rem;
  --spacing-5-5: 2.2rem;
  --spacing-6: 2.4rem;
  --spacing-6-5: 2.6rem;
  --spacing-7: 2.8rem;
  --spacing-7-5: 3rem;
  --spacing-8: 3.2rem;
  --spacing-8-5: 3.4rem;
  --spacing-9: 3.6rem;
  --spacing-9-5: 3.8rem;
  --spacing-10: 4rem;
  --spacing-11: 4.4rem;
  --spacing-12: 4.8rem;
  --spacing-14: 5.6rem;
  --spacing-16: 6.4rem;
  --spacing-18: 7.2rem;
  --spacing-20: 8rem;
  --spacing-24: 9.6rem;

  --container-width: 100%;
  --container-padding: var(--spacing-3);
  --grid-gutter: var(--spacing-6);

  --shadow-l: 0px 2rem 4.8rem 0px rgba(51, 51, 51, 0.20);
  --navigation-width: 40rem;
  --product-aspect-ratio: 1/1;
  --blogs-aspect-ratio: 16/9;
}

@media (max-width: 767px) {
  :root {
    --logo-width: 15rem;
    --header-height: 6.8rem;
  }
}

body {
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: var(--font-size-body);
  letter-spacing: -0.004em;
  line-height: calc(20 / 14);
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  background-color: var(--color-background-body);
  color: var(--color-foreground);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.section {
  padding: var(--section-padding, 0);
  margin: var(--section-margin, 4rem 0 0 0);
}

@media (max-width: 767px) {
  .section {
    padding: var(--section-padding-mb, 0);
    margin: var(--section-margin-mb, 2rem 0 0 0);
  }
}

@media (min-width: 1200px) {
  :root { --container-width: 1280px; }
}

@media (min-width: 1440px) {
  :root { --container-width: 1520px; }
  .container { padding: 0 6rem; }
}

.heading, .section-heading, .flashsale-heading {
  font-family: var(--font-headings-family);
}

#booking-portal {
  --booking-panel-bg: #12161C;
  --booking-panel-text: #FFFFFF;
}