/* =========================================================
   Windows XP shell — Luna theme (CSS-only reproduction)
   ========================================================= */
:root{
  --font: Tahoma, "Segoe UI", Verdana, Arial, sans-serif;
  --luna-1:#0997ff; --luna-2:#0053ee; --luna-3:#0050ee; --luna-4:#06f;
  --face:#ece9d8; --face-dk:#d6d2c2; --border-dk:#0831d9;
  --sel:#316ac5; --link:#0645ad;
  --task-1:#245edb; --task-2:#3f8cf3; --start-1:#3c9a3c; --start-2:#58b858;
}
*{box-sizing:border-box}
/* Luôn dùng giao diện sáng: chặn trình duyệt/extension tự đảo màu (Auto Dark Mode, Dark Reader...) */
:root,html,body{color-scheme:only light!important;forced-color-adjust:none}
input,textarea,select,button{color-scheme:only light}
input,textarea,select{background-color:#fff;color:#000}

html,body{margin:0;height:100%;overflow:hidden;background:#000;font:11px/1.35 var(--font);color:#000;user-select:none;-webkit-user-select:none}
input,textarea,select,button{font:inherit}
textarea,input,select,[contenteditable]{user-select:text;-webkit-user-select:text}
.hidden{display:none!important}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:none;overflow:hidden}
.screen.active{display:block}
.skip{position:absolute;right:16px;top:12px;color:#777;font-size:11px}
.skip b{color:#aaa}

/* power */
#scr-power{background:radial-gradient(circle at 50% 45%,#1b1b22,#000 70%);color:#888;text-align:center}
#scr-power.active{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#power-btn{width:110px;height:110px;border-radius:50%;border:3px solid #333;background:radial-gradient(circle at 40% 35%,#3a3a44,#121216);color:#4ade80;cursor:pointer;box-shadow:0 0 0 6px #0a0a0a,0 0 30px rgba(74,222,128,.15),inset 0 2px 6px rgba(255,255,255,.08);transition:.2s}
#power-btn:hover{color:#86efac;box-shadow:0 0 0 6px #0a0a0a,0 0 45px rgba(74,222,128,.45),inset 0 2px 6px rgba(255,255,255,.08)}
#power-btn:active{transform:scale(.96)}
.power-hint{font-size:15px;color:#bbb}
.power-sub{font-size:11px;color:#555}

/* BIOS */
#scr-bios{background:#000;color:#c0c0c0;font:16px/1.3 "Lucida Console","Courier New",monospace;padding:28px 36px}
#scr-bios pre{margin:0;font:inherit;white-space:pre-wrap}
#scr-bios .e{color:#fff}

/* XP flag (ảnh logo Windows XP gốc) */
.xp-flag{display:inline-block;width:34px;height:28px;flex:none;background:url(../img/xp/winlogo.png) center/contain no-repeat}
.xp-flag.big{width:84px;height:68px}
.xp-flag.tiny{width:22px;height:19px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.45))}

/* Icon ảnh XP */
img.xi{display:block;image-rendering:auto;flex:none;-webkit-user-drag:none;user-select:none}
.dicon .img img.xi{width:32px;height:32px;margin-top:4px}
.sm-item .ico img.xi{width:30px;height:30px}
.sm-sub .sm-item .ico img.xi{width:16px;height:16px}
.sm-foot .lo2 img.xi{width:22px;height:22px}
.sm-all .go img{display:inline-block;vertical-align:middle}
#quicklaunch span img.xi,.tray-ico img.xi,.task .ti img.xi,.win .tb .ti img.xi{width:16px;height:16px}
.exp-tool .tbb .i img.xi{width:22px;height:22px}
.exp-files .f .i img.xi{width:32px;height:32px}
.dicon.sel .img img.xi{filter:sepia(1) hue-rotate(190deg) saturate(3) brightness(.75);opacity:.9}

/* Boot */
#scr-boot{background:#000;color:#fff}
.boot-center{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center}
.boot-brand{display:inline-block;text-align:left;position:relative;padding-right:60px}
.boot-ms{font:bold 14px Arial;margin-left:86px;margin-bottom:-6px}
.boot-ms sup,.wl-ms sup{font-size:8px}
.boot-logo-row{display:flex;align-items:center;gap:14px}
.boot-win{font:bold 56px/1 "Franklin Gothic Medium",Arial,sans-serif;letter-spacing:-1px}
.boot-xp{font:bold italic 34px/1 Arial;color:#ff6a00;position:absolute;right:16px;top:18px}
.boot-edition{font:bold 16px Arial;margin:4px 0 0 86px;color:#eee}
.boot-bar{width:156px;height:18px;margin:58px auto 0;border:2px solid #b2b2b2;border-radius:4px;padding:2px;overflow:hidden;position:relative}
.boot-blocks{position:absolute;top:2px;left:-40px;display:flex;gap:2px;animation:bootrun 2.1s linear infinite}
.boot-blocks i{width:9px;height:10px;border-radius:2px;background:linear-gradient(#a6caf0,#2c62d6 45%,#173b9c 55%,#5a8fe6)}
@keyframes bootrun{from{left:-34px}to{left:160px}}
.boot-copy{position:absolute;left:24px;bottom:22px;font:12px Arial;color:#fff}
.boot-ms-bottom{position:absolute;right:24px;bottom:18px;font:bold italic 20px Arial}

/* Welcome */
#scr-welcome,#scr-shutdown{background:#5a7edc}
.wl-top{position:absolute;left:0;right:0;top:0;height:11%;background:#00309c;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#00309c,#ffffff 30%,#ffffff 50%,#00309c) 1}
.wl-bottom{position:absolute;left:0;right:0;bottom:0;height:11%;background:linear-gradient(90deg,#3a5ec8,#003399);border-top:2px solid transparent;border-image:linear-gradient(90deg,#00309c,#f99736 30%,#f99736 50%,#00309c) 1;display:flex;align-items:center;justify-content:space-between;padding:0 38px;color:#fff}
.wl-mid,.sd-mid{position:absolute;left:0;right:0;top:11%;bottom:11%;background:radial-gradient(ellipse at 8% 8%,#9cb8f3 0%,#6a8fe2 25%,#5a7edc 55%);display:flex;align-items:center;justify-content:center}
.wl-left{width:42%;text-align:right;padding-right:36px;color:#fff;position:relative}
.wl-logo{display:inline-flex;align-items:center;gap:10px}
.wl-logo .xp-flag{width:76px;height:61px}
.wl-ms{font:bold 12px Arial;text-align:left}
.wl-win{font:bold 40px/1 "Franklin Gothic Medium",Arial;text-align:left}
.wl-win sup{color:#ff6a00;font:bold italic 22px Arial}
.wl-begin{font-size:14px;margin-top:22px}
.wl-welcome-text{font:italic bold 52px Arial;color:#fff;opacity:0;transition:.6s;position:absolute;right:36px;top:-90px}
.wl-sep{width:2px;align-self:stretch;margin:6% 0;background:linear-gradient(transparent,#fff 30%,#fff 70%,transparent);opacity:.75}
.wl-right{width:42%;padding-left:36px;display:flex;flex-direction:column;gap:6px}
.wl-user{display:flex;align-items:flex-start;gap:12px;padding:8px;border-radius:8px;cursor:pointer;color:#fff;width:330px;border:1px solid transparent;transition:background .15s,opacity .4s}
.wl-user:hover .wl-pic{border-color:#ffcc33}
.wl-user.sel{background:linear-gradient(90deg,#00309c,#5a7edc);border-color:rgba(255,255,255,.25)}
.wl-user.fade{opacity:.35}
.wl-pic{width:58px;height:58px;border:3px solid #fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,#ffe39a,#f5a623);flex:none;transition:border-color .15s}
.wl-name{font-size:19px;margin-top:4px}
.wl-pass{display:none;margin-top:8px}
.wl-user.sel .wl-pass{display:block}
.wl-pass-label{font-size:11px;margin-bottom:3px}
.wl-pass-row{display:flex;gap:4px;align-items:center}
.wl-pass input{width:170px;height:24px;border:1px solid #6d8fd8;border-radius:3px;padding:2px 6px}
.wl-go{width:24px;height:24px;border-radius:4px;border:1px solid #fff;background:linear-gradient(#8bd36f,#2e9b17);color:#fff;font-weight:bold;cursor:pointer}
.wl-help{width:24px;height:24px;border-radius:4px;border:1px solid #fff;background:linear-gradient(#77a9ff,#2453c8);color:#fff;cursor:pointer}
.wl-err{display:none;margin-top:6px;background:#ffffe1;color:#000;border:1px solid #000;border-radius:6px;padding:6px 8px;font-size:11px;width:260px}
.wl-loading{display:none;font-size:14px;margin-top:10px}
.wl-off{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px}
.wl-off .pw-ico{width:24px;height:24px;border-radius:4px;background:linear-gradient(#f39367,#d1400e);border:1px solid #fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.wl-note{font-size:11px;text-align:left;opacity:.95}
.sd-mid{flex-direction:column;gap:30px;color:#fff;font-size:18px}

/* ---------- Desktop ---------- */
#scr-desktop{background:#245edb}
#wallpaper{position:absolute;inset:0 0 30px 0;background-size:cover;background-position:center;transition:background .3s}
.wp-bliss,#wallpaper.wp-bliss{background:#3a7ee0 url(../img/wallpaper/bliss.jpg) center bottom/cover no-repeat}
.wp-azul{background:radial-gradient(ellipse at 50% 120%,#7cc7ff,#1662c4 50%,#062a6e)}
.wp-purple{background:radial-gradient(circle at 30% 30%,#b48fe0,#5f2d91 55%,#2a0f4a)}
.wp-red{background:radial-gradient(circle at 70% 30%,#ff7b7b,#c0141c 50%,#4a0508)}
.wp-plain{background:#3a6ea5}

#desk-icons{position:absolute;left:0;top:0;bottom:30px;padding:6px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:4px}
.dicon{width:76px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default;border:1px dotted transparent}
.dicon .img{font-size:34px;line-height:40px;height:40px;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.4))}
.dicon .img.ymico{width:40px;height:40px}
.dicon .lb{color:#fff;text-align:center;font-size:11px;text-shadow:1px 1px 1px #000,0 0 3px #000;padding:0 2px;line-height:13px;word-break:break-word}
.dicon.sel .img{filter:drop-shadow(1px 2px 1px rgba(0,0,0,.4)) sepia(1) hue-rotate(190deg) saturate(4) brightness(.8)}
.dicon.sel .lb{background:#316ac5;text-shadow:none}
.dicon.sel{border-color:#fff}
#marquee{position:absolute;border:1px solid #316ac5;background:rgba(49,106,197,.25);display:none;z-index:2}

/* Taskbar */
#taskbar{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(#3168d5 0%,#4993e6 8%,#2157d7 40%,#2663e0 88%,#1941a5 100%);display:flex;align-items:center;z-index:9000}
#start-btn{height:30px;padding:0 22px 0 10px;border:none;border-radius:0 12px 12px 0;background:linear-gradient(#3c9a3c 0%,#5fbe5f 10%,#3a9c3a 45%,#2f8d2f 85%,#1e6a1e 100%);color:#fff;font:italic bold 18px/1 "Franklin Gothic Medium",Arial;text-shadow:1px 1px 2px #133e13;display:flex;align-items:center;gap:6px;cursor:pointer;box-shadow:inset -2px 0 3px rgba(0,0,0,.25)}
#start-btn i{font-style:italic;padding-bottom:2px}
#start-btn:hover{filter:brightness(1.1)}
#start-btn.on{background:linear-gradient(#1e6a1e,#2f8d2f 40%,#3a9c3a)}
#quicklaunch{display:flex;gap:4px;padding:0 8px;height:100%;align-items:center;border-right:1px solid #1a3e9a;margin-right:4px;box-shadow:1px 0 0 #3d7ae6}
#quicklaunch span{font-size:16px;cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:3px}
#quicklaunch span:hover{background:rgba(255,255,255,.2)}
#tasks{flex:1;display:flex;gap:3px;height:100%;align-items:center;overflow:hidden}
.task{width:160px;height:24px;border-radius:3px;background:linear-gradient(#3c81f3,#3075ec 50%,#2a6be0);color:#fff;display:flex;align-items:center;gap:5px;padding:0 8px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 1px 1px 0 rgba(255,255,255,.3);white-space:nowrap;overflow:hidden;flex-shrink:1;min-width:40px}
.task span.t{overflow:hidden;text-overflow:ellipsis}
.task:hover{filter:brightness(1.12)}
.task.active{background:linear-gradient(#1e52b7,#1948a6);box-shadow:inset 1px 1px 2px rgba(0,0,0,.5)}
.task.flash{animation:taskflash 1s steps(1) infinite}
@keyframes taskflash{50%{background:linear-gradient(#ffb44f,#f08a00)}}
.task .ti{font-size:14px;flex:none;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
#tray{height:100%;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;background:linear-gradient(#0c59b9,#139ee9 8%,#18b9ff 15%,#1294e5 45%,#0f7fd6 90%,#0b5aa7);border-left:1px solid #092e8a;box-shadow:inset 1px 0 1px #18bbff;color:#fff}
.tray-ico{font-size:13px;cursor:default;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
#tray-ym{cursor:pointer}
#clock{margin-left:4px;font-size:11px;min-width:42px;text-align:center}

/* Start menu */
#startmenu{position:absolute;left:0;bottom:30px;width:380px;height:470px;z-index:9001;border-radius:8px 8px 0 0;overflow:hidden;background:#fff;box-shadow:2px -2px 10px rgba(0,0,0,.5);display:flex;flex-direction:column;border:1px solid #0a246a;animation:smup .18s ease-out}
@keyframes smup{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.sm-head{height:60px;background:linear-gradient(#1868ce,#0e60cb 10%,#2570d7 60%,#155fc8);display:flex;align-items:center;gap:10px;padding:0 10px;color:#fff;font:bold 15px var(--font);text-shadow:1px 1px 2px #0a2c78;border-bottom:2px solid #e9883a}
.sm-avatar{width:46px;height:46px;border:2px solid #fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,#ffe39a,#f5a623)}
.sm-body{flex:1;display:flex;min-height:0}
.sm-left{width:52%;padding:6px 0;display:flex;flex-direction:column;background:#fff}
.sm-right{flex:1;background:#d3e5fa;border-left:1px solid #95bdee;padding:6px 0}
.sm-item{display:flex;align-items:center;gap:8px;padding:4px 8px;cursor:pointer;color:#000}
.sm-right .sm-item{color:#0a246a}
.sm-item .ico{font-size:22px;width:30px;text-align:center;flex:none;display:flex;justify-content:center}
.sm-item .ico.ymico{width:26px;height:26px}
.sm-item.big b{display:block;font-size:11px}
.sm-item.big small{color:#666;font-size:10px}
.sm-item:hover{background:#316ac5;color:#fff}
.sm-item:hover small{color:#ddd}
.sm-sep{height:1px;margin:4px 10px;background:linear-gradient(90deg,transparent,#aaa,transparent)}
.sm-spacer{flex:1}
.sm-all{padding:6px 10px;font-weight:bold;text-align:center;cursor:pointer;position:relative;display:flex;justify-content:center;gap:8px;align-items:center}
.sm-all .go{display:inline-flex;width:18px;height:18px;border-radius:3px;background:linear-gradient(#5bc65b,#2c8e2c);color:#fff;font-size:9px;align-items:center;justify-content:center}
.sm-all:hover{background:#316ac5;color:#fff}
.sm-sub{display:none;position:absolute;left:100%;bottom:0;width:200px;background:#fff;border:1px solid #888;box-shadow:2px 2px 6px rgba(0,0,0,.4);padding:2px;font-weight:normal;color:#000;text-align:left}
.sm-sub .sm-item{padding:3px 6px}
.sm-sub .sm-item .ico{font-size:14px;width:18px}
.sm-sub .sm-item .ico.ymico{width:16px;height:16px}
.sm-all:hover .sm-sub{display:block}
.sm-foot{height:44px;background:linear-gradient(#1868ce,#2570d7 60%,#155fc8);display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:0 10px}
.sm-foot button{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:3px}
.sm-foot button:hover{background:rgba(255,255,255,.15)}
.sm-foot .lo,.sm-foot .to{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #fff}
.sm-foot .lo{background:linear-gradient(#fdd451,#e6a400)}
.sm-foot .to{background:linear-gradient(#f39367,#d1400e)}

/* ---------- Windows (Luna) ---------- */
#windows{position:absolute;inset:0 0 30px 0;pointer-events:none}
.win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;background:var(--face);border:3px solid var(--luna-2);border-top:0;border-radius:8px 8px 0 0;box-shadow:2px 3px 12px rgba(0,0,0,.45);min-width:180px;min-height:90px}
.win.inactive{border-color:#7a96df}
.win .tb{height:30px;flex:none;margin:0 -3px;border-radius:7px 7px 0 0;background:linear-gradient(#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%);display:flex;align-items:center;padding:0 5px 0 8px;gap:5px;color:#fff;font:bold 13px "Trebuchet MS",var(--font);text-shadow:1px 1px #0f1089;cursor:default}
.win.inactive .tb{background:linear-gradient(#7697e7,#7e9ee3 10%,#94afe8 30%,#97b4e9 60%,#7d9ee4 90%);color:#d8e4f8;text-shadow:none}
.win .tb .ti{font-size:14px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none;text-shadow:none}
.win .tb .tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .tb .wb{width:21px;height:21px;border:1px solid #fff;border-radius:3px;background:linear-gradient(135deg,#3c8cfe,#0d55e4 60%,#1a50c8);color:#fff;display:flex;align-items:center;justify-content:center;font:bold 12px Arial;cursor:pointer;flex:none;box-shadow:inset 0 0 2px rgba(255,255,255,.6)}
.win .tb .wb:hover{filter:brightness(1.2)}
.win .tb .wb.x{background:linear-gradient(135deg,#e7926f,#d4441a 60%,#c63b14)}
.win .tb .wb.dis{opacity:.55;pointer-events:none}
.win.inactive .tb .wb{opacity:.7}
.win .wbody{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}
.win .rz{position:absolute;z-index:6}
.win .rz-n{top:-3px;left:8px;right:8px;height:6px;cursor:ns-resize}
.win .rz-s{bottom:-4px;left:8px;right:8px;height:7px;cursor:ns-resize}
.win .rz-e{right:-4px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.win .rz-w{left:-4px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.win .rz-ne{top:-3px;right:-4px;width:12px;height:12px;cursor:nesw-resize}
.win .rz-nw{top:-3px;left:-4px;width:12px;height:12px;cursor:nwse-resize}
.win .rz-se{bottom:-4px;right:-4px;width:14px;height:14px;cursor:nwse-resize}
.win .rz-sw{bottom:-4px;left:-4px;width:12px;height:12px;cursor:nesw-resize}
.win.max .rz{display:none}
.win.max{border-radius:0;border-width:0}
.win.max .tb{margin:0;border-radius:0}
.win.anim-open{animation:winopen .2s ease-out}
@keyframes winopen{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.win.anim-close{animation:winclose .15s ease-in forwards}
@keyframes winclose{to{transform:scale(.9);opacity:0}}
.win.minimizing{transition:transform .22s ease-in,opacity .22s ease-in;opacity:0;pointer-events:none}
.win.min{display:none}
.win.shake{animation:winshake .6s linear}
@keyframes winshake{0%,100%{translate:0 0}10%{translate:-10px 4px}20%{translate:9px -5px}30%{translate:-8px -3px}40%{translate:10px 5px}50%{translate:-9px 2px}60%{translate:8px -4px}70%{translate:-6px 4px}80%{translate:5px -2px}90%{translate:-3px 1px}}
.ghost{position:absolute;border:2px solid #5a83e0;background:rgba(90,131,224,.25);z-index:9500;pointer-events:none}

/* classic widgets */
.menubar{display:flex;padding:1px 2px;background:var(--face);border-bottom:1px solid #fff;box-shadow:0 1px 0 #c5c2b2;flex:none;position:relative}
.menubar>span{padding:2px 7px;cursor:default;position:relative}
.menubar>span:hover,.menubar>span.open{background:var(--sel);color:#fff}
.btn{padding:3px 12px;min-width:75px;height:23px;border:1px solid #003c74;border-radius:3px;background:linear-gradient(#fff,#f4f3ee 40%,#ece9d8 85%,#d6d0c5);cursor:pointer;color:#000}
.btn:hover{box-shadow:inset 0 0 0 2px #f9c254,inset 0 -1px 0 2px #e5a01a}
.btn:active{background:linear-gradient(#e3e1d6,#f0eee6)}
.btn.def{box-shadow:inset 0 0 0 1px #a6c8ff,inset 0 0 0 2px #7ba2e7}
.btn:disabled{color:#a5a294;border-color:#c9c7ba;pointer-events:none}
.inp{border:1px solid #7f9db9;background:#fff;padding:2px 4px;height:21px;width:100%}
textarea.inp{height:auto}
select.inp{padding:1px}
.chk{display:flex;align-items:center;gap:5px;margin:3px 0;cursor:pointer}
fieldset{border:1px solid #d0d0bf;border-radius:4px;margin:0 0 8px;padding:6px 8px}
legend{color:#0046d5;padding:0 3px}
.xptabs{display:flex;gap:1px;padding:6px 6px 0}
.xptabs span{padding:3px 8px;border:1px solid #919b9c;border-bottom:none;border-radius:3px 3px 0 0;background:linear-gradient(#fff,#ecebe6);cursor:pointer}
.xptabs span.on{background:#fcfcfe;border-top:2px solid #ffc83c;position:relative;top:1px;padding-bottom:4px}
.xptab-body{margin:0 6px;border:1px solid #919b9c;background:#fcfcfe;padding:10px;flex:1}
.dlg-acts{display:flex;justify-content:flex-end;gap:6px;padding:8px}
.statusbar{border-top:1px solid #c5c2b2;padding:2px 6px;background:var(--face);flex:none;font-size:11px;color:#333;display:flex;gap:10px}

/* context menu + dropdown */
.ctx{position:absolute;z-index:9800;background:#fff;border:1px solid #aca899;box-shadow:2px 2px 4px rgba(0,0,0,.35);padding:2px;min-width:170px;animation:fadein .1s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ctx div{padding:3px 20px 3px 22px;cursor:default;white-space:nowrap;display:flex;gap:6px;position:relative}
.ctx div:hover{background:var(--sel);color:#fff}
.ctx div.dis{color:#aca899;pointer-events:none}
.ctx div.b{font-weight:bold}
.ctx div .k{margin-left:auto;padding-left:20px;opacity:.7}
.ctx div .ck{position:absolute;left:6px}
.ctx hr{border:none;border-top:1px solid #aca899;margin:3px 1px}

/* balloon tooltip */
.balloon{position:absolute;z-index:9600;right:14px;bottom:44px;width:270px;background:#ffffe1;border:1px solid #000;border-radius:8px;padding:8px 10px;box-shadow:2px 2px 6px rgba(0,0,0,.3);animation:fadein .3s}
.balloon:after{content:"";position:absolute;right:40px;bottom:-12px;border:6px solid transparent;border-top-color:#000}
.balloon>b{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.balloon .bx{position:absolute;right:6px;top:4px;cursor:pointer;border:1px solid #888;border-radius:2px;width:14px;height:14px;font-size:10px;line-height:12px;text-align:center}

/* dim overlay + turn off dialog */
#scr-dim{position:fixed;inset:0;z-index:9900;background:rgba(0,0,0,.45);backdrop-filter:grayscale(1);-webkit-backdrop-filter:grayscale(1);display:flex;align-items:center;justify-content:center;animation:fadein .6s}
.xpbox{width:310px;border-radius:6px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.6);font-family:var(--font)}
.xpbox .h{background:#00309c;color:#fff;font:15px var(--font);padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.xpbox .m{background:linear-gradient(90deg,#5a7edc,#6f8fe6);padding:24px 16px;display:flex;justify-content:space-around;border-top:2px solid #f99736}
.xpbox .m .o{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;cursor:pointer;font-size:12px}
.xpbox .m .o .q{width:36px;height:36px;border-radius:5px;border:1px solid #fff;display:flex;align-items:center;justify-content:center;font-size:20px;transition:.15s}
.xpbox .m .o:hover .q{filter:brightness(1.2);box-shadow:0 0 8px #fff}
.xpbox .f{background:#00309c;padding:8px 14px;text-align:right}
.xpbox .f button{background:#fff;border:1px solid #000;border-radius:2px;padding:2px 12px;cursor:pointer}

/* Explorer */
.exp-tool{display:flex;gap:2px;padding:3px 4px;background:var(--face);border-bottom:1px solid #c5c2b2;align-items:center;flex:none}
.exp-tool .tbb{display:flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid transparent;border-radius:3px;cursor:pointer}
.exp-tool .tbb:hover{border-color:#ccc;background:#fff}
.exp-tool .tbb .i{font-size:18px}
.exp-addr{display:flex;align-items:center;gap:6px;padding:2px 4px;background:var(--face);border-bottom:1px solid #c5c2b2;flex:none}
.exp-addr .inp{flex:1}
.exp-main{flex:1;display:flex;min-height:0}
.exp-side{width:190px;background:linear-gradient(#7ba2e7,#6375d6);padding:10px;overflow:auto;flex:none}
.exp-box{background:#d6dff7;border-radius:4px 4px 0 0;margin-bottom:10px;overflow:hidden}
.exp-box h4{margin:0;padding:5px 8px;background:linear-gradient(90deg,#fff,#c6d3f7);color:#215dc6;font-size:11px}
.exp-box div{padding:3px 8px;color:#215dc6;cursor:pointer}
.exp-box div:hover{text-decoration:underline}
.exp-files{flex:1;background:#fff;overflow:auto;padding:10px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.exp-files .f{width:84px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px;gap:3px;border:1px solid transparent;cursor:default}
.exp-files .f .i{font-size:32px}
.exp-files .f.sel{background:#c1d2ee;border-color:#316ac5}
.exp-files h5{width:100%;margin:6px 0 2px;color:#215dc6;border-bottom:1px solid #9cb2e0;font-size:11px}

/* IE */
.ie-page{flex:1;background:#fff;overflow:auto}
.ie-throb{width:34px;height:26px;margin-left:auto;font-size:18px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ccc}
.ie-throb.busy{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Notepad */
.np-text{flex:1;border:none;resize:none;font:13px "Lucida Console",monospace;padding:4px;outline:none;user-select:text}

/* CMD */
.cmd{flex:1;background:#000;color:#c0c0c0;font:13px/1.25 "Lucida Console","Courier New",monospace;padding:4px;overflow:auto;white-space:pre-wrap;cursor:text;user-select:text}
.cmd input{background:transparent;border:none;color:#c0c0c0;font:inherit;outline:none;width:70%}

/* Minesweeper */
.ms-wrap{padding:6px;background:#c0c0c0;display:flex;flex-direction:column;gap:6px;align-items:center;flex:1}
.ms-top{display:flex;justify-content:space-between;align-items:center;width:100%;border:2px inset #fff;padding:4px}
.ms-led{background:#000;color:#f00;font:bold 22px "Courier New",monospace;padding:0 3px;letter-spacing:1px}
.ms-face{width:28px;height:28px;font-size:18px;border:2px outset #fff;background:#c0c0c0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ms-grid{display:grid;border:3px inset #fff}
.ms-grid div{width:18px;height:18px;border:2px outset #fff;background:#c0c0c0;font:bold 12px Arial;display:flex;align-items:center;justify-content:center;cursor:default}
.ms-grid div.o{border:1px solid #808080;border-width:0 0 1px 1px;background:#c0c0c0}
.ms-grid div.boom{background:#f00}

/* display properties */
.dp-preview{width:200px;height:150px;margin:0 auto 10px;border:10px solid #ccc;border-bottom-width:24px;border-radius:6px;background-size:cover}
.dp-list{height:110px;overflow:auto;border:1px solid #7f9db9;background:#fff}
.dp-list div{padding:2px 6px;cursor:pointer}
.dp-list div.sel{background:var(--sel);color:#fff}

/* ===== Tài khoản: Welcome đăng nhập/đăng ký, avatar ảnh, User Accounts, Control Panel ===== */
.av-img{width:100%;height:100%;object-fit:cover;display:block}
.wl-pic,.sm-avatar{overflow:hidden}
.sm-avatar{cursor:pointer}
.wl-plus{font-size:32px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.wl-other .wl-pic,.wl-newacc .wl-pic{background:linear-gradient(135deg,#c9dbff,#6f95e6)}
.wl-sub{font-size:11px;opacity:.85;margin-top:1px}
.wl-pass .wl-pass-row+.wl-pass-label{margin-top:6px}
.wl-pass input.bad{border-color:#e0442a;background:#fff3f0}
.wl-hint{opacity:.8;font-size:10px}
.wl-go:disabled{opacity:.6;cursor:wait}
.wl-err{width:250px}
.wl-reg{margin:10px 0 0 82px;font-size:12px;color:#fff}
.wl-reg a{color:#fff;font-weight:bold;text-decoration:underline;cursor:pointer}
.wl-reg a:hover{color:#ffe28a}
#wl-users{max-height:100%;overflow:auto}

.ua{display:flex;height:100%;background:#fff;font-size:11px}
.ua-side,.cp-side{width:170px;flex:none;padding:10px;background:linear-gradient(#7aa1e6,#6375d6);display:flex;flex-direction:column;gap:10px}
.ua-sbox{background:#d6dff7;border-radius:3px 3px 0 0;overflow:hidden}
.ua-sh{background:linear-gradient(90deg,#fff,#c6d3f7);color:#215dc6;font-weight:bold;padding:4px 8px}
.ua-sbox a{display:flex;align-items:center;gap:6px;padding:4px 8px;color:#215dc6;text-decoration:none}
.ua-sbox a:hover{text-decoration:underline;color:#428eff}
.ua-sbox .ymico{width:16px;height:16px}
.ua-tip{padding:6px 8px;color:#123}
.ua-main,.cp-main{flex:1;padding:14px 18px;overflow:auto;min-width:0}
.ua-main h2,.cp-main h2{font:normal 18px "Trebuchet MS",Tahoma,sans-serif;color:#003399;margin:0 0 14px}
.ua-body{display:flex;gap:18px;align-items:flex-start}
.ua-tasks{flex:1;display:flex;flex-direction:column;gap:9px}
.ua-tasks a{color:#0b3fbf;font-size:12px;text-decoration:none}
.ua-tasks a:hover{text-decoration:underline}
.ua-card{width:150px;text-align:center;padding:8px;border:1px solid #c4d0ef;border-radius:6px;background:linear-gradient(#f5f8ff,#e3ebfb)}
.ua-av{width:48px;height:48px;border:2px solid #fff;border-radius:5px;box-shadow:0 0 0 1px #8fa8d8;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;background:linear-gradient(135deg,#ffe39a,#f5a623)}
.ua-av-big{width:64px;height:64px;font-size:40px;margin:0 auto}
.ua-card .ua-av{cursor:pointer}
.ua-cn{font-weight:bold;font-size:13px;margin-top:6px;word-break:break-word}
.ua-cu{color:#555}
.ua-cr{color:#777;font-size:10px;margin-top:2px}
.ua-pane{margin-top:14px}
.ua-pane fieldset{border:1px solid #c4d0ef;border-radius:4px;padding:8px 10px}
.ua-pane p{margin:0 0 8px;color:#333}
.ua-row{display:flex;gap:8px;align-items:center}
.ua-row .inp{flex:1;max-width:240px}
.ua-grid2{display:grid;grid-template-columns:150px 200px;gap:6px;align-items:center}
.ua-msg{font-size:11px;margin-top:6px}
.ua-pick{padding:10px 12px}
.ua-pick-cur{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.ua-pick-cur .ua-av-big{margin:0;flex:none}
.ua-pick-cur small{color:#555}
.ua-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.ua-grid .avatar{cursor:pointer;border-radius:4px;border:1px solid #c4d0ef;background:#fff;display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:22px}
.ua-grid .avatar:hover{border-color:#316ac5;background:#eef3ff}
.ua-grid .avatar.on{border:2px solid #316ac5;background:#dbe6ff}
.ua-pick-up{display:flex;gap:8px;align-items:center;margin-top:10px}
.ua-pick-up small{color:#666}
.cp{display:flex;height:100%;background:#fff}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cp-grid a{display:flex;gap:8px;align-items:center;padding:6px;border-radius:4px;color:#0b3fbf;text-decoration:none}
.cp-grid a:hover{background:#eef3ff}
.cp-grid a span{display:flex;flex-direction:column}
.cp-grid small{color:#555;font-size:10px}
.ua-ym{margin-top:6px;font-size:11px;color:#5a2d91;display:flex;align-items:center;justify-content:center;gap:4px}
.ua-ym .ymico{width:14px;height:14px;display:inline-block}
.dicon .img.ym-desk img.xi{width:40px;height:40px;margin-top:0;object-fit:contain}