/* ===========================================================
   WebPortal — Theme 2 "Aurora" (Modern Teal)
   Cùng CẤU TRÚC/THÀNH PHẦN với Theme 1, chỉ khác phong cách:
   xanh ngọc/teal + cam coral, nền sáng, bo góc lớn, kính mờ,
   nút bo tròn, gradient tươi. Giữ NGUYÊN tên biến để inline-style
   trong HTML tự đổi màu theo theme.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  /* vẫn dùng tên --navy-* / --gold-* nhưng gán tông teal + coral */
  --navy-900: #06302b;   /* nền tối nhất (footer) */
  --navy-800: #0b3b36;   /* primary đậm */
  --navy-700: #0f766e;   /* primary */
  --navy-600: #14b8a6;   /* teal sáng (dùng trong gradient) */
  --gold-500: #f97316;   /* accent coral/cam */
  --gold-400: #fb923c;
  --gold-600: #ea580c;
  --ink: #0f2a26;
  --muted: #5b7772;
  --line: #e3ece9;
  --bg-soft: #f1f7f5;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Montserrat",system-ui,sans-serif; color:var(--ink); background:#fff; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5 { font-family:"Montserrat","Montserrat",sans-serif; color:var(--navy-800); line-height:1.16; margin:0; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.container-wide { max-width:1360px; }

