/* ===========================================================
   CPBA Việt Nam — Stylesheet chung
   Theme: Xanh bi-a (billiard cloth) + Vàng gold + Nền tối sang
   =========================================================== */

:root {
  --green-900: #07271c;
  --green-800: #0a3d2c;
  --green-700: #0f5238;
  --green-600: #14674a;
  --gold: #c9a24b;
  --gold-light: #e3c987;
  --ink: #0d0f0e;
  --ink-soft: #16201b;
  --cream: #f6f3ec;
  --cream-dim: #d9d4c7;
  --text: #ededed;
  --text-dim: #b6bdb8;
  --white: #ffffff;
  --radius: 0.875rem;
  --radius-sm: 0.5rem;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* line-height 1.35 chu khong phai 1.2: chu tieng Viet vua co dau chong tren
   (Ẩ, Ế, Ữ) vua co dau nang duoi (Ậ, Ệ, Ợ) nen hop muc cao hon Latin.
   lining-nums: Playfair mac dinh dung so kieu co, cac chu so cao thap so le
   va tut xuong duoi duong chan chu — sai han khi dung trong bang so lieu. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.35; letter-spacing: .5px;
  font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

.section { padding: 5.625rem 0; }
.section--tight { padding: 3.75rem 0; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: .875rem;
  display: inline-block;
}

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--white); margin-bottom: 18px; }
.section-lead { color: var(--text-dim); max-width: 40rem; font-size: 1.05rem; }
.center { text-align: center; }
.center .section-lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .875rem 1.875rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .35s var(--ease);
}
.btn--gold { background: var(--gold); color: var(--green-900); }
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,162,75,.35); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: var(--white); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--dark { background: var(--green-800); color: var(--cream); }
.btn--dark:hover { background: var(--green-700); }

/* ===========================================================
   HEADER
   =========================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.125rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled {
  background: rgba(7,39,28,.92);
  backdrop-filter: blur(12px);
  padding: .75rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand__mark {
  width: 2.75rem; height: 2.75rem; border-radius: .625rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--green-900);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.25rem;
}
.brand__name { font-family: var(--serif); font-size: 1.35rem; color: var(--white); letter-spacing: 1px; }
.brand__name span { color: var(--gold); }
.brand__sub { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .3em; color: var(--text-dim); text-transform: uppercase; }

.menu { display: flex; align-items: center; gap: 2.125rem; }
.menu a {
  font-size: .95rem; font-weight: 500; color: var(--text);
  position: relative; padding: .375rem 0; transition: color .3s;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.menu a:hover, .menu a.active { color: var(--gold); }
.menu a:hover::after, .menu a.active::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 1.125rem; }
.lang { font-size: .85rem; color: var(--text-dim); display: flex; gap: .5rem; align-items: center; }
.lang a { padding: .1875rem .5rem; border-radius: .3125rem; }
.lang a.active { background: var(--gold); color: var(--green-900); font-weight: 600; }

.nav__toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: .3125rem; }
.nav__toggle span { width: 1.625rem; height: 2px; background: var(--white); transition: .3s; }

/* ===========================================================
   HERO
   =========================================================== */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,39,28,.55) 0%, rgba(7,39,28,.75) 60%, rgba(13,15,14,.95) 100%);
}
.hero__inner { text-align: center; max-width: 55rem; padding-top: 5rem; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); color: var(--white); margin-bottom: 1.375rem; }
.hero h1 .gold { color: var(--gold); }
.hero p { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--cream-dim); max-width: 38.75rem; margin: 0 auto 2.25rem; }
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.scroll-hint { position: absolute; bottom: 1.875rem; left: 50%; transform: translateX(-50%); color: var(--text-dim); font-size: .8rem; letter-spacing: .25em; animation: bob 2s infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ===========================================================
   PAGE HERO (trang con)
   =========================================================== */
.page-hero {
  position: relative; padding: 11.25rem 0 5.625rem; text-align: center;
  background: radial-gradient(1200px 500px at 50% -10%, var(--green-700), var(--green-900) 60%, var(--ink));
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--white); margin-bottom: 1.125rem; }
.page-hero p { color: var(--cream-dim); max-width: 42.5rem; margin: 0 auto; font-size: 1.1rem; }
.breadcrumb { font-size: .85rem; color: var(--text-dim); margin-bottom: 1.375rem; letter-spacing: .07em; }
.breadcrumb a:hover { color: var(--gold); }

/* ===========================================================
   FEATURE / ABOUT SPLIT
   =========================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.75rem; align-items: center; }
.split--rev .split__media { order: 2; }
/* margin-inline:auto — anh khong co width:100%, nen khi cot rong hon anh goc
   (poster 750px trong cot 830px o 2K) no giu kich thuoc that va dat sang trai.
   Can giua thay vi keo gian: phong 750px len 950px o man 3K se thay ro re. */
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); margin-inline: auto; }
.split__body h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--white); margin-bottom: 1.125rem; }
.split__body p { color: var(--text-dim); margin-bottom: 1rem; }

