/* ===== TechTide header — Adobe-style ===== */
/* CHỈ file này đổi. header.js + functions.php GIỮ NGUYÊN. */
/* Dùng :has() để biến hình thanh menu → cần trình duyệt hiện đại (2023+); trình rất cũ sẽ degrade nhẹ. */

:root{
  /* ============ CHỈNH NHANH Ở ĐÂY ============ */
  --tt-bar-h: 64px;            /* cao thanh/pill (Adobe) */
  --tt-bar-top: 5px;           /* khe hở từ mép trên xuống pill (Adobe) */
  --tt-bar-maxw: 1904px;       /* bề rộng tối đa pill (Adobe) */
  --tt-bar-side: 8px;          /* lề tối thiểu 2 bên pill */
  --tt-bar-pad: 28px;          /* padding nội dung trong pill (logo↔mép) */
  --tt-bar-radius: 16px;       /* bo góc pill (Adobe) */
  --tt-nav-fz: .95rem;         /* cỡ chữ menu (đổi font ở bước sau) */
  --tt-chev-w: 7px;            /* mũi tên xổ (nhỏ ~70%) */

  --tt-mega-maxw: 1920px;      /* bề rộng nội dung dropdown (Adobe) */
  --tt-mega-cols: 6;           /* số cột thẻ */
  --tt-mega-gap: 8px;          /* khoảng cách thẻ */
  --tt-card-radius: 12px;      /* bo góc thẻ */
  --tt-card-pad: 24px;         /* padding trong thẻ */

  --tt-panel-bg: #f3f3f3;                 /* nền panel khi mở (Adobe) */
  --tt-pill-bg: rgba(255,255,255,.51);    /* nền pill khi cuộn (Adobe) */
  --tt-ease: cubic-bezier(.42,0,.2,1);
  --tt-shadow: 0 67px 19px rgba(0,0,0,0), 0 43px 17px rgba(0,0,0,.01), 0 24px 14px rgba(0,0,0,.04), 0 11px 11px rgba(0,0,0,.07), 0 3px 6px rgba(0,0,0,.08);
}

/* chừa chỗ cho header fixed */
body.tt-has-solid-header, body.tt-has-transparent-header{ padding-top: calc(var(--tt-bar-top) + var(--tt-bar-h)); }

.tt-header{ position:fixed; inset:0 0 auto 0; z-index:1000; }
.tt-header *{ box-sizing:border-box; }

/* ----- bits dùng chung ----- */
.tt-header__logo{ display:flex; align-items:center; flex:0 0 auto; }
.tt-header__logo img{ height:34px; width:auto; display:block; }
.tt-header__logo a{ font-family:var(--tt-font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; color:var(--tt-ink); text-decoration:none; transition:color .2s ease; }
.tt-logo-desktop{ display:inline-flex; align-items:center; line-height:0; }
.tt-logo-mobile{ display:none; }
.tt-logo-mobile img{ height:36px; width:auto; }

/* Logo: luôn dùng bản màu (đen) ở mọi trạng thái — không đổi trắng/đen nữa. */

.tt-chev{ width:var(--tt-chev-w); height:auto; transition:transform .3s var(--tt-ease); }

.tt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--tt-font-body); font-weight:600; font-size:.9rem; padding:.55rem 1.35rem; border-radius:999px; background:transparent; color:var(--tt-ink); border:1.5px solid var(--tt-ink); cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.tt-btn:hover{ background:var(--tt-ink); color:#fff; }

.tt-mega__link{ text-decoration:none; color:var(--tt-ink) !important; }
.tt-mega__title{ font-family:var(--tt-font-display); }

.tt-mega__back{ display:none; }
.tt-scrim{ display:none; }
.tt-burger{ display:none; }
.tt-header a:focus-visible, .tt-header button:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px; border-radius:8px; }

/* (đã bỏ trạng thái "trắng ở top" — header luôn chữ/logo ĐEN; nút Contact một kiểu viền đen) */

