/* XEM THU — trang + man xe mo phong. Man xe dung TOA DO LOGIC 1280 x 720 (px ben trong .man-xe), ca khoi duoc co
   gian bang transform theo be ngang that (khung.js) -> moi kich thuoc trong man xe la ti le co dinh cua man, khong phu
   thuoc thiet bi xem. Phan ngoai man xe (thanh cong cu, chu) theo rem / % nhu cac trang khac. */

.trang-xem-thu main { padding: 0 var(--le) clamp(2rem, 5vw, 4rem); }
.xem-thu { max-width: 84rem; margin: 0 auto; }
.xem-thu-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem) 0 1rem; }
.xem-thu-dau h1 { margin: .15rem 0 0; }
.quay-lai { font-size: .9375rem; }
.quay-lai::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .35em; border: solid currentColor; border-width: 0 0 .12em .12em; transform: translateY(-.08em) rotate(45deg); }
.thanh-cc { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; padding: .75rem 0 1rem; }
.nhom-cc { display: flex; align-items: center; gap: .6rem; }
.nhom-hd { margin-left: auto; flex-wrap: wrap; }
.nhan-cc { font-size: .75rem; font-weight: 600; color: var(--chu-2); text-transform: uppercase; letter-spacing: .05em; }
.phan-doan { display: inline-flex; padding: .2rem; border-radius: var(--bo-nho); border: 1px solid var(--vien-o); gap: .15rem; }
.phan-doan button { border: 0; background: none; min-height: 2.25rem; padding: .3rem .85rem; border-radius: .25rem; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--chu-2); }
.phan-doan button:hover { color: var(--chu); }
.phan-doan button[aria-pressed="true"] { background: var(--chu); color: var(--nen); }
.nhom-chon { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chon-cc { min-height: 2.25rem; max-width: 15rem; padding: .3rem 2rem .3rem .7rem; border-radius: var(--bo-nho); border: 1px solid var(--vien-o); background: var(--nen); color: var(--chu); font: inherit; font-size: .875rem; font-weight: 600; }
.nhac-xoay { display: none; margin: 0 0 .75rem; padding: .6rem .9rem; border-left: 3px solid var(--nhan); background: var(--nen-2); font-size: .875rem; }
@media (orientation: portrait) and (max-width: 40rem) { .nhac-xoay { display: block; } .nhom-hd { margin-left: 0; } }
.xem-thu-chu { margin: .9rem 0 0; text-align: center; }
.xem-thu-anh { max-width: 48rem; margin: 2rem auto 0; }

/* khung xe: rong toi da sao cho ca man xe lot vua chieu cao man hinh (dien thoai xoay ngang) */
.khung-xe {
  width: min(100%, calc((100vh - 16rem) * 16 / 9)); width: min(100%, calc((100svh - 16rem) * 16 / 9));
  min-width: min(100%, 18rem); margin: 0 auto; padding: clamp(.35rem, .9vw, .8rem); border-radius: clamp(.5rem, 1.2vw, .9rem);
  background: #0b0b0c;
}
@media (orientation: landscape) and (max-height: 32rem) {
  .trang-xem-thu .dau { position: relative; }
  .khung-xe { width: min(100%, calc((100vh - 1.5rem) * 16 / 9)); width: min(100%, calc((100svh - 1.5rem) * 16 / 9)); }
  .xem-thu-dau { padding-top: .75rem; }
}
.man-xe-vien { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(.25rem, .6vw, .4rem); background: #05070b; touch-action: manipulation; }

/* ---------------------------------------------------------------- man xe (toa do logic) */
.man-xe {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", Roboto, sans-serif; letter-spacing: 0;
  -webkit-user-select: none; user-select: none; color: var(--x-chu); background: var(--x-nen); line-height: 1.25;
  --x-nen: #05070B; --x-nen2: #141821; --x-chu: #F2F2F7; --x-mo: #98989F; --x-xanh: #4CD964; --x-nhan: #0A84FF;
  --x-the: rgba(18, 20, 26, .94); --x-vien: rgba(255, 255, 255, .10); --x-chip: rgba(255, 255, 255, .12); --x-vien-o: rgba(24, 27, 34, .98);
  --x-o: #11141b; --x-nut: #fff; --x-nut-chu: #1C1C1E; --x-seg: #1F232C; --x-bong: rgba(0, 0, 0, .45); --x-ts: rgba(0, 0, 0, .8);
  --x-troi: #04060B; --x-troi-a: rgba(4, 6, 11, .75); --x-vig: rgba(0, 0, 0, .55); --x-nhan-rgb: 10, 132, 255;
}
.man-xe.ngay {
  --x-nen: #D3DAE2; --x-nen2: #EEF1F5; --x-chu: #1D1D1F; --x-mo: #6E6E73; --x-xanh: #248A3D; --x-nhan: #007AFF;
  --x-the: rgba(255, 255, 255, .96); --x-vien: rgba(0, 0, 0, .08); --x-chip: rgba(0, 0, 0, .07); --x-vien-o: rgba(255, 255, 255, .98);
  --x-o: #ffffff; --x-nut: #1D1D1F; --x-nut-chu: #fff; --x-seg: #FFFFFF; --x-bong: rgba(0, 0, 0, .18); --x-ts: rgba(255, 255, 255, .9);
  --x-troi: #DCE2E9; --x-troi-a: rgba(220, 226, 233, .8); --x-vig: rgba(154, 166, 180, .3); --x-nhan-rgb: 0, 122, 255;
}
.man-xe button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.man-xe svg { display: block; max-width: none; }
.lop-nha, .lop-o, .lop-dk, .lop-menu, .lop-qs, .lop-tb { position: absolute; inset: 0; }
.lop-o, .lop-dk, .lop-menu, .lop-qs, .lop-tb { pointer-events: none; }
.lop-o > *, .lop-dk > *, .lop-menu > *, .lop-qs > *, .lop-tb > * { pointer-events: auto; }
.lop-nha.an { visibility: hidden; }

.bt-app { display: inline-grid; place-items: center; color: #fff; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.bt-app svg { width: 58%; height: 58%; }
.bt-app b { font-weight: 800; line-height: 1; font-family: -apple-system, system-ui, sans-serif; }

/* o ung dung */
.o-xe {
  position: absolute; border-radius: 30px; overflow: hidden; background: var(--x-vien-o); box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  transition: left .5s cubic-bezier(.32, .72, 0, 1), top .5s cubic-bezier(.32, .72, 0, 1), width .5s cubic-bezier(.32, .72, 0, 1), height .5s cubic-bezier(.32, .72, 0, 1);
}
.o-xe.keo { transition: none; }
.o-xe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px transparent; pointer-events: none; transition: box-shadow .3s; }
/* o dang chon (KinhVe.java:263-306): vien 3 mau nhan + vanh 4 nhan@20% + quang 30 nhan@33%, chuyen 300 ms */
.o-xe.dang-chon { overflow: visible; }
.o-xe.dang-chon > .o-than { border-radius: inherit; overflow: hidden; }
.o-xe.dang-chon::after { box-shadow: inset 0 0 0 3px var(--x-nhan), 0 0 0 4px rgba(var(--x-nhan-rgb), .2), 0 0 30px rgba(var(--x-nhan-rgb), .33); }
.o-xe.sap-dong::before { content: ""; position: absolute; inset: 0; background: rgba(255, 69, 58, .35); z-index: 3; }
.o-than { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.o-nhan { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 14px; border-radius: 999px; background: var(--x-the); border: 1px solid var(--x-vien); font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.o-xe.dang-chon .o-nhan { opacity: 1; }
/* o trong (BanDoOTrong.java:62-82): nen P.o, vong 96 chipOn + dau cong 44 mau nhan, chu 18/700 mo; ca o la nut */
.o-trong { position: absolute !important; inset: 0; width: 100%; background: var(--x-o) !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--x-mo) !important; font-size: 18px; font-weight: 700; }
.o-cong { width: 96px; height: 96px; border-radius: 50%; background: var(--x-chip); display: grid; place-items: center; }
/* bang chon (BanDoOTrong.java:144-182) */
.chon-app-dau { display: flex; align-items: center; gap: 14px; padding: 20px 24px 6px; font-size: 22px; }
.chon-app-x { width: 44px; height: 44px; border-radius: 50% !important; background: var(--x-chip) !important; display: grid !important; place-items: center; flex: 0 0 auto; }
.chon-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px 4px; padding: 14px 16px 24px; overflow: auto; max-height: calc(100% - 70px); }
.muc-app { display: flex !important; flex-direction: column; align-items: center; gap: 8px; animation: xpop .4s cubic-bezier(.2, .9, .25, 1.1) both; }
.muc-app .bt-app { border-radius: 17px !important; }
.muc-app span { font-size: 13px; font-weight: 600; max-width: 104px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes xpop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.app-mau { position: absolute; inset: 0; background: var(--x-o); overflow: hidden; }
.app-dau { display: flex; align-items: center; gap: 12px; padding: 18px 22px; font-size: 18px; }
.o-tim { margin-left: auto; padding: 8px 16px; border-radius: 999px; background: var(--x-chip); color: var(--x-mo); font-size: 14px; }
.luoi-video { display: grid; gap: 16px; padding: 4px 22px 22px; }
.video-anh { aspect-ratio: 16 / 9; border-radius: 14px; position: relative; }
.video-tg { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.video-chu { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.video-chu b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-chu span { font-size: 13px; color: var(--x-mo); }
.nhac-khoi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 30px; flex-wrap: wrap; }
.nhac-bia { width: min(260px, 42%); aspect-ratio: 1; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.nhac-chu { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.nhac-chu b { font-size: 26px; }
.nhac-chu > span { color: var(--x-mo); font-size: 17px; }
.nhac-thanh { height: 5px; border-radius: 3px; background: var(--x-chip); margin-top: 16px; position: relative; }
.nhac-thanh i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: inherit; background: var(--x-chu); }
.nhac-nut { display: flex; align-items: center; gap: 26px; margin-top: 16px; }
.nhac-phat { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ds-chat { display: flex; flex-direction: column; padding: 0 12px; }
.chat { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--x-vien); }
.chat > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat b { font-size: 16px; }
.chat span { color: var(--x-mo); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat small { color: var(--x-mo); font-size: 12px; }
.chat-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; flex: 0 0 auto; }
.app-giua { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.app-giua b { font-size: 24px; margin-top: 8px; }
.app-giua span { color: var(--x-mo); font-size: 15px; }

/* nut tron + vach mep */
.hub {
  position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50% !important;
  background: var(--x-the) !important; border: 1px solid var(--x-vien) !important; display: grid !important; place-items: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 3px transparent; touch-action: none;
  transition: left .5s cubic-bezier(.32, .72, 0, 1), top .5s cubic-bezier(.32, .72, 0, 1), box-shadow .2s;
}
.hub svg { fill: var(--x-chu); }
.hub-mini { position: relative; width: 26px; height: 20px; display: block; }
.hub-mini i { position: absolute; box-sizing: border-box; border: 2px solid var(--x-chu); border-radius: 3px; transform: scale(.86); }
.hub-mini i.chon { background: var(--x-nhan); border-color: var(--x-nhan); }
.hub.bat { box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 3px var(--x-nhan); }
.hub.keo { transition: box-shadow .2s; }
/* tay mep khi mot app (KhungBanDo.java:169-185, 245-258): thanh 6 x 84 o x = W - 6, nhac moi 4 s (truot 9 roi 5 trong 1,1 s) */
.hub-mep { width: 30px; height: 120px; margin: -60px 0 0 -27px; border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; justify-items: end; padding-right: 0 !important; }
.hub-mep i { width: 6px; height: 84px; border-radius: 3px; background: var(--x-mo); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); animation: x-nhac 4s ease-in-out infinite; }
@keyframes x-nhac { 0%, 72.5%, 100% { transform: none; } 80% { transform: translateX(-9px); } 86% { transform: translateX(-2px); } 92% { transform: translateX(-5px); } }
.hub-mep.bat i { animation: none; }
/* tay keo vach chia (KinhVe.java:335-365) */
.vach { position: absolute; width: 44px; height: 110px; margin: -55px 0 0 -22px; display: grid; place-items: center; touch-action: none; cursor: ew-resize; }
.vach-r { width: 110px; height: 44px; margin: -22px 0 0 -55px; cursor: ns-resize; }
.vach i { width: 6px; height: 76px; border-radius: 3px; background: rgba(255, 255, 255, .7); transition: background .15s, width .15s, height .15s; }
.vach-r i { width: 76px; height: 6px; }
.man-xe.ngay .vach i { background: rgba(0, 0, 0, .35); }
.vach.keo i { width: 8px; height: 110px; background: var(--x-nhan); }
.vach-r.keo i { width: 110px; height: 8px; }
.vach.nguy i { background: #FF453A !important; }
.hub-mep.bat i { background: var(--x-nhan); }

/* menu vong */
/* menu vong (KhungBanDo.java:110-117): nen den .55 trong 250 ms, menu mo + phong .92 -> 1 trong 350 ms */
.menu-nen { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: xmo-nen .25s ease-out both; }
@keyframes xmo-nen { from { opacity: 0; } to { opacity: 1; } }
.menu-vong { position: absolute; width: 360px; height: 360px; animation: xmo .35s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes xmo { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.menu-vong > svg { position: absolute; inset: 0; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.mui { fill: var(--x-seg); stroke: var(--x-vien); stroke-width: 1; cursor: pointer; transition: fill .15s; }
.mui:hover { fill: var(--x-chip); }
.mui.bat { fill: var(--x-nhan); }
.mui.mo { opacity: .3; cursor: default; }
.mui.mo:hover { fill: var(--x-seg); }
.mui-nhan { position: absolute; width: 100px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; color: var(--x-chu); }
.mui-nhan span { font-size: 12px; font-weight: 700; color: var(--x-mo); white-space: nowrap; }
.mui-nhan.do { color: #FF453A; }
.mui-nhan.do span { color: #FF453A; }
.mui-nhan.mo { opacity: .3; }
.mui-nhan.bat, .mui-nhan.bat span { color: #fff; }
.menu-giua { position: absolute; left: 120px; top: 120px; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.menu-giua-nut { width: 52px; height: 52px; border-radius: 50% !important; background: var(--x-nhan) !important; display: grid !important; place-items: center; pointer-events: auto; margin-top: 18px; }
.menu-giua span { font-size: 12px; font-weight: 700; color: var(--x-mo); max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-mini { position: relative; width: 34px; height: 22px; }
.bc-mini i { position: absolute; border-radius: 3px; background: currentColor; opacity: .85; }
.bang-bo-cuc { position: absolute; right: 26px; bottom: 112px; width: 430px; padding: 18px; border-radius: 26px; background: var(--x-the); border: 1px solid var(--x-vien); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); animation: xpop .3s cubic-bezier(.2, .9, .25, 1.1) both; }
.bang-bo-cuc > b { display: block; font-size: 15px; margin: 0 4px 12px; }
.ds-bo-cuc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.muc-bo-cuc { display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px !important; border-radius: 16px; background: var(--x-chip) !important; }
.muc-bo-cuc .bc-mini { width: 54px; height: 34px; color: var(--x-chu); }
.muc-bo-cuc span { font-size: 13px; font-weight: 600; }

/* cai dat nhanh */
.qs-nen { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.qs-bang { position: absolute; left: 0; right: 0; top: 150px; margin: 0 auto; width: 560px; padding: 22px; border-radius: 30px; background: var(--x-the); border: 1px solid var(--x-vien); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: xpop .3s both; }
.qs-tieu-de { display: flex; justify-content: space-between; align-items: center; font-size: 20px; margin-bottom: 16px; }
.qs-dong { width: 40px; height: 40px; border-radius: 50% !important; background: var(--x-chip) !important; display: grid !important; place-items: center; }
.qs-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qs-o { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px !important; border-radius: 20px; background: var(--x-chip) !important; text-align: left; }
.qs-o.bat { background: var(--x-nhan) !important; color: #fff !important; }
.qs-o b { font-size: 16px; margin-top: 6px; }
.qs-o span { font-size: 13px; opacity: .75; }
.qs-dong-truot { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: var(--x-chip); }
.qs-truot { flex: 1; height: 8px; border-radius: 4px; background: var(--x-vien); position: relative; }
.qs-truot i { position: absolute; left: 0; top: 0; bottom: 0; width: 78%; border-radius: inherit; background: var(--x-chu); }

/* thong bao */
.tb-xe { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 128px; padding: 12px 22px; border-radius: 999px; background: var(--x-the); border: 1px solid var(--x-vien); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); font-size: 15px; font-weight: 600; white-space: nowrap; animation: xpop .3s both; pointer-events: none; }