/* ===== HKD HOME v2 — Apple-style 3 tones, 1 màn hình desktop ===== */
:root{
  --hh-navy:#0f2a4a; --hh-line:#d3deee; --hh-bg:#eef3f9; --hh-muted:#6e6e73;
  --hh-ok:#34c759; --hh-warn:#ff9f0a; --hh-off:#c7c7cc;
  /* Row accents */
  --r1:#0071e3; --r1b:#e8f2ff; --r1c:#0077ed;
  --r2:#30b0c7; --r2g:#34c759; --r2b:#e8faf6;
  --r3:#5856d6; --r3p:#af52de; --r3b:#f3f0ff;
}
html.hkd-home-on,html.hkd-home-on body{overflow:hidden!important;height:100%!important}
#hkd-launcher.hh2{
  position:fixed;inset:0;z-index:99995;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:-apple-system,"SF Pro Display","SF Pro Text",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#1d1d1f;
  background:
    radial-gradient(1100px 520px at 8% -8%, rgba(0,113,227,.28), transparent 58%),
    radial-gradient(900px 480px at 108% 18%, rgba(88,86,214,.22), transparent 55%),
    linear-gradient(165deg,#0f2a4a 0%,#1b3d66 38%,#f5f5f7 38.15%,#fafafa 100%);
  padding:0;
  -webkit-font-smoothing:antialiased;
}
#hkd-launcher.hh2::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'><path d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/><circle cx='80' cy='80' r='28'/></g></svg>");
  background-size:160px 160px;
}
#hkd-launcher.hh2 .hkd-home-top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; background:rgba(15,42,74,.92); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); flex:0 0 auto;
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
}
#hkd-launcher.hh2 .hkd-home-top .brand{font-weight:700; letter-spacing:.12em; font-size:13px}
#hkd-launcher.hh2 .hkd-home-top .who{font-size:12px; opacity:.82; font-weight:600}
#hkd-launcher.hh2 .hkd-home-card{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0; max-width:1400px; width:100%;
  margin:10px auto 12px; padding:12px 14px 10px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(15,42,74,.14);
  backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px);
  display:flex; flex-direction:column; gap:8px;
}
#hkd-launcher.hh2 .hkd-home-head{display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:0}
#hkd-launcher.hh2 .kicker{font-size:10px; letter-spacing:.14em; font-weight:700; color:#6e6e73; text-transform:uppercase}
#hkd-launcher.hh2 .title{font-size:20px; font-weight:700; color:#1d1d1f; letter-spacing:-.01em; margin:2px 0}
#hkd-launcher.hh2 .rule{width:40px; height:3px; background:var(--r1); border-radius:2px; margin:4px 0}
#hkd-launcher.hh2 .sub{color:var(--hh-muted); font-size:12px; line-height:1.4; max-width:660px; font-weight:400}
#hkd-launcher.hh2 .acts{display:flex; gap:8px; align-items:center}
#hkd-launcher.hh2 #hkd-launch-q{
  border:1px solid rgba(0,0,0,.08); border-radius:980px; padding:8px 14px; min-width:220px;
  font:inherit; font-size:13px; background:rgba(255,255,255,.9); color:#1d1d1f;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#hkd-launcher.hh2 #hkd-launch-q:focus{outline:none; border-color:var(--r1); box-shadow:0 0 0 3px rgba(0,113,227,.18)}
