/* =========================================================
   Windows Media Player 10 — skin mặc định (Full mode, tab Library)
   Màu & kích thước đo trực tiếp từ ảnh tham chiếu (645×409).
   Token 3 lớp: primitive → semantic → component. Bố cục co giãn theo cửa sổ.
   ========================================================= */
.win.w10{
  /* ---------- Primitive ---------- */
  --p-white:#ffffff; --p-black:#000000;
  --p-sky-50:#f3fafc; --p-sky-100:#e4efff; --p-sky-200:#c4d7f0; --p-sky-300:#a4bbe6; --p-sky-400:#87a5cd;
  --p-blue-300:#8aaeeb; --p-blue-400:#6094de; --p-blue-500:#4a7ec7; --p-blue-600:#376ab4; --p-blue-700:#3f67a4; --p-blue-900:#002a6a;
  --p-ice-100:#ecf2f9; --p-ice-200:#e1e9f6; --p-cream:#ecebdc; --p-cream-dk:#cdcabf;
  --p-steel-200:#bfcde8; --p-steel-300:#b6cae5; --p-steel-400:#86a4ce; --p-steel-500:#628ec4;
  --p-green-500:#2fa51f; --p-green-300:#7ee05c;
  --p-font:Tahoma,"Segoe UI",Verdana,sans-serif;

  /* ---------- Semantic ---------- */
  --w10-chrome-top:#c8daf2;          /* khung kính sáng */
  --w10-accent:var(--p-blue-600);    /* thanh công cụ / chân pane */
  --w10-accent-hi:var(--p-blue-300);
  --w10-accent-edge:var(--p-blue-900);
  --w10-pane:var(--p-ice-100);       /* cây thư mục, lưới */
  --w10-list:var(--p-blue-400);      /* danh sách phát */
  --w10-head:var(--p-cream);         /* tiêu đề cột */
  --w10-text:var(--p-black);
  --w10-text-inv:var(--p-white);
  --w10-sel:#c1d2ee;
  --w10-ok:var(--p-green-500);

  /* ---------- Component ---------- */
  --w10-frame:linear-gradient(#9cbae4 0,#c4d7f0 8px,#e4efff 18px,#f3fafc 22px,#e0ecfa 34px,#c8daf2 50px,#7fa8dc 56px,#618eca 66px);
  --w10-tab-on:linear-gradient(#93b5e7 0,#7aa0db 30%,#6997ce 60%,#85a9e8 80%,#4775bd 100%);
  --w10-bar-bg:linear-gradient(#6e99df 0,#3b68b0 2px,var(--w10-accent) 4px,var(--w10-accent) 100%);
  --w10-ctl-bg:linear-gradient(#e0eaf8 0,#fcfbfe 6px,#f1faff 12px,#d4e4f1 20px,#b9cce4 28px,#b4cbe7 31px,#83a5d0 32px,#a1b8e0 36px,#c7d6ec 42px,#d1e3ff 46px,#779ace 48px);
  --w10-btn:radial-gradient(circle at 45% 28%,#ffffff 0,#f3f7fd 40%,#cfdcef 72%,#a9bedf 100%);
  --w10-btn-edge:#7f99c4;
  --w10-glass:linear-gradient(#f0f3fd 0,#fdfdfd 8%,#f4f8ff 20%,#dce5f4 40%,#cbd7ee 60%,#bbcce4 75%,#b6cae5 100%);

  background:#7fb0e8;border:1px solid #2d5ca8!important;border-radius:7px 7px 3px 3px;box-shadow:2px 3px 12px rgba(0,0,0,.45);
  font:11px var(--p-font);color:var(--w10-text);overflow:hidden
}
.win.w10.inactive{filter:saturate(.8)}
.win.w10.max{border-radius:0}

/* --- thanh tiêu đề kính --- */
.win.w10 .tb{position:absolute;left:0;right:0;top:0;height:26px;margin:0;padding:0 6px 0 6px;border-radius:6px 6px 0 0;
  background:transparent!important;color:#203860;text-shadow:none;font:12px var(--p-font);z-index:3;display:flex;align-items:center;gap:5px}
.win.w10 .tb .ti{width:16px;height:16px}
.win.w10 .tb .tt{flex:1;font:12px var(--p-font);color:#2a3f66;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w10-mdrop{width:16px;height:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-right:8px;border-right:1px solid #9ab3da;padding-right:8px}
.w10-mdrop i{border:4px solid transparent;border-top:5px solid #2a4777;border-bottom:0;margin-top:3px}
.win.w10 .tb .wb{width:16px;height:16px;border:none;border-radius:2px;background:none!important;box-shadow:none;color:#2b4677;font:bold 13px/16px Arial,sans-serif;opacity:1}
.win.w10 .tb .wb.mn{align-items:flex-end;line-height:12px}
.win.w10 .tb .wb:hover{background:rgba(255,255,255,.55)!important}
.win.w10 .tb .wb.x:hover{background:#e04a2a!important;color:#fff}

/* --- khung nền --- */
.win.w10 .wbody{position:absolute;inset:0;background:var(--w10-frame) 0 0/100% 66px no-repeat,linear-gradient(90deg,#9cbae4,#c4d7f0 4px,#e9f2fc 7px,#e9f2fc calc(100% - 7px),#c4d7f0 calc(100% - 4px),#9cbae4);
  display:block;overflow:hidden}

/* --- menubar (ẩn mặc định) --- */
.win.w10 .menubar{position:absolute;left:8px;right:8px;top:26px;height:18px;display:flex;align-items:center;background:none;border:none;padding:0;margin:0;z-index:4}
.win.w10 .menubar>span{padding:1px 7px;color:#14305e}
.win.w10 .menubar>span:hover{background:#316ac5;color:#fff}
.win.w10.nomenu .menubar{display:none}
.win.w10:not(.nomenu) .w10-tabs{top:46px}
.win.w10:not(.nomenu) .w10-bar{top:84px}
.win.w10:not(.nomenu) .w10-main{top:112px}
.win.w10:not(.nomenu) .wbody{background-size:100% 82px,auto;background-position:0 16px,0 0}

/* --- tab --- */
.w10-tabs{position:absolute;left:8px;right:4px;top:30px;height:38px;display:flex;align-items:stretch;z-index:2}
.w10-tab{position:relative;display:flex;align-items:center;justify-content:center;width:64px;color:#1d3560;font:13px var(--p-font);cursor:pointer;
  border-right:1px solid rgba(255,255,255,.55);box-shadow:1px 0 0 rgba(120,150,200,.35)}
.w10-tab[data-tab=now]{width:93px;border-right:1px solid rgba(255,255,255,.55);justify-content:flex-start;padding-left:12px}
.w10-tab:hover:not(.on){background:linear-gradient(rgba(255,255,255,.0),rgba(255,255,255,.45))}
.w10-tab.on{width:64px;margin:0 -1px;background:var(--w10-tab-on);color:#fff;border:1px solid #5e8ad0;border-bottom:none;border-radius:6px 6px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);z-index:1}
.w10-tab[data-tab=now].on{width:93px}
.w10-tab.dis{cursor:default}
.w10-tdrop{width:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-right:1px solid rgba(255,255,255,.55)}
.w10-tdrop i{border:4px solid transparent;border-top:5px solid #2a4777;border-bottom:0;margin-top:3px}
.w10-tdrop:hover{background:rgba(255,255,255,.4)}
.w10-store{position:relative;margin-left:auto;width:190px;display:flex;align-items:center;cursor:pointer;
  background:linear-gradient(#bccfec,#a8c1df 50%,#a2bcde);clip-path:polygon(32px 0,100% 0,100% 100%,0 100%);border-radius:0 0 0 0}
.w10-store:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 16%,rgba(140,165,210,.75) 17%,transparent 18.5%)}
.w10-bing{margin-left:82px;width:58px;text-align:center;font:13px var(--p-font);color:#fff;text-shadow:0 0 2px #6d86b4,0 0 1px #6d86b4;border-left:1px solid rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.7);line-height:34px}
.w10-flag{display:flex;align-items:center;gap:4px;padding-left:10px}
.w10-flag img{width:40px;height:auto}
.w10-flag i{border:4px solid transparent;border-top:5px solid #2a4777;border-bottom:0;margin-top:3px}
.w10-more{width:14px;display:flex;align-items:center;justify-content:center;color:#2a4777;font:bold 13px Arial;cursor:pointer}

/* --- thanh công cụ xanh --- */
.w10-bar{position:absolute;left:8px;right:8px;top:68px;height:28px;display:flex;align-items:center;padding:0 6px;box-sizing:border-box;
  background:var(--w10-bar-bg);color:var(--w10-text-inv);font:12px var(--p-font);gap:0;z-index:1}
.w10-bar-lib,.w10-bar-now{display:flex;align-items:center;flex:1;min-width:0}
.w10-bar-now{display:none}
.win.w10.w10-now .w10-bar-lib{display:none}
.win.w10.w10-now .w10-bar-now{display:flex}
.w10-search{width:96px;height:18px;box-sizing:border-box;border:1px solid #1c3f7a;padding:1px 3px;font:11px var(--p-font);margin-right:6px;flex:none}
.w10-tb{display:inline-flex;align-items:center;gap:0;padding:2px 5px;margin-right:10px;border:1px solid transparent;border-radius:2px;cursor:pointer;white-space:nowrap;color:#fff}
.w10-tb:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.w10-tb svg{width:16px;height:16px;flex:none;margin-right:5px}
.w10-tb u{text-decoration:underline}
.w10-tb,.w10-add span,.w10-lfoot>span{white-space:pre}
.w10-tb .dd,.w10-sfoot .dd{border:3.5px solid transparent;border-top:4px solid #fff;border-bottom:0;margin:2px 0 0 5px}
.w10-npl{margin-left:auto;margin-right:46px;flex:none}
.w10-npl svg{margin-right:16px}
.w10-bar-now .wmp-vizname{margin:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w10-bar-now .w10-tb{margin-right:2px}

/* --- vùng chính 3 cột --- */
.w10-main{position:absolute;left:8px;right:8px;top:96px;bottom:68px;display:flex;background:var(--w10-accent);border-bottom:1px solid #6080b5}
.wmp-pane{display:flex;flex:1;min-width:0}
.wmp-pane.lib{background:var(--w10-pane)}
.w10-tree{width:130px;flex:none;display:flex;flex-direction:column;border-right:3px solid;border-image:linear-gradient(90deg,#789bcd,var(--w10-accent-edge) 33%,#7997bf) 1}
.w10-th,.w10-grid th{height:19px;box-sizing:border-box;background:linear-gradient(var(--w10-head) 0,var(--w10-head) 75%,#e0dfcd 85%,var(--p-cream-dk) 100%);
  border-bottom:1px solid #fff;font:11px var(--p-font);color:#000;text-align:left;font-weight:normal}
.w10-th{padding:3px 6px 0 7px;flex:none}
.w10-nodes{flex:1;overflow:auto;padding:3px 0 0 0;min-height:0}
.w10-node{display:flex;align-items:center;height:16px;padding-left:6px;white-space:nowrap;cursor:pointer;color:#14336b}
.w10-node b{width:9px;height:9px;box-sizing:border-box;border:1px solid #7b8faf;background:linear-gradient(#fff,#e2e6ee);font:bold 9px/7px Arial;color:#20304f;text-align:center;margin-right:6px;flex:none}
.w10-node b.none{border:none;background:none}
.w10-node svg{width:16px;height:16px;flex:none;margin-right:4px}
.w10-node span{padding:0 2px}
.w10-node.on span{background:var(--w10-sel);outline:1px dotted #7d95c0}
.w10-node:hover span{text-decoration:underline}
.w10-grid{flex:1;min-width:0;display:flex;flex-direction:column;border-right:3px solid;border-image:linear-gradient(90deg,#7498c7,var(--w10-accent-edge) 33%,#6c9be2) 1}
.lib-table{flex:1;overflow:auto;min-height:0;background:var(--w10-pane);scrollbar-color:#b9d0fc #f3f0f3}
.lib-table table{width:100%;min-width:420px;table-layout:fixed;border-collapse:collapse;font:11px var(--p-font)}
.w10-grid th{position:sticky;top:0;padding:2px 9px 0;border-right:1px solid #c9c7b7;box-shadow:inset -1px 0 0 #fff;white-space:nowrap;overflow:hidden}
.lib-table td{height:16px;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;color:#14336b}
.lib-table tr.sel td{background:#316ac5;color:#fff}
.lib-table{position:relative}
.w10-emsg{position:sticky;left:0;top:19px;height:0;text-align:center;color:#14336b;pointer-events:none}
.w10-emsg span{position:relative;top:14px}
.lib-table tr.empty td{color:#14336b;text-align:center;padding-top:16px;white-space:normal;background:none}
.w10-stars{color:#e7b416;letter-spacing:-1px;font-size:10px}
tr.sel .w10-stars{color:#ffe27a}

.w10-list{width:180px;flex:none;position:relative;display:flex;flex-direction:column;background:var(--w10-list);color:var(--w10-text-inv)}
.win.w10.nolist .w10-list{display:none}
.win.w10.nolist .w10-grid,.win.w10.nolist .wmp-pane.now{border-right:none}
.w10-list.over{box-shadow:inset 0 0 0 2px #fff}
.w10-list .wl-items{flex:1;overflow:auto;min-height:0;padding-top:4px;scrollbar-width:thin}
.w10-hint{position:absolute;left:0;right:0;top:15px;text-align:center;font:11px/13px var(--p-font);pointer-events:none}
.w10-ltot{height:18px;flex:none;text-align:right;padding-right:4px;font:11px/18px var(--p-font)}
.wl-item{display:flex;gap:6px;height:16px;align-items:center;padding:0 5px;cursor:default;color:#fff}
.wl-item .wl-t{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wl-item:hover{background:rgba(255,255,255,.12)}
.wl-item.sel{background:rgba(20,50,120,.45)}
.wl-item.cur{color:#fff;font-weight:bold;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.08))}

/* --- chân pane (xanh đậm) --- */
.w10-sfoot{height:25px;flex:none;display:flex;align-items:center;box-sizing:border-box;padding:0 6px;background:var(--w10-bar-bg);color:#fff;font:12px var(--p-font);white-space:nowrap;overflow:hidden}
.w10-add{cursor:pointer;gap:0}
.w10-add svg{margin-right:6px}
.w10-lfoot>span svg{margin-right:4px}
.w10-add svg{width:17px;height:17px}
.w10-add u,.w10-lfoot u{text-decoration:underline}
.w10-gfoot{justify-content:space-between;gap:10px}
.w10-gfoot .lib-info{overflow:hidden;text-overflow:ellipsis}
.w10-lfoot{gap:12px;padding:0 4px}
.w10-lfoot>span{display:flex;align-items:center;gap:0;cursor:pointer}
.w10-lfoot svg{width:17px;height:17px}

/* --- Now Playing --- */
.wmp-pane.now{border-right:3px solid;border-image:linear-gradient(90deg,#7498c7,var(--w10-accent-edge) 33%,#6c9be2) 1}
.wmp-stage{flex:1;position:relative;min-width:0;background:#000;overflow:hidden;cursor:pointer}
.wmp-viz{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.wmp-video.show{display:block}
.wmp-np{position:absolute;left:8px;top:8px;right:8px;color:#fff;display:flex;flex-direction:column;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
.wmp-np.fade{opacity:1}
.wmp-np b{font:18px var(--p-font);font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmp-np span{font:11px var(--p-font);color:#b4c8ee}
.wmp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#c8d2f0;text-align:center;padding:16px;background:#000;cursor:default;z-index:2}
.wmp-empty b{font:bold 15px var(--p-font);color:#fff}
.wmp-empty small{color:#7f8bb3;max-width:300px}
.w10-main.drop:after{content:"Thả file nhạc vào đây để phát ♫";position:absolute;inset:6px;border:3px dashed #fff;border-radius:8px;background:rgba(20,60,140,.75);color:#fff;font:bold 16px var(--p-font);display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}

/* --- khu điều khiển dưới --- */
.w10-ctl{position:absolute;left:6px;right:6px;bottom:4px;height:64px;background:var(--w10-ctl-bg) 0 14px/100% 48px no-repeat}
.w10-seek{position:absolute;left:4px;right:4px;top:3px;height:9px}
.w10-cap{position:absolute;top:0;height:9px;border-radius:5px;border:1px solid #8aa2c8;box-sizing:border-box;padding:0;cursor:pointer;color:#7d93ba;
  background:linear-gradient(#ffffff,#e4ecf7 55%,#c5d4ea);display:flex;align-items:center;justify-content:center}
.w10-cap svg{width:9px;height:5px}
.w10-rew{left:10px;width:24px}
.w10-cap2{left:34px;width:22px}
.w10-ff{right:4px;width:26px}
.win.w10 .wc-pos{position:absolute;left:60px;right:34px;top:0;width:auto;height:9px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;border:none}
.win.w10 .wc-pos::-webkit-slider-runnable-track{height:9px;background:linear-gradient(#a8d4a8,#6ec36a) 0 3px/var(--p,0%) 3px no-repeat}
.win.w10 .wc-pos::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:9px;border-radius:4px;border:1px solid #2e7d28;background:linear-gradient(#d6ffd2,#52c444)}
.win.w10 .wc-pos:disabled{cursor:default}
.win.w10 .wc-pos:disabled::-webkit-slider-thumb{visibility:hidden}
.w10-row{position:absolute;left:0;right:0;top:15px;height:46px;display:flex;align-items:center;padding-left:4px}
.w10-pp{position:relative;display:flex;align-items:center;height:40px;padding:0 4px 0 2px;margin-right:8px;border-radius:21px;
  background:linear-gradient(#e8eef8,#c1d0e8);box-shadow:inset 0 0 0 1px #9eb3d6,inset 0 2px 0 #fff}
.wb-play{width:36px;height:36px;border-radius:50%;padding:10px 9px 10px 11px;box-sizing:border-box;cursor:pointer;color:#9aaccb;
  background:var(--w10-btn);border:1px solid var(--w10-btn-edge);box-shadow:inset 0 -2px 3px rgba(80,110,170,.25),0 1px 0 #fff}
.wb-play.on{padding:10px;color:#2b4677}
.win.w10 .wb-play:not(:disabled){color:#2b4677}
.wb-play span{display:block;width:100%;height:100%}
.w10-b{width:24px;height:24px;border-radius:50%;padding:6px;box-sizing:border-box;cursor:pointer;color:#2b4677;
  background:var(--w10-btn);border:1px solid var(--w10-btn-edge);box-shadow:inset 0 -1px 2px rgba(80,110,170,.25)}
.w10-pp .stop{margin-left:2px}
.w10-pill{display:flex;align-items:center;gap:0;height:30px;padding:0 3px;margin-right:8px;border-radius:15px;background:linear-gradient(#e8eef8,#c1d0e8);box-shadow:inset 0 0 0 1px #9eb3d6,inset 0 2px 0 #fff}
.w10-pill .w10-b{margin:0 1px}
.w10-mute{padding:5px;margin-right:6px;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 0 4px #a8bcdc}
.w10-mute.on{color:#c0281e}
.wb-play:hover,.w10-b:hover,.w10-gbtn:hover{filter:brightness(1.07)}
.wb-play:active,.w10-b:active{filter:brightness(.93)}
.w10-vol{position:relative;width:70px;height:22px;flex:none;background:linear-gradient(168deg,transparent 46%,#f5f8fd 47%,#b6c6e2 56%,transparent 58%)}
.win.w10 .wc-vol{position:absolute;left:0;top:0;width:70px;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;border:none}
.win.w10 .wc-vol::-webkit-slider-runnable-track{height:22px;background:linear-gradient(#5bc94a,#2f9b1f) 0 13px/var(--p,70%) 3px no-repeat}
.win.w10 .wc-vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:6px;border-radius:50%;border:1px solid #7f99c4;background:radial-gradient(circle at 45% 30%,#fff,#d0dcef 70%,#a5b9db)}
.w10-glass{position:relative;flex:1;min-width:60px;height:31px;margin:0 6px 0 4px;display:flex;align-items:center;padding:0 6px 0 34px;
  background:var(--w10-glass);border:1px solid #9fb4cd;border-radius:4px;clip-path:polygon(28px 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 1px 0 #fff}
.w10-gtxt{flex:1;min-width:0;display:flex;flex-direction:column;color:#24406f;font:11px/13px var(--p-font)}
.w10-gtxt .wc-state{font-weight:bold}
.w10-gt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w10-glass .wc-time{color:#24406f;font:11px var(--p-font);margin:0 8px}
.w10-gbtn{width:26px;height:18px;border:1px solid #a7b7d0;border-radius:2px;padding:1px 5px;box-sizing:border-box;cursor:pointer;color:#7d90b2;background:linear-gradient(#f8fbff,#d6e0ef)}
.w10-gbtn.on{color:#1f8a12;border-color:#5aa54d;background:linear-gradient(#f2fff0,#c4ecba)}
.w10-round{width:28px;height:28px;padding:6px;margin-right:12px;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.w10-round.on{color:#1f8a12;background:radial-gradient(circle at 45% 28%,#fff,#d3f5c9 50%,#7fd168)}
.win.w10 .rz-se:after{content:"";position:absolute;right:6px;bottom:6px;width:10px;height:10px;pointer-events:none;
  background:radial-gradient(circle,#7c92b8 1px,transparent 1.4px) 0 0/3.5px 3.5px;clip-path:polygon(100% 0,100% 100%,0 100%)}