/* === Import font UTM Bebas === */
@font-face {
  font-family: 'UTM Bebas';
  src: url('font/UTM-Bebas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ====== Color tokens (RGB) ====== */
:root{
  --green-strong: rgb(39, 140, 72);
  --green-dark:   rgb(34, 100, 52);
  --green-soft:   rgb(185, 199, 193);
  --bg-white:     rgb(255, 255, 255);
  --bg-gray:      rgb(238, 238, 238);
  --text-black:   rgb(0, 0, 0);
  --text-gray:    rgb(113, 127, 117);
  --red-cta:      rgb(230, 46, 37);
  /* mặc định, sẽ được JS cập nhật chính xác */
  --header-h: 120px;
}

/* ====== Base ====== */
html,body{font-family:"Nunito Sans",system-ui,Arial,sans-serif;color:var(--text-black);scroll-behavior:smooth;}
.section-spacing{ padding:80px 0; }
.section-title{
  font-family:UTM Bebas, sans-serif;
  letter-spacing:.5px;
  margin-bottom:16px;
  align-items: center;
}
.section-title .thin{ font-weight:400 }
.section-title .strong{ font-weight:700; color:var(--green-strong) }
.section-title.center{ text-align:center; }
.section-note{ color:var(--text-gray); text-align:center; margin-bottom:16px }

/* ====== Header trong suốt, không viền, không bóng ====== */
.header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color .3s ease, transform .25s ease;
  will-change: transform;
  z-index: 1000; /* đảm bảo nổi trên banner */
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}
.header .nav-link,
.header .logo,
.header .cart,
.header .search input {
  font-family: 'UTM Bebas', sans-serif; /* GIỮ UTM Bebas */
  letter-spacing: 1px;
}
.header .container{ gap:16px }
.logo{ height:200px }
.nav{ display:flex; gap:12px; align-items:center; }
.nav-link{ font-weight:700; color:var(--text-black); text-decoration:none }
.nav-link:hover{ color:var(--green-strong) }
.header-cta{ display:flex; align-items:center; gap:12px }
.search{
  display:flex; align-items:center;
  background:rgb(226,226,226);
  padding:6px 12px; border-radius:20px
}
.search input{ border:0; background:transparent; outline:none; width:180px }
.cart{ font-size:22px; color:var(--text-black) }

/* Dồn menu sang phải, giữ logo bên trái */
.header .container { justify-content: flex-start; gap: 4px; }
.nav { margin-left: auto; display: flex; gap: 10px; margin-right: 0px; flex:0 0 auto; }
@media (min-width: 900px){ .nav { margin-right: 90px; } }

/* Cỡ chữ menu header */
.header .nav .nav-link{ font-size: 30px; line-height: 1; }
@media (min-width: 1200px){ .header .nav .nav-link{ font-size: 22px; } }
@media (max-width: 992px){ .header .nav .nav-link{ font-size: 18px; } }

/* mobile */
@media (max-width:992px){
  .nav{ display:none }
  .header.show-menu .nav{
    display:flex; flex-direction:column;
    position:absolute; top:60px; left:0; right:0;
    background:var(--bg-white); padding:12px; border-top:1px solid #eee
  }
}

/* ====== Banner ====== */
/* KHẮC PHỤC CHỒNG LÊN: dùng đệm động theo --header-h */
/* Banner luôn cao = 100vh - header, không bị đè, không bị "mất" ở màn to */
.banner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: visible;
 
  padding-bottom: 100px; /* thêm khoảng trống để thấy trọn xe */
  box-sizing: border-box;
  box-sizing: border-box;
}

/* Không để container cộng thêm padding-top (nếu bạn vẫn dùng .container bên trong) */
.banner .container{
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0;
  width: 100%;
}
.banner-bg{
  display: block;
  width: 100%;
  height: auto;
}
/* Màn nhỏ: cho phép banner co lại mềm mại (tuỳ chọn) */
@media (max-width: 992px){
  .banner{
    min-height: 70vh;
    height: auto;
    padding-top: calc(var(--header-h) + 16px);
  }
}

/* Đảm bảo không có khoảng trắng “mặc định” của trình duyệt */
html, body{
  margin: 0;
  padding: 0;
}


/* ====== Product ====== */
.tabs{ display:flex; gap:18px; justify-content:center; margin:24px 0 12px }
.tab{ border:0; padding:10px 20px; border-radius:24px; font-weight:700; color:var(--bg-white); background:var(--green-soft); cursor:pointer }
.tab.active{ background:var(--green-dark) }
.slider{ position:relative; display:flex; align-items:center }
.arrow{ width:44px; height:44px; border:0; border-radius:50%; background:rgb(210,210,210); display:flex; align-items:center; justify-content:center }
.arrow i{ font-size:20px }
.slides{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; width:100%; padding:0 16px }
.card{ background:rgb(240,240,240); padding:24px; border-radius:4px; text-align:center }
.card img{ max-width:260px; width:100%; height:auto; margin:8px auto 16px; display:block }
.card .icons{ display:flex; gap:18px; justify-content:center; color:var(--text-gray); font-size:22px; margin:8px 0 }
.card .name{ font-weight:800; margin:4px 0 }
.card .price{ color:var(--red-cta); font-weight:800 }
.card .btn-buy{ background:var(--red-cta); color:#fff; border:0; border-radius:24px; padding:10px 20px; margin-top:10px }

@media (max-width:992px){
  .slides{ grid-template-columns:1fr; }
  .bike{ max-width: clamp(150px, 50vw, 60%); }
  .banner { min-height: clamp(400px, 60vh, 600px); height: 60vh; }
  .banner .container { padding-top: 0 !important; padding-bottom: clamp(30px, 6vh, 50px); }
}

/* ====== About ====== */
.about{ background:url("pic/background_2.png") center/cover no-repeat }
.about-board{
  position:relative;
  background:rgba(255,255,255,.92);
  min-height:360px; border-radius:24px; padding:28px; margin-top:20px; overflow:hidden
}
.about-content{ position:relative }
.about-heading{ font-weight:700; margin-bottom:8px }

/* ====== Blog ====== */
.blog{ background:url("pic/background_blog.png") center/cover no-repeat }
.blog-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:220px; gap:24px }
.blog-card{
  position:relative; background:rgba(255,255,255,.9); border-radius:8px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--green-dark)
}
.blog-card.big{ grid-row:span 2; background:rgba(255,255,255,.98) }
.blog-title{ font-weight:700; font-size:24px }
@media (max-width:992px){ .blog-grid{ grid-template-columns:1fr; grid-auto-rows:180px } }