#hkd-launcher.hh2 #hkd-launch-count{font-size:11px; font-weight:600; color:var(--hh-muted); white-space:nowrap}
#hkd-launcher.hh2 #hkd-launch-grid{flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px}
#hkd-launcher.hh2 .hkd-grp{
  display:flex; flex-direction:column; gap:6px; min-height:0;
  border-radius:16px; padding:8px 8px 8px;
  border:1px solid transparent;
}
#hkd-launcher.hh2 .hkd-grp-h{
  display:flex; align-items:center; gap:8px; margin:0 2px;
  font-size:11px; letter-spacing:.08em; font-weight:700; text-transform:uppercase;
}
#hkd-launcher.hh2 .hkd-grp-h:before{
  content:""; width:3px; height:14px; border-radius:2px; background:currentColor; flex:0 0 auto;
}
#hkd-launcher.hh2 .hkd-grp-h:after{content:""; flex:1; height:1px; opacity:.35; background:currentColor}
#hkd-launcher.hh2 .hkd-grp-h .n{
  font-size:10px; letter-spacing:.02em; font-weight:700;
  border-radius:980px; padding:2px 9px; border:1px solid transparent;
}

/* —— Row 1 Apple Blue —— */
#hkd-launcher.hh2 .hkd-grp[data-row="inv"]{
  background:linear-gradient(135deg, rgba(232,242,255,.95) 0%, rgba(0,113,227,.08) 100%);
  border-color:rgba(0,113,227,.14);
}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-grp-h{color:var(--r1)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-grp-h .n{background:#fff; color:var(--r1); border-color:rgba(0,113,227,.22)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-mod{border-color:rgba(0,113,227,.12)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-mod:hover{border-color:rgba(0,113,227,.35); box-shadow:0 10px 28px rgba(0,113,227,.16)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-mod .k{color:var(--r1)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-mod .go{color:var(--r1)}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hh-ico{
  filter:drop-shadow(0 2px 6px rgba(0,113,227,.18));
}

/* —— Row 2 Apple Teal/Green —— */
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"]{
  background:linear-gradient(135deg, rgba(232,250,246,.95) 0%, rgba(52,199,89,.10) 100%);
  border-color:rgba(48,176,199,.16);
}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-grp-h{color:#0a7c6b}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-grp-h .n{background:#fff; color:#0a7c6b; border-color:rgba(48,176,199,.25)}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod{border-color:rgba(48,176,199,.12)}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod:hover{border-color:rgba(52,199,89,.4); box-shadow:0 10px 28px rgba(48,176,199,.16)}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod .k{color:#0a7c6b}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod .go{color:#0a7c6b}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod .pill{background:rgba(52,199,89,.12); color:#1a7f37}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod.cur{border-color:#30b0c7; background:rgba(255,255,255,.95)}

/* —— Row 3 Apple Indigo/Purple —— */
#hkd-launcher.hh2 .hkd-grp[data-row="co"]{
  background:linear-gradient(135deg, rgba(243,240,255,.96) 0%, rgba(175,82,222,.10) 100%);
  border-color:rgba(88,86,214,.16);
}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-grp-h{color:var(--r3)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-grp-h .n{background:#fff; color:var(--r3); border-color:rgba(88,86,214,.25)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod{border-color:rgba(88,86,214,.12)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod:hover{border-color:rgba(175,82,222,.4); box-shadow:0 10px 28px rgba(88,86,214,.16)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod .k{color:var(--r3)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod .go{color:var(--r3)}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod .pill{background:rgba(88,86,214,.12); color:#4b49b6}

#hkd-launcher.hh2 .hkd-mod-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
#hkd-launcher.hh2 .hkd-grp[data-row="inv"] .hkd-mod-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
#hkd-launcher.hh2 .hkd-grp[data-row="hkd"] .hkd-mod-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
#hkd-launcher.hh2 .hkd-grp[data-row="co"] .hkd-mod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

#hkd-launcher.hh2 .hkd-mod{
  text-align:left;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:10px 10px 8px; cursor:pointer; min-height:0;
  display:flex; flex-direction:column; gap:4px; font-family:inherit;
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
#hkd-launcher.hh2 .hkd-mod:hover{transform:translateY(-2px); background:rgba(255,255,255,.92)}
#hkd-launcher.hh2 .hkd-mod.cur{border-width:2px; background:rgba(255,255,255,.95)}
#hkd-launcher.hh2 .hkd-mod .k{font-size:9px; letter-spacing:.08em; font-weight:700; text-transform:uppercase; display:flex; align-items:center; gap:6px}
#hkd-launcher.hh2 .hkd-mod h3{font-size:12px; font-weight:700; color:#1d1d1f; margin:0; line-height:1.25; letter-spacing:-.01em}
#hkd-launcher.hh2 .hkd-mod p{color:#6e6e73; font-size:10.5px; line-height:1.35; margin:0; flex:1}
#hkd-launcher.hh2 .hkd-mod .pill{
  align-self:flex-start; font-size:10px; font-weight:700; padding:2px 8px; border-radius:980px;
  background:rgba(0,0,0,.05); color:#3a3a3c;
}
#hkd-launcher.hh2 .hkd-mod .go{font-size:10px; font-weight:650; letter-spacing:.01em}
#hkd-launcher.hh2 .hkd-mod .hh-ico{
  width:28px; height:28px; flex:0 0 auto; border-radius:8px;
}
#hkd-launcher.hh2 .hkd-mod .hh-rowtop{display:flex; align-items:flex-start; justify-content:space-between; gap:6px}
#hkd-launcher.hh2 .hkd-mod .hh-dot{
  width:9px; height:9px; border-radius:50%; background:var(--hh-off);
  box-shadow:0 0 0 3px rgba(199,199,204,.35); flex:0 0 auto; margin-top:2px;
}
#hkd-launcher.hh2 .hkd-mod .hh-dot.on{background:var(--hh-ok); box-shadow:0 0 0 3px rgba(52,199,89,.22)}
#hkd-launcher.hh2 .hkd-mod .hh-dot.warn{background:var(--hh-warn); box-shadow:0 0 0 3px rgba(255,159,10,.22)}
#hkd-launcher.hh2 .hkd-mod.inv{min-height:96px}
#hkd-launcher.hh2 .hkd-mod.tax{min-height:108px}
#hkd-launcher.hh2 .hkd-launch-empty{color:var(--hh-muted); font-size:13px; padding:18px; text-align:center}
#hkd-launcher.hh2 .hh-st{font-size:10px; font-weight:600; color:var(--hh-muted)}

