/* =========================================================
   Trang chu profile — Hong An Entertainment
   Tao 2026-08-16. File doc lap, khong de len CSS cu cua theme.
   ========================================================= */

/* Trang profile chiem toan bo khung — trung hoa CSS cu cua theme */
body.ha-body{margin:0;padding:0;background:#0C0A09}
body.ha-body #wpadminbar{position:fixed}

.ha-profile{
  --ink:#0C0A09;
  --surface:#17130F;
  --surface-2:#211A15;
  --line:#332A22;
  --orange:#FFA51F;
  --orange-bright:#FFC257;
  --orange-deep:#E58309;
  --paper:#EDE7DF;
  --muted:#A39A90;
  --display:"Oswald","Roboto Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Roboto","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --wrap:1180px;

  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.ha-profile *{box-sizing:border-box}
.ha-profile img{max-width:100%;height:auto;display:block}
.ha-wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

.ha-profile h1,.ha-profile h2,.ha-profile h3{margin:0;text-wrap:balance;font-weight:400}

/* Oswald manh hon Anton nen moi chu chay font display deu dung do dam 700.
   Gom mot cho de font tieu de dong bo tuyet doi tren toan trang. */
.ha-hero h1,
.ha-sec-head h2,
.ha-cta h2,
.ha-step h3,
.ha-benefit h3,
.ha-stat b,
.ha-proof-num,
.ha-logo-txt,
.ha-partners .ha-p,
.ha-artists span,
.ha-contact dd,
.ha-step-n{font-weight:700}
.ha-profile p{margin:0}
.ha-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-bright);font-weight:700}
.ha-lede{font-size:19px;color:var(--muted);max-width:62ch}
.ha-profile a:focus-visible,.ha-profile button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- thanh dieu huong ---------- */
.ha-nav{position:sticky;top:0;z-index:60;background:rgba(12,10,9,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ha-nav-in{display:flex;align-items:center;gap:24px;height:70px}
.ha-logo{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;color:var(--paper)}
.ha-logo img{width:38px;height:auto}
.ha-logo-mark{width:32px;height:32px;border-radius:50%;flex:0 0 auto;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 50%,var(--orange) 0 18%,var(--ink) 19% 27%,var(--orange-deep) 28% 33%,var(--ink) 34% 44%,#5a3a24 45% 50%,var(--ink) 51%)}
.ha-logo-txt{font-family:var(--display);font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.ha-nav-links{display:flex;gap:26px;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase}
.ha-nav-links a{color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.ha-nav-links a:hover,.ha-nav-links a:focus-visible{color:var(--paper);border-bottom-color:var(--orange)}
.ha-lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.ha-lang a{color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.12em;padding:7px 11px;font-weight:700}
.ha-lang a.is-on{background:var(--orange);color:#160b04}

/* ---------- hero ---------- */
.ha-hero{position:relative;padding:104px 0 0;overflow:hidden}
.ha-hero-grid{display:grid;gap:34px}
.ha-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(46px,8.4vw,116px);line-height:1.02}
.ha-hero h1 em{font-style:normal;color:var(--orange);display:block}
.ha-hero .ha-lede{font-size:20px}
.ha-cta-row{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.ha-btn{display:inline-block;padding:15px 30px;text-decoration:none;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border:1.5px solid var(--orange);transition:background .18s ease,color .18s ease}
.ha-btn-solid{background:var(--orange);color:#160b04}
.ha-btn-solid:hover{background:#FFB94A;border-color:#FFB94A;color:#160b04}
.ha-btn-ghost{color:var(--orange);background:none}
.ha-btn-ghost:hover{background:var(--orange);color:#160b04}
#ha-wave{display:block;width:100%;height:190px;margin-top:56px}

/* ---------- dai doi tac ---------- */
.ha-partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.ha-partners-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 42px;padding:26px 0}
.ha-partners .ha-eyebrow{flex:0 0 100%;color:var(--muted)}
.ha-partners .ha-p{font-family:var(--display);font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);opacity:.72}

/* ---------- section chung ---------- */
.ha-sec{padding:92px 0}
.ha-sec-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ha-sec-head{display:grid;gap:16px;margin-bottom:52px;max-width:70ch}
.ha-sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(32px,4.4vw,56px);line-height:1.16}

/* ---------- so lieu ---------- */
.ha-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ha-stat{background:var(--ink);padding:30px 24px;display:grid;gap:7px}
.ha-stat b{font-family:var(--display);font-size:clamp(34px,4vw,50px);color:var(--orange);line-height:1;font-variant-numeric:tabular-nums;font-weight:400}
.ha-stat span{font-size:13.5px;color:var(--muted);letter-spacing:.03em}

/* ---------- mo hinh hoat dong ---------- */
.ha-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ha-step{background:var(--surface);padding:32px 26px 34px;display:grid;gap:12px;align-content:start}
.ha-step-n{font-family:var(--display);font-size:15px;letter-spacing:.14em;color:var(--orange-bright);font-variant-numeric:tabular-nums}
.ha-step h3{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:.02em;line-height:1.24}
.ha-step p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- hai khoi loi ich ---------- */
.ha-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px}
.ha-benefit{background:var(--surface);border:1px solid var(--line);padding:38px 32px 40px;display:grid;gap:20px;align-content:start}
.ha-benefit.is-accent{background:linear-gradient(168deg,var(--surface-2),var(--surface));border-color:var(--orange-deep)}
.ha-benefit h3{font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1.22}
.ha-who{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-bright);font-weight:700}
.ha-ticks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.ha-ticks li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;line-height:1.55;color:var(--paper)}
.ha-ticks li::before{content:"";width:9px;height:9px;margin-top:9px;background:var(--orange);transform:rotate(45deg)}

/* ---------- hop tac chien luoc (WCM) ---------- */
.ha-deal{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:44px;align-items:center}
.ha-deal-visual{position:relative;border:1px solid var(--line);background:var(--surface-2);overflow:hidden}
.ha-deal-visual img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;
}
.ha-deal-body{display:grid;gap:20px;align-content:center}
.ha-deal-body h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.6vw,46px);line-height:1.14;font-weight:700}
.ha-deal-body p{font-size:16.5px;color:var(--muted);line-height:1.66}
.ha-deal-figs{display:flex;flex-wrap:wrap;gap:14px 40px;padding-top:4px}
.ha-deal-figs div{display:grid;gap:2px}
.ha-deal-figs b{font-family:var(--display);font-weight:700;font-size:34px;color:var(--orange);line-height:1;font-variant-numeric:tabular-nums}
.ha-deal-figs span{font-size:13.5px;color:var(--muted)}
.ha-source{
  font-size:13px;color:var(--muted);padding-top:14px;margin-top:4px;
  border-top:1px solid var(--line);
}
.ha-source strong{color:var(--paper);font-weight:500}

