/*
Theme Name: HTE Global — Light
Theme URI: https://hteglobal.net
Template: hte-global
Author: HTE Global
Description: Phiên bản GIAO DIỆN SÁNG (sang trọng, tối giản, nhiều ảnh — phong cách showroom) cho HTE Global. Child theme của "HTE Global", tái dùng toàn bộ nội dung & chức năng. Kích hoạt để chuyển sang tông sáng; quay lại "HTE Global" cho tông tối.
Version: 1.0.0
Requires at least: 6.0
License: GNU General Public License v2 or later
Text Domain: hte-global-light
*/

@import url("../hte-global/style.css?v=18");

/* ============================================================
   THEME SÁNG kiểu CDC — tông ấm kem/be, font Plus Jakarta Sans
   ============================================================ */
:root{
  --bg:oklch(0.986 0.006 85);           /* kem ấm nhạt */
  --bg-2:oklch(0.958 0.009 82);         /* be nhạt */
  --bg-3:oklch(0.928 0.012 80);
  --ink:oklch(0.26 0.012 60);           /* nâu-đen ấm */
  --muted:oklch(0.37 0.016 62);         /* đậm hơn để đạt WCAG AA cả trên nền be nhạt (footer) */
  --faint:oklch(0.5 0.014 62);
  --brass:oklch(0.6 0.085 62);          /* nâu vàng ấm (tan/bronze) */
  --brass-deep:oklch(0.52 0.09 58);
  --blue:oklch(0.52 0.13 245);
  --line:oklch(0.28 0.012 60 / 0.14);
  --line-2:oklch(0.28 0.012 60 / 0.08);
  --sans:"Plus Jakarta Sans",system-ui,sans-serif;
  --disp:"Plus Jakarta Sans",system-ui,sans-serif;
}
body{background:var(--bg);color:var(--ink);letter-spacing:0}
h1,h2,h3,h4{letter-spacing:-.02em}
::selection{background:var(--brass);color:#fff}

/* ============================================================
   HEADER kiểu CDC: logo canh giữa, menu 2 bên
   ============================================================ */
.cdc-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.cdc-side{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem)}
.cdc-side a{font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .3s;position:relative;padding:6px 0}
.cdc-side a:hover{color:var(--ink)}
.cdc-side a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-out)}
.cdc-side a:hover::after{transform:scaleX(1)}
.cdc-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.cdc-logo img.custom-logo,.cdc-logo .custom-logo-link img{height:50px!important;width:auto!important}
.cdc-right-wrap{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem)}
.site-header.cdc-header{padding:16px 0}
.site-header.cdc-header.scrolled{padding:10px 0}

@media(max-width:1000px){
  /* header CDC mobile: logo giữa, burger PHẢI */
  .cdc-side,.cdc-right-wrap{display:none}
  .cdc-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .cdc-logo img.custom-logo,.cdc-logo .custom-logo-link img{height:34px!important}
  .cdc-nav{justify-content:flex-start;min-height:38px}
  .cdc-nav .burger{display:flex;margin-left:auto}
  .site-header.cdc-header{padding:12px 0}

  /* HERO kiểu CDC: ẢNH TRÊN, CHỮ DƯỚI (nền kem, không đè chữ lên ảnh) */
  .hero{min-height:auto;display:flex;flex-direction:column}
  .hero-bg{position:relative;inset:auto;height:46vh;min-height:300px}
  .hero-bg img{animation:none;transform:none;object-position:center center}
  /* ảnh sạch, chỉ hoà nhẹ vào nền kem ở đáy (không còn lớp phủ tối gây lệch) */
  .hero-bg::after{background:linear-gradient(to top,var(--bg) 0%,transparent 10%)}
  .hero-inner{position:relative;padding:2.2rem clamp(20px,5vw,40px) 2.6rem!important;width:100%}
  /* nút hero cân đối: tự rộng theo nội dung, không full-width trống trải */
  .hero-cta{flex-direction:row!important;flex-wrap:wrap;gap:.8rem}
  .hero-cta .btn{width:auto!important;flex:0 0 auto;justify-content:center}
  .hero .eyebrow{color:var(--brass-deep)!important}
  .hero h1,.hero h1 span{color:var(--ink)!important;font-size:clamp(1.9rem,7.6vw,2.6rem);text-shadow:none!important}
  .hero h1 em{color:var(--brass)!important}
  .hero .hero-lead{color:oklch(0.36 0.014 62)!important;text-shadow:none!important;margin-top:1rem;max-width:none}
  .hero-cta{margin-top:1.6rem}
  .hero-fields{border-top-color:var(--line);margin-top:1.9rem}
  .hero-fields b{color:var(--ink)!important}
  .hero-fields small{color:var(--faint)!important}
  .scroll-cue{display:none}
}

/* ---------- header sáng: nền kem ấm đặc (như CDC) ---------- */
.site-header{background:oklch(0.986 0.006 85 / .94);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line-2);padding:14px 0}
.site-header.scrolled{background:oklch(0.986 0.006 85 / .98);padding:10px 0;box-shadow:0 2px 24px oklch(0.28 0.012 60 / .07)}
.menu a{color:var(--muted)}
.menu a:hover,.menu .current-menu-item>a{color:var(--ink)}
.burger span{background:var(--ink)}
.lang a,.lang button{color:var(--muted)}
.brand-txt b{color:var(--ink)}

/* ---------- hero: ảnh + phủ sáng, chữ trắng vẫn giữ ---------- */
/* Lớp phủ tối đủ mạnh ở vùng chữ (đáy + trái) để chữ trắng KHÔNG bị chìm vào ảnh sáng */
.hero-bg::after{background:
  linear-gradient(to top,oklch(0.14 0.02 250 / .86) 0%,oklch(0.14 0.02 250 / .5) 24%,transparent 56%),
  linear-gradient(to right,oklch(0.14 0.02 250 / .66) 0%,transparent 64%),
  linear-gradient(to bottom,oklch(0.14 0.02 250 / .34) 0%,transparent 30%)}