/* portal overlay */
#hh-portal{position:fixed;inset:0;z-index:2147483000;background:rgba(15,42,74,.55);display:flex;flex-direction:column;padding:10px;box-sizing:border-box}
#hh-portal .hh-bar{display:flex;gap:8px;align-items:center;background:#0f2a4a;color:#fff;padding:8px 12px;border-radius:10px 10px 0 0;font-weight:700;font-family:-apple-system,Inter,Roboto,sans-serif}
#hh-portal .hh-bar b{flex:1;font-size:13px}
#hh-portal .hh-bar button{background:#fff;color:#0f2a4a;border:0;border-radius:8px;padding:6px 12px;font-weight:700;cursor:pointer}
#hh-portal iframe{flex:1;width:100%;border:0;border-radius:0 0 10px 10px;background:#fff;min-height:0}

@media (max-width:1366px){
  #hkd-launcher.hh2 .title{font-size:17px}
  #hkd-launcher.hh2 .hkd-mod h3{font-size:11px}
  #hkd-launcher.hh2 .hkd-home-card{margin:8px auto; padding:10px}
}
@media (max-width:1024px){
  html.hkd-home-on,html.hkd-home-on body{overflow:auto!important;height:auto!important}
  #hkd-launcher.hh2{overflow:auto; display:block}
  #hkd-launcher.hh2 .hkd-home-card{height:auto; max-height:none}
  #hkd-launcher.hh2 #hkd-launch-grid{overflow:visible}
  #hkd-launcher.hh2 .hkd-grp[data-row] .hkd-mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:640px){
  #hkd-launcher.hh2 .hkd-grp[data-row] .hkd-mod-grid{grid-template-columns:1fr!important}
  #hkd-launcher.hh2 #hkd-launch-q{min-width:0; width:100%}
}