.check-list { margin: 1.375rem 0; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .875rem; color: var(--cream-dim); }
.check-list li::before { content: "✦"; color: var(--gold); font-size: 1rem; line-height: 1.6; }

/* ===========================================================
   CARDS GRID
   =========================================================== */
.grid { display: grid; gap: 1.75rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: linear-gradient(160deg, var(--ink-soft), #0c130f);
  border: 1px solid rgba(201,162,75,.12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card:hover { transform: translateY(-8px); border-color: rgba(201,162,75,.4); box-shadow: var(--shadow); }
.card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--green-900); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__img img { transform: scale(1.07); }
.card__body { padding: 1.5rem; }
.card__tag { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--gold); }
.card__body h3 { color: var(--white); font-size: 1.3rem; margin: .5rem 0 .625rem; }
.card__body p { color: var(--text-dim); font-size: .95rem; margin-bottom: 1rem; }
.card__link { color: var(--gold); font-weight: 600; font-size: .9rem; display: inline-flex; gap: .375rem; align-items: center; transition: gap .3s; }
.card__link:hover { gap: .75rem; }

/* Product card */
.product-card .card__img { aspect-ratio: 1/1; background: radial-gradient(circle at 50% 40%, var(--green-700), var(--green-900)); display: grid; place-items: center; }
.product-card .card__img img { object-fit: contain; padding: 1.5rem; }
.swatches { display: flex; gap: .5rem; margin-bottom: .875rem; }
.swatch { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }

/* ===========================================================
   STATS / FEATURE STRIP
   =========================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.875rem; text-align: center; }
.stat__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }
.stat__label { color: var(--text-dim); font-size: .95rem; }

.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.feature { padding: 2rem; border-radius: var(--radius); background: var(--ink-soft); border: 1px solid rgba(255,255,255,.05); }
.feature__icon { width: 3.375rem; height: 3.375rem; border-radius: .75rem; background: rgba(201,162,75,.15); color: var(--gold); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 1.125rem; }
.feature h3 { color: var(--white); font-size: 1.25rem; margin-bottom: .625rem; }
.feature p { color: var(--text-dim); font-size: .95rem; }

/* ===========================================================
   BRANDS STRIP
   =========================================================== */
.brands { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.brand-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 17.5rem; display: flex; align-items: flex-end; padding: 1.625rem; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85)); }
.brand-card__bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.brand-card:hover .brand-card__bg { transform: scale(1.08); }
.brand-card h4 { color: var(--white); font-size: 1.3rem; letter-spacing: .05em; }
.brand-card p { color: var(--cream-dim); font-size: .85rem; margin: .375rem 0 .75rem; }

/* ===========================================================
   FORMS
   =========================================================== */
.form { display: grid; gap: 1.125rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.field label { display: block; font-size: .85rem; color: var(--cream-dim); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8125rem 1rem; border-radius: var(--radius-sm);
  background: var(--ink-soft); border: 1px solid rgba(255,255,255,.12);
  color: var(--text); font-family: var(--sans); font-size: .95rem; transition: border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 7.5rem; }
.form-note { font-size: .85rem; color: var(--text-dim); }
.form-success { padding: .875rem 1.125rem; border-radius: var(--radius-sm); background: rgba(20,103,74,.25); border: 1px solid var(--green-600); color: var(--cream); display: none; }
.form-success.show { display: block; }

/* Contact info */
.info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.info-block { padding: 1.625rem; border-radius: var(--radius); background: var(--ink-soft); border: 1px solid rgba(255,255,255,.06); }
.info-block h3 { color: var(--gold); font-family: var(--sans); font-size: 1rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .75rem; }
.info-block p { color: var(--text-dim); font-size: .95rem; }
.info-block a:hover { color: var(--gold); }

.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.map-embed iframe { width: 100%; height: 26.25rem; border: 0; display: block; filter: grayscale(.3) contrast(1.1); }

/* ===========================================================
   NEWS / FILTER TABS
   =========================================================== */
.tabs { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.5rem; }
.tab {
  padding: .625rem 1.5rem; border-radius: 50px; cursor: pointer;
  background: var(--ink-soft); border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim); font-size: .9rem; font-weight: 500; transition: all .3s;
}
.tab:hover { color: var(--white); }
.tab.active { background: var(--gold); color: var(--green-900); border-color: var(--gold); font-weight: 600; }

.news-meta { display: flex; gap: .875rem; align-items: center; font-size: .8rem; color: var(--text-dim); margin-bottom: .625rem; }
.news-meta .dot { width: .25rem; height: .25rem; border-radius: 50%; background: var(--gold); }

.sort-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.125rem; }
.sort-bar select { padding: .625rem 1rem; border-radius: var(--radius-sm); background: var(--ink-soft); border: 1px solid rgba(255,255,255,.12); color: var(--text); }

/* ===========================================================
   MODAL (product detail)
   =========================================================== */