.hero h1,.hero-lead,.hero-fields b,.hero-fields small,.scroll-cue{color:#fff}
.hero-lead{color:oklch(0.98 0.004 250)}
/* Nút phụ (ghost) trên ảnh tối: chữ trắng + viền sáng để không bị chìm */
.hero .btn-ghost{color:#fff;border-color:oklch(1 0 0 / .55);background:oklch(0.14 0.02 250 / .28);backdrop-filter:blur(2px)}
.hero .btn-ghost:hover{color:#fff;border-color:#fff;background:oklch(0.14 0.02 250 / .5)}
.hero-fields b{color:#fff}
.hero-fields small{color:oklch(0.9 0.006 250)}
.hero-fields{border-top-color:oklch(1 0 0 / .32)}
.hero h1,.hero-lead{text-shadow:0 2px 24px oklch(0.12 0.02 60 / .55)}

/* ---------- marquee sáng ---------- */
.marquee{background:var(--bg-2)}
.marquee-track{color:var(--faint)}
.marquee-track b{color:var(--ink)}

/* ---------- sections nền sáng ---------- */
.process,.presence,.clients{background:var(--bg-2)}
.about-vis{background:linear-gradient(160deg,#fff,var(--bg-2));box-shadow:0 8px 40px oklch(0.22 0.01 250 / .05)}
.stats,.proj-info{background:var(--line-2)}
.stat,.proj-info .pi{background:#fff}
.svc{background:#fff;box-shadow:0 4px 24px oklch(0.22 0.01 250 / .04)}
.svc:hover{background:#fff;box-shadow:0 14px 40px oklch(0.22 0.01 250 / .1)}
.values span{border-color:var(--line)}

/* ---------- PROJECT CARDS sáng (bố cục ảnh-trên dùng chung từ theme gốc) ---------- */
.card{background:#fff;border-color:var(--line-2);box-shadow:0 6px 30px oklch(0.22 0.01 250 / .07)}
.card img{filter:none}
.card h3{color:var(--ink)}
.card .card-meta{color:var(--muted)}
.card:hover{border-color:var(--brass);box-shadow:0 18px 50px oklch(0.22 0.01 250 / .14)}

/* ---------- offices / team / news sáng ---------- */
.office,.member,.job,.post-card{background:#fff}
.office{border-color:var(--line-2)}
.member{background:var(--bg)}
.post-card{border-color:var(--line-2);box-shadow:0 6px 30px oklch(0.26 0.012 60 / .07)}
.post-card:hover{border-color:var(--brass);box-shadow:0 18px 50px oklch(0.26 0.012 60 / .14)}
.post-img img{filter:none}
.post-card:hover .post-img img{filter:none}
.entry p{color:oklch(0.3 0.01 250)}

/* ---------- filter sáng ---------- */
.proj-filter button{color:var(--muted);border-color:var(--line)}
.proj-filter button:hover{color:var(--ink)}

/* ---------- CTA sáng ---------- */
.cta::before{background:radial-gradient(60% 100% at 50% 0%,oklch(0.66 0.14 70 / .08),transparent 70%)}
.cta-phone a{color:var(--ink)}

/* ---------- footer sáng ---------- */
.site-footer{background:var(--bg-2);border-top-color:var(--line)}
.foot-col a,.foot-brand p,.foot-bot{color:var(--muted)}
.socials a{border-color:var(--line);color:var(--muted)}

/* ---------- CF7 sáng ---------- */
.wpcf7 input,.wpcf7 select,.wpcf7 textarea{background:#fff;border-color:var(--line);color:var(--ink)}

/* ---------- drawer sáng ---------- */
.drawer{background:oklch(1 0 0 / .98)}
.drawer a{color:var(--ink)}

/* ---------- client logo chip: viền nhẹ trên nền sáng ---------- */
.client-logo{box-shadow:0 4px 20px oklch(0.28 0.012 60 / .08);border:1px solid var(--line-2)}

/* ---------- dot navigation dọc (kiểu CDC) ---------- */
.cdc-dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:15px;align-items:flex-end}
.cdc-dots a{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);position:relative;transition:transform .35s var(--e-out),background .35s,border-color .35s}
.cdc-dots a:hover,.cdc-dots a.on{background:var(--brass);border-color:var(--brass);transform:scale(1.25)}
.cdc-dots a::after{content:attr(data-t);position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.03em;color:var(--ink);background:var(--bg);padding:4px 11px;border-radius:3px;box-shadow:0 3px 16px oklch(0.28 0.012 60 / .14);opacity:0;pointer-events:none;transition:opacity .3s}
.cdc-dots a:hover::after{opacity:1}
@media(max-width:1100px){.cdc-dots{display:none}}

/* cuộn mượt hơn + tránh section bị header che khi nhảy dot */
html{scroll-padding-top:90px}
.hero-lead,.hero h1{text-shadow:0 2px 30px oklch(0.15 0.02 60 / .35)}

/* ===== P1 (WCAG AA): chữ NHỎ màu brass trên nền kem quá nhạt (3.88:1) -> dùng brass-deep (5.4:1) ===== */
.eyebrow,
.office .role,
.post-card .rd,
.card-cat,
.member-role,
.breadcrumbs a:hover{ color: var(--brass-deep); }
/* Hero eyebrow trên ẢNH (desktop) giữ brass sáng để nổi trên nền tối */
.hero .eyebrow{ color: var(--brass); }