/* ======================================
   HOA HOA LÁ LÁ – Global Typography
   Font chính: Be Vietnam Pro
   Brand color: #1E4D63
====================================== */

/* ---------- FONT FACE ---------- */

@font-face{
  font-family:"Be Vietnam Pro";
  src:url("../fonts/be-vietnam-pro/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Be Vietnam Pro";
  src:url("../fonts/be-vietnam-pro/BeVietnamPro-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Be Vietnam Pro";
  src:url("../fonts/be-vietnam-pro/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Be Vietnam Pro";
  src:url("../fonts/be-vietnam-pro/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Be Vietnam Pro";
  src:url("../fonts/be-vietnam-pro/BeVietnamPro-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* ---------- VARIABLES ---------- */

:root{
  --hhll-sans:"Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, Arial, sans-serif;

  --hhll-primary:#1E4D63;
  --hhll-primary-2:#295E78;
  --hhll-text:#24343A;
  --hhll-muted:#6F7E83;
}

/* ---------- RESET GHI ĐÈ FLATSOME ---------- */

html{
  font-family:var(--hhll-sans) !important;
}

body{
  font-family:var(--hhll-sans) !important;
  font-size:clamp(15px, 1.05vw, 17px);
  font-weight:400;
  line-height:1.75;
  color:var(--hhll-text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- HEADINGS ---------- */

h1,h2,h3,h4,h5,h6,
.page-title,
.entry-title,
.blog-post-title,
.section-title,
.product-title,
.post-title{
  font-family:var(--hhll-sans) !important;
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.22;
  color:var(--hhll-primary);
}

h1{font-size:clamp(34px, 4.2vw, 56px);}
h2{font-size:clamp(26px, 3vw, 40px);}
h3{font-size:clamp(20px, 2.2vw, 28px);}

/* ---------- NAV / UI / FORM ---------- */

.nav > li > a,
.header-nav a,
.button,
.btn,
input,
textarea,
select,
.header-search-form input{
  font-family:var(--hhll-sans) !important;
}

/* ---------- MENU ---------- */

.nav > li > a,
.header-nav a,
.nav-top-link{
  font-weight:600;
  letter-spacing:.15px;
}

/* ---------- BUTTON ---------- */

.button,
.btn,
button,
input[type="submit"],
a.button{
  font-weight:700;
  letter-spacing:.2px;
}

/* ---------- PRODUCT ---------- */

.product-title,
.product-title a,
.woocommerce-loop-product__title,
.name.product-title{
  font-family:var(--hhll-sans) !important;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--hhll-text);
}

.price,
.amount,
.woocommerce-Price-amount{
  font-family:var(--hhll-sans) !important;
  font-weight:800;
  color:var(--hhll-primary);
}

/* ---------- BLOG / CARD ---------- */

.entry-title,
.entry-title a,
.blog-post-title,
.post-title,
.post-title a{
  font-family:var(--hhll-sans) !important;
  font-weight:800;
  color:var(--hhll-primary);
}

/* ---------- CUSTOM HHLL SECTIONS ---------- */

.hhll-feedback-page,
.hhll-feedback-page *,
.hhll-blog-showcase,
.hhll-blog-showcase *,
.hhll-product-sections,
.hhll-product-sections *,
.hhll-product-detail-fields,
.hhll-product-detail-fields *,
.hhll-price-filter-box,
.hhll-price-filter-box *{
  font-family:var(--hhll-sans) !important;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:849px){
  body{
    font-size:15px;
    line-height:1.7;
  }

  h1{font-size:clamp(28px, 8vw, 38px);}
  h2{font-size:clamp(23px, 6vw, 32px);}
  h3{font-size:clamp(19px, 5vw, 25px);}
}