/* ======================= DESKTOP (≥1025px) ======================= */
@media (min-width:1025px){

  .tt-header{ padding-top: var(--tt-bar-top); }   /* khe hở 5px trên */

  /* LỚP NỀN: pill (đóng/cuộn) ↔ panel xám full màn (mở) — biến hình, .48s */
  .tt-header::before{
    content:""; position:absolute; top: var(--tt-bar-top); left:50%; transform:translateX(-50%);
    width: min(100% - var(--tt-bar-side)*2, var(--tt-bar-maxw));
    height: var(--tt-bar-h);
    border-radius: var(--tt-bar-radius);
    background: transparent;
    -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    box-shadow:none; z-index:-1;
    transition: top .48s var(--tt-ease), height .48s var(--tt-ease), width .48s var(--tt-ease), background .48s var(--tt-ease), border-radius .48s var(--tt-ease), box-shadow .48s var(--tt-ease), backdrop-filter .48s var(--tt-ease);
  }
  .tt-header.is-scrolled::before{
    background: var(--tt-pill-bg);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: var(--tt-shadow);
  }

  /* HÀNG: logo trái + menu SÁT NGAY SAU LOGO — Contact dồn phải */
  .tt-header__inner{
    width: min(100% - var(--tt-bar-side)*2, var(--tt-bar-maxw));
    margin-inline:auto;
    height: var(--tt-bar-h);
    display:flex; align-items:center; gap:1rem;
    padding: 0 var(--tt-bar-pad);
  }
  .tt-nav{ flex:0 0 auto; margin-left:1rem; }          /* menu sát sau logo; +1rem (tổng ~2rem) cho thoáng */
  .tt-nav__list{ display:flex; align-items:center; justify-content:flex-start; gap:.1rem; list-style:none; margin:0; padding:0; }
  .tt-nav__link, .tt-nav__trigger{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--tt-font-body); font-size:var(--tt-nav-fz); font-weight:500; line-height:1; color:var(--tt-ink); padding:.5rem .7rem; border-radius:8px; background:none; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; transition:color .2s ease, opacity .2s ease; }
  .tt-nav__link:hover, .tt-nav__trigger:hover{ opacity:.6; }   /* chỉ làm mờ, KHÔNG xổ */
  .tt-header__actions{ display:flex; align-items:center; gap:.75rem; flex:0 0 auto; margin-left:auto; }   /* Contact dồn về phải */

  /* nav luôn chữ đen */

  /* MEGA: panel xám full màn — XỔ bằng chiều cao, đồng bộ .48s với lớp nền (một khối) */
  .tt-has-mega{ position:static; }
  .tt-mega{
    position:absolute; top: calc(var(--tt-bar-top) + var(--tt-bar-h)); left:0; right:0;
    display:grid; grid-template-rows:0fr;
    background: var(--tt-panel-bg);
    border-radius: 0 0 var(--tt-bar-radius) var(--tt-bar-radius);
    box-shadow:none;
    transition: grid-template-rows .48s var(--tt-ease), box-shadow .48s var(--tt-ease);
    z-index:1;
  }
  .tt-mega > *{ min-height:0; overflow:hidden; }

  /* CHỈ mở khi CLICK (.is-open). Không hover, không focus tự mở. */
  .tt-has-mega.is-open > .tt-mega{ grid-template-rows:1fr; box-shadow: var(--tt-shadow); }

  /* khi mở: lớp nền hóa xám full màn, kéo lên top:0 lấp khe → liền khối với panel */
  .tt-header:has(.tt-has-mega.is-open)::before{
    top:0; height: calc(var(--tt-bar-top) + var(--tt-bar-h));
    width:100%; background: var(--tt-panel-bg);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-radius:0; box-shadow:none;
  }
  /* mở → chữ ĐEN (nền xám), kể cả đang ở top */
  .tt-header:has(.tt-has-mega.is-open) .tt-nav__link,
  .tt-header:has(.tt-has-mega.is-open) .tt-nav__trigger,
  .tt-header:has(.tt-has-mega.is-open) .tt-header__logo a{ color:var(--tt-ink); }
  .tt-header:has(.tt-has-mega.is-open) .tt-btn{ color:var(--tt-ink); border-color:var(--tt-ink); }
  .tt-header:has(.tt-has-mega.is-open) .tt-btn:hover{ background:var(--tt-ink); color:#fff; }
  .tt-has-mega.is-open .tt-chev{ transform:rotate(180deg); }

  /* lưới thẻ: 5 cột co giãn (cap 1920 → tối đa 368px), <5 canh giữa, cao bằng nhau */
  .tt-mega__grid{
    display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:stretch;
    gap: var(--tt-mega-gap);
    width:100%; max-width: var(--tt-mega-maxw); margin-inline:auto;
    padding: 0 24px;   /* BỎ padding dọc → panel co được về 0 (hết dải 52px) */
  }
  /* đệm trên/dưới panel bằng spacer full-width — bị cắt sạch khi đóng nên không lòi */
  .tt-mega__grid::before{ content:""; flex:0 0 100%; height:16px; }
  .tt-mega__grid::after{ content:""; flex:0 0 100%; height:20px; }
  .tt-mega__link{
    flex: 0 0 calc((100% - (var(--tt-mega-cols) - 1) * var(--tt-mega-gap)) / var(--tt-mega-cols));
    display:flex; flex-direction:column;
    background:#fff; border:1px solid #e2e2de; border-radius:6px; padding: var(--tt-card-pad);
    box-shadow: rgba(0,0,0,.1) 0 4px 8px -2px, rgba(0,0,0,.06) 0 2px 4px -2px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .tt-mega__link:hover{ transform:translateY(-3px); box-shadow: rgba(0,0,0,.12) 0 14px 28px -8px, rgba(0,0,0,.07) 0 4px 8px -3px; }
  .tt-mega__title{ font-weight:600; font-size:1.25rem; line-height:1.3; }
  .tt-mega__desc{ color:rgba(0,0,0,.55); font-size:.925rem; line-height:1.55; margin-top:.5rem; }
  .tt-mega__link::after{ content:"Explore \2192"; margin-top:auto; padding-top:1.25rem; align-self:flex-start; color:var(--tt-ink); font-family:var(--tt-font-body); font-weight:600; font-size:1rem; }
  .tt-mega__link:hover::after{ text-decoration:underline; text-underline-offset:4px; }
}

/* ======================= MOBILE (≤1024px) ======================= */
@media (max-width:1024px){
  /* THANH: logo trái – "=" kế bên – Contact phải */
  .tt-header__inner{
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:"logo burger . actions";
    align-items:center; column-gap:.4rem;
    height:var(--tt-bar-h); padding:0 16px;
    transition: background .25s ease, margin .25s ease, border-radius .25s ease;
  }
  .tt-header__logo{ grid-area:logo; }
  .tt-burger{ grid-area:burger; }
  .tt-header__actions{ grid-area:actions; }

  /* cuộn xuống → pill (bo 16 như Adobe) */
  .tt-header.is-scrolled .tt-header__inner{ margin:8px 8px 0; padding:0 10px 0 16px; border-radius:var(--tt-bar-radius); background:var(--tt-pill-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--tt-shadow); }

  .tt-logo-desktop{ display:none; }
  .tt-logo-mobile{ display:flex; align-items:center; }

  /* burger "=" hai gạch → X */
  .tt-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:7px; width:42px; height:42px; padding:10px 8px; background:none; border:0; cursor:pointer; color:var(--tt-ink); position:relative; z-index:2; }
  .tt-burger span{ display:block; width:100%; height:2.5px; background:currentColor; border-radius:3px; transition:transform .28s ease, opacity .2s ease; }
  .tt-burger span:nth-child(2){ display:none; }
  body.tt-menu-open .tt-burger span:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
  body.tt-menu-open .tt-burger span:nth-child(3){ transform:translateY(-4.75px) rotate(-45deg); }

  .tt-scrim{ display:none; }   /* panel xám full màn thay cho lớp scrim */

  /* ===== MỞ MENU: panel XÁM full màn hình ===== */
  body.tt-menu-open{ overflow:hidden; }
  /* thanh hóa xám, full ngang, vuông góc (nối với panel) */
  body.tt-menu-open .tt-header > .tt-header__inner{ background:var(--tt-panel-bg); margin:0; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  /* mở menu: burger ĐEN trên nền xám (logo vốn đã đen) */
  body.tt-menu-open .tt-header .tt-burger{ color:var(--tt-ink); }

  /* danh sách = overlay riêng dưới thanh, full màn, CUỘN nội bộ (thanh giữ cố định) */
  .tt-nav{
    position:fixed; top:var(--tt-bar-h); left:0; right:0; bottom:0;
    background:var(--tt-panel-bg); overflow-y:auto;
    padding:16px 20px 96px;
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--tt-ease), visibility .3s;
    z-index:899;
  }
  body.tt-menu-open .tt-nav{ opacity:1; visibility:visible; }
  .tt-nav__list{ display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
  .tt-nav__item{ border-bottom:1px solid rgba(10,10,10,.08); }
  .tt-nav__item:last-child{ border-bottom:0; }

  /* mục cấp 1 = hàng bấm + chevron */
  .tt-nav__link, .tt-nav__trigger{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:.4rem; font-family:var(--tt-font-body); font-size:1.15rem; font-weight:600; color:var(--tt-ink); padding:1.05rem 2px; background:none; border:0; border-radius:0; cursor:pointer; text-decoration:none; }
  .tt-nav__trigger .tt-chev{ width:12px; transform:rotate(-90deg); transition:transform .3s var(--tt-ease); }
  .tt-has-mega.is-open > .tt-nav__trigger .tt-chev{ transform:rotate(0deg); }

  /* accordion → mục con = THẺ trắng bo tròn */
  .tt-has-mega{ position:static; }
  .tt-mega{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--tt-ease); }
  .tt-has-mega.is-open > .tt-mega{ grid-template-rows:1fr; }
  .tt-mega > *{ min-height:0; overflow:hidden; }
  .tt-mega__grid{ display:flex; flex-direction:column; gap:8px; }   /* KHÔNG padding dọc (để co về 0) */
  .tt-mega__grid::before{ content:""; height:2px; }   /* đệm trên (bị cắt khi đóng) */
  .tt-mega__grid::after{ content:""; height:10px; }    /* đệm dưới (bị cắt khi đóng) */
  .tt-mega__link{ display:flex; flex-direction:column; gap:.2rem; background:none; border-radius:0; padding:10px 2px; box-shadow:none; }
  .tt-mega__title{ font-size:1.05rem; font-weight:600; line-height:1.3; color:var(--tt-ink); }
  .tt-mega__desc{ display:block; color:var(--tt-ink-soft); font-size:.9rem; line-height:1.45; margin:0; }
}
/* ===== Khi đã đăng nhập WP: chừa chỗ cho admin toolbar (đẩy header + panel menu xuống dưới thanh đen) =====
   WP thêm class .admin-bar vào <body> + đẩy trang xuống 32px (≤782px: 46px). Header & panel menu mobile fixed nên phải bù top. */
body.admin-bar .tt-header{ top: 32px; }
@media screen and (max-width: 1024px){
  body.admin-bar .tt-nav{ top: calc(var(--tt-bar-h) + 32px); }
}
@media screen and (max-width: 782px){
  body.admin-bar .tt-header{ top: 46px; }
  body.admin-bar .tt-nav{ top: calc(var(--tt-bar-h) + 46px); }
}