/* Eyebrow dạng pill + section title */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-700); background:rgba(15,118,110,.1); padding:7px 14px; border-radius:999px; }
.eyebrow::before, .eyebrow.center::after { display:none; }
.section-title { font-size:clamp(26px,3.2vw,42px); font-weight:700; line-height:1.2; letter-spacing:-.015em; margin-top:16px; }
.section-head { margin-bottom:48px; } .section-head.center { text-align:center; }
.lead { font-size:18px; color:var(--muted); }
.section { padding:100px 0; } .section-sm { padding:64px 0; }
.bg-soft { background:var(--bg-soft); }
.bg-navy { background:linear-gradient(135deg,var(--navy-800),var(--navy-700)); color:#fff; }
.bg-navy h1,.bg-navy h2,.bg-navy h3 { color:#fff; }
.hero h1,.hero h2,.page-banner h1,.page-banner h2 { color:#fff; }

/* Buttons — pill */
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 32px; border-radius:999px; font-weight:600; font-size:15px; transition:.25s; cursor:pointer; border:1px solid transparent; }
.btn-gold { background:var(--gold-500); color:#fff; box-shadow:0 10px 24px rgba(249,115,22,.32); }
.btn-gold:hover { background:var(--gold-600); transform:translateY(-2px); }
.btn-navy { background:var(--navy-700); color:#fff; }
.btn-navy:hover { background:var(--navy-800); transform:translateY(-2px); }
.btn-outline { border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover { background:rgba(255,255,255,.14); }
.btn-outline-navy { border-color:var(--navy-700); color:var(--navy-700); }
.btn-outline-navy:hover { background:var(--navy-700); color:#fff; }
.btn .ar { transition:.25s; } .btn:hover .ar { transform:translateX(4px); }

/* Top bar */
.topbar { background:var(--navy-900); color:#a9c7c1; font-size:13.5px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; height:42px; }
.topbar a:hover { color:#fff; } .topbar .sep { opacity:.3; margin:0 10px; }

/* Header — glass */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:.3s; }
.site-header .bar { display:flex; align-items:center; justify-content:space-between; height:82px; }
.brand { display:flex; align-items:center; gap:12px; font-family:"Montserrat"; font-weight:800; font-size:22px; color:var(--navy-800); }
.brand .logo { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--navy-700),var(--navy-600)); display:grid; place-items:center; color:#fff; font-size:20px; }
.nav { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav > li { position:relative; list-style:none; }
.nav > li:has(.dropdown) > a::after { content:""; display:inline-block; margin-left:8px; width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor; opacity:.5; transition:.25s; }
.nav > li:has(.dropdown):hover > a::after { transform:rotate(180deg); opacity:.9; }
.nav > li > a { display:flex; align-items:center; padding:11px 18px; margin:0 2px; font-weight:600; font-size:15px; color:var(--ink); border-radius:999px; transition:.2s; }
.nav > li > a:hover { color:var(--navy-700); background:rgba(15,118,110,.08); }
.dropdown { position:absolute; top:calc(100% + 6px); left:0; min-width:240px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 50px rgba(11,59,54,.14); padding:10px; opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; }
.nav > li:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a { display:block; padding:11px 16px; border-radius:12px; font-size:14.5px; color:var(--muted); }
.dropdown a:hover { background:var(--bg-soft); color:var(--navy-800); }
.header-cta { display:flex; align-items:center; gap:16px; }
.icon-btn { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--navy-800); border:1px solid var(--line); }
.icon-btn:hover { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.burger { display:none; font-size:26px; color:var(--navy-800); background:none; border:0; }

/* Hero — light, colorful overlay */
.hero { position:relative; min-height:90vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(6,48,43,.92) 0%, rgba(15,118,110,.72) 45%, rgba(20,184,166,.25) 100%); }
.hero .container { position:relative; z-index:1; }
.hero h1 { font-size:clamp(34px,5vw,66px); font-weight:700; max-width:20ch; line-height:1.2; letter-spacing:-.015em; margin:18px 0 0; }
.hero p { font-size:19px; color:#d8efea; max-width:56ch; margin:24px 0 0; line-height:1.75; }
.hero-actions { margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.scroll-ind { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1; color:#fff; opacity:.8; animation:bob 1.8s infinite; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }
.hero-dots { position:absolute; right:40px; top:50%; transform:translateY(-50%); z-index:2; display:flex; flex-direction:column; gap:10px; }
.hero-dots span { width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.6); cursor:pointer; }
.hero-dots span.active { background:var(--gold-500); border-color:var(--gold-500); }

/* Stats — soft cards */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; background:transparent; border:0; border-radius:0; }
.stat { background:#fff; padding:34px 28px; text-align:center; border-radius:var(--radius); border:1px solid var(--line); box-shadow:0 12px 30px rgba(11,59,54,.06); position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:46px; height:4px; border-radius:0 0 6px 6px; background:var(--gold-500); }
.stats.on-navy .stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; box-shadow:none; }
.stat .num { font-family:"Montserrat"; font-weight:800; font-size:44px; color:var(--navy-700); }
.stats.on-navy .stat .num { color:#fff; }
.stat .lbl { color:var(--muted); font-size:14px; margin-top:6px; }
.stats.on-navy .stat .lbl { color:#cfe7e2; }

/* Khối "Hệ sinh thái / Lĩnh vực" dạng thẻ icon */
.eco-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:22px; }
.eco-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 28px 24px; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  box-shadow:0 8px 24px rgba(11,59,54,.05); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.eco-card::before { content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:linear-gradient(var(--navy-700),var(--gold-500)); transform:scaleY(0); transform-origin:top; transition:transform .28s ease; }
.eco-card:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(11,59,54,.15); border-color:transparent; }
.eco-card:hover::before { transform:scaleY(1); }
.eco-card .ic { width:58px; height:58px; border-radius:15px; display:grid; place-items:center; font-size:26px; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600)); box-shadow:0 10px 22px rgba(11,59,54,.20); }
.eco-card h3 { margin:18px 0 8px; font-size:19px; }
.eco-card p { color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; flex:1; }
.eco-card .more { margin-top:18px; font-weight:700; font-size:13.5px; letter-spacing:.02em; color:var(--navy-700);
  display:inline-flex; align-items:center; gap:6px; transition:gap .2s ease, color .2s ease; }
.eco-card:hover .more { gap:11px; color:var(--gold-500); }

/* Cards / grid */
.grid { display:grid; gap:28px; } .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)}
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.3s; }
.card:hover { box-shadow:0 28px 55px rgba(11,59,54,.14); transform:translateY(-6px); }
.card .thumb { aspect-ratio:16/10; overflow:hidden; } .card .thumb img{ width:100%;height:100%;object-fit:cover;transition:.6s; }
.card:hover .thumb img { transform:scale(1.08); }
.card .body { padding:24px; }
.chip { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy-700); background:rgba(15,118,110,.1); padding:5px 12px; border-radius:999px; }

/* Framed image */
.framed { position:relative; }
.framed img { border-radius:var(--radius); position:relative; z-index:1; box-shadow:0 30px 60px rgba(11,59,54,.18); }
.framed::before { content:""; position:absolute; inset:22px -22px -22px 22px; border-radius:var(--radius); background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(20,184,166,.18)); z-index:0; }

