/* Catsky Office — bảng giới thiệu, hướng dẫn từng bước, nhắc Unikey, phân quyền ứng dụng (kính lỏng, cùng phong cách style.css) */
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 7px;margin:0 1px;border-radius:7px;font:600 11.5px/1 var(--ui);color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 0 rgba(0,0,0,.35);vertical-align:middle}
.kplus{opacity:.6;margin:0 3px;font-weight:600}

/* ---------- lớp phủ + thẻ ---------- */
.ob-ov{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:18px;background:radial-gradient(120% 90% at 50% 0%,rgba(40,30,80,.55),rgba(8,6,16,.72));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:obFade .3s var(--ease) both;user-select:text;-webkit-user-select:text}
.ob-ov.out{animation:obFade .25s reverse both}
@keyframes obFade{from{opacity:0}to{opacity:1}}
.ob-card{position:relative;width:min(780px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:30px;padding:28px 28px 22px;animation:obPop .5s var(--spring) both}
@keyframes obPop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.ob-x{position:absolute;right:14px;top:14px;z-index:4;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--fill);transition:background .2s,transform .25s var(--spring)}
.ob-x:hover{background:var(--fill2);transform:rotate(90deg)}.ob-x .ic{width:18px;height:18px}
.ob-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}.ob-act .sp{flex:1}
.ob-sub{color:var(--muted);font-size:13px;line-height:1.55;margin:4px 0 14px}.ob-sub.small{font-size:12px;margin-top:12px}.ob-sub b{color:#fff}
.ob-card h2{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:26px;letter-spacing:-.01em}

/* ---------- giới thiệu ---------- */
.ob-intro{padding:0 0 22px}
.ob-hero{position:relative;display:flex;align-items:center;gap:18px;padding:34px 30px 26px;border-radius:30px 30px 0 0;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,140,90,.45),transparent 55%),radial-gradient(120% 140% at 100% 0%,rgba(110,90,255,.5),transparent 55%),radial-gradient(90% 120% at 60% 120%,rgba(40,200,220,.35),transparent 60%)}
.ob-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);animation:obShine 4s 1s ease-in-out infinite;pointer-events:none}
@keyframes obShine{60%,100%{transform:translateX(120%)}}
.ob-logo{flex:none;width:78px;height:78px;border-radius:24px;display:grid;place-items:center;font-size:40px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -10px rgba(0,0,0,.6);animation:obBob 3.2s ease-in-out infinite}
.ob-logo img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
@keyframes obBob{50%{transform:translateY(-6px) rotate(-3deg)}}
.ob-hero small{font-size:11px;letter-spacing:.16em;font-weight:700;color:rgba(255,255,255,.75)}
.ob-hero h2{font-size:clamp(24px,4vw,32px);line-height:1.15;margin:2px 0 6px}
.ob-hero p{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.5}
.ob-mission{margin:20px 28px 0;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(255,214,10,.14),rgba(255,140,90,.08));box-shadow:inset 0 0 0 1px rgba(255,214,10,.25)}
.ob-mission b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffd60a;margin-bottom:6px}
.ob-mission p{font-size:14px;line-height:1.65;color:#fff}
.ob-h{margin:20px 28px 10px;font-size:13px;color:var(--muted);font-weight:600}
.ob-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0 28px}
.ob-blk{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:18px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);animation:obPop .55s var(--spring) both;animation-delay:calc(.15s + var(--i)*.06s);transition:transform .25s var(--spring),background .2s}
.ob-blk:hover{transform:translateY(-3px);background:var(--fill2)}
.ob-blk span{font-size:24px;line-height:1.2}.ob-blk b{font-size:14px}.ob-blk small{font-size:12.5px;color:var(--muted);line-height:1.5}
.ob-uknote{display:flex;align-items:center;gap:10px;margin:14px 28px 0;padding:10px 14px;border-radius:14px;background:rgba(10,132,255,.14);box-shadow:inset 0 0 0 1px rgba(100,181,255,.3);font-size:12.5px;color:#d7e9ff;line-height:1.6}
.ob-uknote .ic{width:22px;height:22px;flex:none;color:var(--acc2)}
.ob-note{margin:12px 28px 0;font-size:13px;color:var(--muted)}
.ob-intro .ob-act{padding:0 28px}

/* ---------- nhắc Unikey ---------- */
.ob-uk{position:fixed;z-index:94;left:50%;top:70px;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:22px;overflow:hidden;
  transform:translate(-50%,-24px) scale(.96);opacity:0;transition:transform .55s var(--spring),opacity .35s}
.ob-uk.on{transform:translate(-50%,0) scale(1);opacity:1}.ob-uk.out{transform:translate(-50%,-24px) scale(.96);opacity:0}
.ob-uk-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,#ffd27a,#f08a2a);box-shadow:0 8px 20px -6px rgba(240,138,42,.8);animation:obWig 2.4s ease-in-out infinite}
.ob-uk-ic .ic{width:24px;height:24px;color:#3a1c00}
@keyframes obWig{0%,70%,100%{transform:none}75%{transform:rotate(-8deg)}85%{transform:rotate(8deg)}}
.ob-uk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ob-uk-t b{font-size:14px}.ob-uk-t span{font-size:12.5px;color:var(--muted);line-height:1.7}.ob-uk-t em{font-style:normal;color:#ffd60a;font-weight:600}
.ob-uk-x{flex:none;height:34px;padding:0 14px;border-radius:12px;background:var(--fill2);font-weight:600;font-size:12.5px}.ob-uk-x:hover{background:rgba(255,255,255,.22)}
.ob-uk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#ffd27a,#f08a2a);transform-origin:left;animation:obBar 14s linear both}
@keyframes obBar{to{transform:scaleX(0)}}

/* ---------- hướng dẫn từng bước ---------- */
.ob-tour{position:fixed;inset:0;z-index:97;animation:obFade .3s both}
.ob-tour.out{animation:obFade .25s reverse both}
.ob-tour.dim{background:rgba(8,6,16,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ob-spot{position:fixed;border-radius:18px;box-shadow:0 0 0 9999px rgba(8,6,16,.6),0 0 0 2px rgba(255,255,255,.9),0 0 30px 6px rgba(100,181,255,.55);transition:all .45s var(--spring);pointer-events:none;animation:obPulse 1.8s ease-in-out infinite}
@keyframes obPulse{50%{box-shadow:0 0 0 9999px rgba(8,6,16,.6),0 0 0 3px #fff,0 0 44px 10px rgba(100,181,255,.75)}}
.ob-tip{position:fixed;padding:16px 18px 14px;border-radius:22px;transition:left .45s var(--spring),top .45s var(--spring)}
.ob-tip.in{animation:obPop .45s var(--spring) both}
.ob-tip-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ob-cnt{font-size:11.5px;font-weight:700;color:var(--acc2);letter-spacing:.08em}
.ob-skip{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.ob-skip:hover{color:#fff}
.ob-tt{display:block;font-size:17px;margin-bottom:4px}
.ob-td{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.88)}
.ob-tip-f{display:flex;align-items:center;gap:8px;margin-top:12px}
.ob-dots{flex:1;display:flex;gap:5px}
.ob-dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.22);transition:all .35s var(--spring)}
.ob-dots i.done{background:rgba(100,181,255,.6)}.ob-dots i.on{width:20px;background:var(--acc2)}

/* ---------- phân quyền ứng dụng ---------- */
.ob-apps{width:min(980px,100%)}
.ob-tbl{overflow:auto;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(0,0,0,.14)}
.ob-tbl table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.ob-tbl th{position:sticky;top:0;z-index:1;padding:12px 8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center;background:rgba(30,30,44,.92);white-space:nowrap}
.ob-tbl th:first-child{text-align:left;padding-left:14px}
.ob-tbl td{padding:7px 8px;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
.ob-tbl td:first-child{text-align:left;padding-left:12px}
.ob-tbl tr:hover td{background:rgba(255,255,255,.035)}
.ob-tbl .com{background:rgba(10,132,255,.08)}.ob-tbl th.com{color:var(--acc2)}
.ob-tn{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.ob-ck{width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;font-weight:800;color:#fff;background:var(--fill);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);transition:all .25s var(--spring)}
.ob-ck:hover{transform:scale(1.1);background:var(--fill2)}
.ob-ck.on{background:linear-gradient(180deg,#3d9bff,#0a6cff);box-shadow:0 6px 14px -6px rgba(10,132,255,.9)}
.ob-ck.dis{background:rgba(48,209,88,.16);color:rgba(48,209,88,.85);box-shadow:none;cursor:not-allowed;transform:none}

/* ---------- sửa giới thiệu ---------- */
.ob-edit{width:min(720px,100%)}
.ob-f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ob-f input,.ob-f textarea,.ob-eb input,.ob-eb textarea{width:100%;border:0;outline:0;border-radius:12px;padding:10px 12px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);font-weight:400;font-size:13.5px;color:#fff;resize:vertical;transition:box-shadow .2s}
.ob-f input:focus,.ob-f textarea:focus,.ob-eb input:focus,.ob-eb textarea:focus{box-shadow:inset 0 0 0 1.5px var(--acc2)}
.ob-ebs{display:flex;flex-direction:column;gap:8px}
.ob-eb{display:grid;grid-template-columns:56px 1fr 30px;gap:8px;align-items:start;padding:8px;border-radius:16px;background:rgba(0,0,0,.14);box-shadow:inset 0 0 0 1px var(--line)}
.ob-eb > div{display:flex;flex-direction:column;gap:6px}
.ob-eb .ob-ei{text-align:center;font-size:22px;padding:8px 4px;height:52px}
.ob-del{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--dim)}.ob-del:hover{background:rgba(255,69,58,.2);color:#fff}.ob-del .ic{width:16px;height:16px}
.ob-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:4px}.ob-chk b{color:#fff}

@media (max-width:640px){
  .ob-card{padding:22px 16px 18px;border-radius:24px}
  .ob-intro{padding:0 0 18px}.ob-hero{padding:26px 18px 20px;gap:14px;border-radius:24px 24px 0 0}.ob-logo{width:60px;height:60px;border-radius:18px}
  .ob-mission,.ob-h,.ob-grid,.ob-uknote,.ob-note{margin-left:16px;margin-right:16px}.ob-intro .ob-act{padding:0 16px}
  .ob-act .btn{flex:1}.ob-uk{top:60px}.ob-uk-x{display:none}
}
@media (prefers-reduced-motion:reduce){.ob-ov,.ob-card,.ob-blk,.ob-tip.in,.ob-spot,.ob-logo,.ob-uk-ic,.ob-hero::after{animation:none!important}}
/* nền đậm hơn cho thẻ nổi trên bản đồ (dễ đọc) */
.ob-uk.lg,.ob-tip.lg{background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.07)),rgba(20,18,32,.86)}
.ob-card.lg{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(255,255,255,.06)),rgba(22,20,36,.84)}