/* ---------- ket qua ---------- */
.ha-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ha-proof-item{background:var(--ink);padding:40px 32px;display:grid;gap:12px;align-content:start}
.ha-proof-num{font-family:var(--display);font-size:clamp(44px,6vw,74px);color:var(--orange);line-height:1.08;font-variant-numeric:tabular-nums}
.ha-proof-num small{font-size:.42em}
.ha-proof-item h3{font-size:17px;font-weight:700}
.ha-proof-item p{font-size:15.5px;color:var(--muted);line-height:1.6}

/* ---------- du an ---------- */
.ha-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.ha-project{position:relative;display:block;text-decoration:none;color:var(--paper);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.ha-project .ha-thumb{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden} /* bia nhac deu vuong */
.ha-project .ha-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ha-project:hover .ha-thumb img{transform:scale(1.05)}
/* Du an chua co anh bia: dung hinh dia than dung thuong hieu thay cho o trong */
.ha-project .ha-thumb.is-empty{
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,#2b211a,var(--surface-2) 70%);
}
.ha-project .ha-thumb.is-empty::after{
  content:"";width:56%;aspect-ratio:1;border-radius:50%;transition:transform .4s ease;
  background:radial-gradient(circle at 50% 50%,var(--orange) 0 9%,#100d0b 10% 16%,var(--orange-deep) 17% 20%,#100d0b 21% 33%,#3b2c22 34% 37%,#100d0b 38% 62%,#2a2019 63% 66%,#100d0b 67%);
}
.ha-project:hover .ha-thumb.is-empty::after{transform:rotate(24deg) scale(1.04)}
.ha-project h3{font-size:15.5px;font-weight:500;padding:15px 16px 17px;line-height:1.4}
.ha-project:hover h3{color:var(--orange)}
.ha-more-row{margin-top:30px}

/* ---------- nghe si ---------- */
.ha-artists{display:flex;flex-wrap:wrap;gap:12px}
.ha-artists span{border:1px solid var(--line);padding:11px 20px;font-family:var(--display);text-transform:uppercase;
  font-size:17px;letter-spacing:.05em;color:var(--paper);background:var(--surface)}
.ha-artists span.ha-more{font-family:var(--body);font-size:14px;color:var(--muted);letter-spacing:0;text-transform:none;background:none}

/* ---------- CTA ---------- */
.ha-cta{background:var(--orange);color:#160b04;padding:86px 0}
.ha-cta h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,5.6vw,68px);line-height:1.1;max-width:22ch}
.ha-cta p{max-width:60ch;font-size:18px;margin-top:20px;color:#2a1408}
.ha-contact{display:flex;flex-wrap:wrap;gap:12px 46px;margin:36px 0 0;padding-top:30px;border-top:1.5px solid rgba(22,11,4,.28)}
.ha-contact>div{display:grid;gap:3px}
.ha-contact dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#5c2c0f}
.ha-contact dd{margin:0;font-family:var(--display);font-size:22px;letter-spacing:.02em}
.ha-contact a{color:#160b04;text-decoration:none;border-bottom:2px solid rgba(22,11,4,.3)}
.ha-contact a:hover{border-bottom-color:#160b04}

/* ---------- chan trang ---------- */
.ha-foot{padding:46px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line);background:var(--ink)}
.ha-foot-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}

/* ---------- man hinh doc / dien thoai ---------- */
@media (max-width:860px){
  .ha-nav-in{flex-wrap:wrap;height:auto;padding:12px 0 0;gap:12px}
  .ha-nav-links{order:3;flex:0 0 100%;gap:20px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ha-nav-links::-webkit-scrollbar{display:none}
  .ha-nav-links a{white-space:nowrap;font-size:12.5px}
  .ha-deal{grid-template-columns:1fr;gap:30px}
  .ha-deal-visual{max-width:460px}
}
@media (max-width:640px){
  .ha-profile{font-size:16px}
  .ha-wrap{padding:0 20px}
  .ha-sec{padding:58px 0}
  .ha-hero{padding-top:56px}
  .ha-hero-grid{gap:26px}
  .ha-hero .ha-lede,.ha-lede{font-size:17px}
  .ha-sec-head{margin-bottom:36px;gap:12px}
  #ha-wave{height:112px;margin-top:38px}
  .ha-btn{padding:14px 22px;font-size:12.5px;flex:1 1 auto;text-align:center}
  .ha-cta-row{gap:10px}
  .ha-partners-in{gap:12px 26px;padding:22px 0}
  .ha-partners .ha-p{font-size:16px}
  .ha-stat{padding:22px 18px}
  .ha-step{padding:26px 22px 28px}
  .ha-benefit{padding:28px 22px 30px}
  .ha-benefit h3{font-size:23px}
  .ha-proof-item{padding:30px 22px}
  .ha-projects{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .ha-deal{grid-template-columns:1fr;gap:26px}
  .ha-deal-figs{gap:14px 28px}
  .ha-deal-figs b{font-size:29px}
  .ha-cta{padding:62px 0}
  .ha-contact{gap:20px 32px;margin-top:28px}
  .ha-contact dd{font-size:19px}
  .ha-artists span{font-size:15px;padding:9px 15px}
}
@media (max-width:400px){
  .ha-hero h1{font-size:38px}
  .ha-cta-row{flex-direction:column}
  .ha-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  #ha-wave{display:none}
  .ha-project .ha-thumb img{transition:none}
}