/* Ecosystem tiles */
.eco { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:18px; }
.eco a { position:relative; border-radius:var(--radius); overflow:hidden; }
.eco a img { width:100%;height:100%;object-fit:cover; transition:.6s; } .eco a:hover img{ transform:scale(1.07); }
.eco a::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,48,43,.9),rgba(15,118,110,.05)); }
.eco a .cap { position:absolute; left:0; bottom:0; z-index:1; padding:22px; color:#fff; }
.eco a .cap h3 { color:#fff; font-size:19px; }
.eco a .cap .more { color:var(--gold-400); font-size:13px; font-weight:700; opacity:0; transform:translateY(8px); transition:.3s; }
.eco a:hover .cap .more { opacity:1; transform:translateY(0); }
.eco .big { grid-column:span 2; grid-row:span 2; }

/* Page banner — teal gradient + blob */
.page-banner { position:relative; color:#fff; padding:96px 0; text-align:center; overflow:hidden; background:linear-gradient(120deg,var(--navy-800),var(--navy-700)); }
.page-banner .pb-bg { position:absolute; inset:0; opacity:.28; }
.page-banner .pb-bg img { width:100%; height:100%; object-fit:cover; }
.page-banner .pb-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,var(--navy-800),rgba(15,118,110,.5)); }
.page-banner::before { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; background:rgba(249,115,22,.25); filter:blur(60px); }
.page-banner .container { position:relative; z-index:1; }
.page-banner h1 { font-size:clamp(30px,4vw,48px); font-weight:700; line-height:1.18; letter-spacing:-.015em; }
.crumb { margin-top:14px; font-size:14px; color:#cfe7e2; } .crumb a:hover{ color:#fff; } .crumb .s{ color:var(--gold-400); margin:0 8px; }

/* Timeline */
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:""; position:absolute; left:9px; top:0; bottom:0; width:2px; background:var(--line); }
.tl-item { position:relative; padding-bottom:44px; }
.tl-item::before { content:""; position:absolute; left:-39px; top:4px; width:20px; height:20px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 5px rgba(249,115,22,.18); }
.tl-year { font-family:"Montserrat"; font-weight:800; color:var(--navy-700); font-size:26px; }

/* IR / docs */
.ir-layout { display:grid; grid-template-columns:280px 1fr; gap:40px; }
.ir-menu a { display:flex; justify-content:space-between; padding:14px 18px; border-radius:14px; color:var(--muted); font-weight:600; }
.ir-menu a.active, .ir-menu a:hover { background:var(--navy-700); color:#fff; }
.doc-row { display:flex; align-items:center; gap:18px; padding:18px 20px; border-bottom:1px solid var(--line); transition:.2s; }
.doc-row:hover { background:var(--bg-soft); }
.doc-row .ic { width:42px; height:48px; display:grid; place-items:center; color:#d6453b; font-weight:800; font-size:12px; border:1px solid var(--line); border-radius:10px; }

/* Contact */
.contact-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:-70px; position:relative; z-index:2; }
.contact-card { background:#fff; border-radius:var(--radius); padding:32px 24px; text-align:center; box-shadow:0 20px 44px rgba(11,59,54,.12); }
.contact-card .ic { width:58px; height:58px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(15,118,110,.14),rgba(249,115,22,.14)); color:var(--navy-700); font-size:22px; }
.input { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font:inherit; outline:none; transition:.2s; }
.input:focus { border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(15,118,110,.14); }

/* Footer */
.footer { background:var(--navy-900); color:#9cc0ba; }
.footer a:hover { color:#fff; }
.footer .top { padding:72px 0 48px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer h4 { color:#fff; font-size:16px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:22px; }
.footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-size:14.5px; }
.footer .soc { display:flex; gap:12px; margin-top:20px; }
.footer .soc a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; }
.footer .soc a:hover { background:var(--gold-500); color:#fff; }
.footer .bottom { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:14px; display:flex; justify-content:space-between; }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* Responsive */
@media (max-width:1024px){ .g-4{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .eco{grid-template-columns:repeat(2,1fr)} .eco .big{grid-column:span 2;grid-row:span 1} .contact-cards{grid-template-columns:repeat(2,1fr)} .ir-layout{grid-template-columns:1fr} .footer .top{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .nav, .header-cta .icon-btn { display:none; } .burger{ display:block; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; } .section{ padding:64px 0; } .footer .top{ grid-template-columns:1fr; }
  .site-header.mobile-open .nav{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--line); box-shadow:0 24px 40px rgba(11,59,54,.16); padding:8px; max-height:78vh; overflow:auto; z-index:60; }
  .mobile-open .nav>li{ width:100%; } .mobile-open .nav>li>a{ padding:14px 16px; border-bottom:1px solid var(--line); border-radius:0; }
  .mobile-open .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-radius:0; padding:4px 0 10px 14px; min-width:0; }
  .mobile-open .dropdown a{ padding:9px 14px; font-size:14px; }
}

/* Biến cầu nối cho trang module (Bảng giá, Sản phẩm...) tự khớp accent của theme */
:root{ --site-accent: var(--gold-500); --site-accent-ink: #ffffff; }

/* ===== Tách biệt & điểm nhấn các khối trang chủ ===== */
/* Gạch nhấn gradient (teal -> coral) dưới tiêu đề mục căn giữa + các khối nhúng */
.section-head.center .section-title::after,
body .hx-head h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:999px;margin:16px auto 0;
  background:linear-gradient(90deg,var(--navy-700),var(--gold-500));
}
.section-head.center{display:flex;flex-direction:column;align-items:center}
/* Dải nền xen kẽ rõ hơn cho các khối nhúng (Đối tác/Quy trình/Khách hàng/Chứng nhận/FAQ) */
body .hx-sec.alt{background:var(--bg-soft)}
body .hx-head h2{font-weight:700;letter-spacing:-.015em;color:var(--navy-800)}