.modal { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; padding: 1.25rem; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.modal.open { display: grid; }
.modal__box { background: var(--ink-soft); border: 1px solid rgba(201,162,75,.25); border-radius: var(--radius); max-width: 51.25rem; width: 100%; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; }
.modal__media { background: radial-gradient(circle at 50% 40%, var(--green-700), var(--green-900)); display: grid; place-items: center; padding: 1.875rem; }
.modal__media img { object-fit: contain; }
.modal__body { padding: 2.125rem; }
.modal__body h2 { color: var(--white); font-size: 1.6rem; margin-bottom: .375rem; }
.modal__code { color: var(--gold); font-size: .85rem; letter-spacing: .24em; margin-bottom: 1rem; }
.modal__close { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 1.8rem; color: var(--white); cursor: pointer; background: none; border: none; }
.spec-list { margin: 1.125rem 0; }
.spec-list li { display: flex; justify-content: space-between; padding: .625rem 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--text-dim); font-size: .92rem; }
.spec-list li span { color: var(--cream); }

/* ===========================================================
   CTA BANNER
   =========================================================== */
.cta-banner { background: linear-gradient(120deg, var(--green-800), var(--green-700)); border-radius: var(--radius); padding: 3.75rem; text-align: center; }
.cta-banner h2 { color: var(--white); font-size: clamp(1.7rem,3.5vw,2.6rem); margin-bottom: .875rem; }
.cta-banner p { color: var(--cream-dim); max-width: 35rem; margin: 0 auto 1.75rem; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer { background: var(--green-900); padding: 4.375rem 0 1.875rem; border-top: 1px solid rgba(201,162,75,.15); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-col h4 { color: var(--gold); font-family: var(--sans); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.125rem; }
.footer-col p, .footer-col a { color: var(--text-dim); font-size: .92rem; }
.footer-col li { margin-bottom: .625rem; }
.footer-col a:hover { color: var(--gold); }
.footer-brand .brand__name { font-size: 1.5rem; }
.footer-brand p { margin: 1rem 0; max-width: 17.5rem; }
.socials { display: flex; gap: .75rem; }
.socials a { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: all .3s; }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
.footer-bottom { margin-top: 3.125rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: var(--text-dim); font-size: .85rem; }

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.reveal { opacity: 0; transform: translateY(1.875rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .grid--3 { grid-template-columns: repeat(2,1fr); }
  .brands { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); gap: 40px 20px; }
  .features { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--rev .split__media { order: 0; }
}

@media (max-width: 720px) {
  .menu, .nav__actions .lang { display: none; }
  .nav__toggle { display: flex; }
  .menu.open {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(7,39,28,.98); padding: 24px; backdrop-filter: blur(12px);
  }
  .section { padding: 4rem 0; }
  .grid--4, .grid--3, .grid--2, .brands, .info-grid, .form-row, .stats { grid-template-columns: 1fr; }
  .modal__box { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 2.5rem 1.5rem; }
  .page-hero { padding: 8.75rem 0 3.75rem; }
}

/* ===========================================================
   MÀN HÌNH LỚN (2K / 3K / 4K)
   -----------------------------------------------------------
   Hai trục điều chỉnh, cố ý tách riêng:

   1. font-size gốc — mọi rem trong file này (chữ, padding, gap,
      max-width khối chữ) nở theo cùng một hệ số, nên tỷ lệ giữa
      các thành phần giữ nguyên. Dùng em chứ không phải px để
      không đè lên cỡ chữ mặc định người dùng đặt trong trình
      duyệt (thiết lập trợ năng).
        1440px -> 16px | 1920px -> 17.1px | 2560px -> 18.5px
        3200px -> 19.9px | trần 1.25em

   2. --maxw — bề rộng container. Để rem tự nở là không đủ: ở
      2560px container mới chỉ ~1430px (56% màn hình), nội dung
      vẫn là một dải hẹp kẹp giữa hai khoảng trống lớn.

   Dưới 1441px: không đổi gì so với bản gốc.
   =========================================================== */
@media (min-width: 1441px) {
  html { font-size: clamp(1em, 0.223vw + 0.8em, 1.25em); }
}

@media (min-width: 1600px) { :root { --maxw: 1400px; } }
@media (min-width: 1920px) { :root { --maxw: 1560px; } }
@media (min-width: 2300px) { :root { --maxw: 1720px; } }  /* 2K 2560x1440 */
@media (min-width: 2900px) { :root { --maxw: 1960px; } }  /* 3K 3200x1800 */
@media (min-width: 3500px) { :root { --maxw: 2200px; } }  /* 4K 3840x2160 */

/* Cột chữ trong .split rộng theo container -> quá dài để đọc.
   Chặn ở 36em (~72 ký tự) tính theo cỡ chữ của chính đoạn văn,
   nên ngưỡng này tự đúng ở mọi mức scale. Ảnh vẫn tràn hết cột. */
@media (min-width: 1600px) {
  .split__body p,
  .split__body .check-list { max-width: 36em; }
  .info-block p { max-width: 32em; }
}