/* ====== Footer area ====== */
.footer-area{ background:linear-gradient(180deg, rgba(210,240,200,.85), rgba(55,142,70,.85)) }
.newsletter{ display:flex; align-items:center; gap:24px; justify-content:space-between; flex-wrap:wrap; margin-bottom:24px }
.nl-text{ font-size:28px; font-weight:700 }
.nl-sub{ font-weight:400; font-size:18px }
.nl-form{ display:flex; gap:12px }
.nl-form input{ padding:12px 16px; border-radius:28px; border:2px solid var(--green-dark); min-width:320px }
.nl-form button{ background:var(--green-dark); color:#fff; border:0; border-radius:28px; padding:12px 20px; font-weight:700 }
.faq-title{ font-weight:800; margin:16px 0 }
.faq-groups{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.faq-group h4{ font-weight:800; margin-bottom:8px }
.faq-group li{ cursor:pointer; margin:6px 0; list-style:circle inside }
.legal{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:28px }
.legal .social a{ color:#183; font-size:22px; margin-left:12px }
@media (max-width:992px){
  .faq-groups{ grid-template-columns:1fr 1fr }
  .nl-form input{ min-width:220px }
  .legal{ flex-direction:column; align-items:flex-start }
}

/* ====== Utils ====== */
.hidden{ display:none!important }

/* === Newsletter + FAQ (nền trắng) === */
#subscribe-faq, .subscribe-faq{ background: rgb(255,255,255); padding: 80px 0; }
#subscribe-faq .newsletter, .subscribe-faq .newsletter{ display:flex; align-items:center; gap:24px; justify-content:space-between; flex-wrap:wrap; margin-bottom:24px; }
#subscribe-faq .nl-text, .subscribe-faq .nl-text{ font-size:28px; font-weight:700 }
#subscribe-faq .nl-sub,  .subscribe-faq .nl-sub{ font-weight:400; font-size:18px }
#subscribe-faq .nl-form, .subscribe-faq .nl-form{ display:flex; gap:12px }
#subscribe-faq .nl-form input, .subscribe-faq .nl-form input{ padding:12px 16px; border-radius:28px; border:2px solid var(--green-dark); min-width:320px; background: rgb(255,255,255); }
#subscribe-faq .nl-form button, .subscribe-faq .nl-form button{ background: var(--green-dark); color: rgb(255,255,255); border:0; border-radius:28px; padding:12px 20px; font-weight:700; }
#subscribe-faq .faq-title, .subscribe-faq .faq-title{ font-weight:800; margin:16px 0 }
#subscribe-faq .faq-groups, .subscribe-faq .faq-groups{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
#subscribe-faq .faq-group h4, .subscribe-faq .faq-group h4{ font-weight:800; margin-bottom:8px }
#subscribe-faq .faq-group li, .subscribe-faq .faq-group li{ cursor:pointer; margin:6px 0; list-style:circle inside }
@media(max-width:992px){
  #subscribe-faq .faq-groups, .subscribe-faq .faq-groups{ grid-template-columns:1fr 1fr }
  #subscribe-faq .nl-form input, .subscribe-faq .nl-form input{ min-width:220px }
}

/* Phần FOOTER thực tế */
#contact.footer-area{ background:180deg, rgb(210,240,200,0.85); padding: 28px 0; }
#contact .legal{ display:flex; justify-content: space-between; align-items: center; gap: 16px; }
#contact .legal .social a{ color: rgb(24, 136, 51); font-size: 22px; margin-left: 12px; }
@media (max-width: 992px){ #contact .legal{ flex-direction: column; align-items: flex-start; } }

/* Tiêu đề h2 */
h2.section-title.center{
  font-family: 'UTM Bebas', sans-serif;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.5px;
  text-align: center;
}
h2.section-title.center .strong{ font-weight:700; }

/* kích thước logo footer */
.footer-logo img { height: 200px; width: auto; }
@media (max-width: 992px){
  .legal { gap: 12px; }
  .footer-logo img { height: 40px; }
}

/* Breakpoints tinh chỉnh header-h để dự phòng trước khi JS set */
@media (max-width: 1400px){ .logo{ height: 100px } :root{ --header-h: 100px; } .header .nav .nav-link{ font-size: 24px } .search input{ width: 160px } .header .container{ gap: 8px } }
@media (max-width: 1200px){ .logo{ height: 88px }  :root{ --header-h: 88px; }  .header .nav .nav-link{ font-size: 20px } .search input{ width: 140px } }
@media (max-width: 1100px){ .logo{ height: 76px }  :root{ --header-h: 76px; }  .header .nav .nav-link{ font-size: 18px } .search input{ width: 120px } .nav{ gap: 8px } }
@media (max-width: 992px){ :root{ --header-h: 64px; } }