/* Hệ thiết kế iCAUR — trích từ trang chủ demo, dùng chung cho mọi trang.
   Quy tắc chữ: dùng Gotham bản Việt hoá cho cả tiếng Việt lẫn tiếng Anh. */




/* Gotham bản Việt hoá (SVN-Gotham). Đã đối chiếu từng chỉ số với 4 tệp gốc của
   HQ: H, O, n, o, chiều cao chữ hoa và chữ thường đều trùng khít, nên đúng là
   Gotham chỉ thêm dấu. Bản gốc 231 glyph thiếu 55/74 ký tự tiếng Việt, bản này
   481 glyph và đủ cả 74. Ánh xạ: Light=300, Book=400, Regular=500 (chính là
   GothamMedium của HQ), Bold=600 và 700. */
@font-face{font-family:"Gotham";font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/gotham-vn-300.woff2) format("woff2")}
@font-face{font-family:"Gotham";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/gotham-vn-400.woff2) format("woff2")}
@font-face{font-family:"Gotham";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/gotham-vn-500.woff2) format("woff2")}
@font-face{font-family:"Gotham";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/gotham-vn-700.woff2) format("woff2")}
@font-face{font-family:"Gotham";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/gotham-vn-700.woff2) format("woff2")}

:root{
  --ink:#0A0807; --panel:#120F0E; --panel2:#1A1411;
  --cream:#E4D6CD; --gold:#C49F70; --gold-dim:rgba(196,159,112,.32);
  --brown:#5C3629; --orange:#F37021;
  --muted:rgba(228,214,205,.58); --hair:rgba(228,214,205,.14);
  /* chữ phụ khi nằm đè lên ảnh — .58 đo được chỉ 1,4:1 ở vùng sáng */
  --muted-img:rgba(228,214,205,.88);
  --warn:#D98C7A;
  --vn:"Gotham","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  --display:"Gotham","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  --brand:"Gotham","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  --pad:clamp(20px,6.4vw,104px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--vn);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.pad{padding-left:var(--pad);padding-right:var(--pad)}

.eyebrow{font-family:var(--display);font-weight:500;
  font-size:clamp(10px,1.4vw,12px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(14px,2vw,22px)}
h1.sec-title,h2.sec-title{font-family:var(--vn);font-weight:600;
  font-size:clamp(18px,1.9vw,26px);line-height:1.46;letter-spacing:-.012em;
  margin:0 0 clamp(16px,2vw,24px);color:#fff;text-wrap:balance;max-width:min(100%,760px)}
.lede{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.65;color:var(--muted);max-width:52ch;margin:0}
.lbl{display:block;font-size:clamp(12px,1.3vw,14px);letter-spacing:.06em;color:var(--muted)}

.cta{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
  background:var(--orange);color:#fff;font-family:var(--vn);font-weight:600;
  font-size:clamp(13.5px,1.05vw,15px);letter-spacing:.02em;
  padding:clamp(14px,1.6vw,19px) clamp(28px,3.4vw,46px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s cubic-bezier(.2,.7,.3,1)}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(243,112,33,.36)}
.cta::after{content:"";width:18px;height:1px;background:currentColor;transition:width .3s}
.cta:hover::after{width:28px}

.rv{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.fx .rv{opacity:0;transform:translateY(46px)}
.fx .rv.in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* phải đủ mạnh để thắng cổng .fx, nếu không nội dung bị ẩn vĩnh viễn
     với người bật chế độ giảm chuyển động */
  .rv,.fx .rv{opacity:1;transform:none}
}