.vnises-lt{ --lt-s1:8px; --lt-s2:12px; --lt-s3:16px; --lt-s4:24px; --lt-s5:32px; --lt-edge:#C6D2E2; --lt-page:#070A16; --lt-card:#0F1630; --lt-card2:#141C38; --lt-line:rgba(198,214,240,.15); --lt-line2:rgba(198,214,240,.30); --lt-h:#F5EEDA; --lt-text:#D2DCEE; --lt-dim:#A3B0CB; --lt-nav-off:#B9C5DC; --lt-accent:#E6CD82; --lt-sel:#5FD0E0; --lt-qty:#FF8A64; --lt-stage:#070B16; --lt-field:#0B1224; --lt-sans:var(--sans,'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif); --lt-mono:var(--lt-sans); --lt-ease:cubic-bezier(.22,.61,.36,1); --lt-zone:206; --lt-zc:hsl(var(--lt-zone) 62% 66%); --lt-nav:200px; --lt-r:14px; --lt-r-out:20px; color-scheme:dark; display:block; position:relative; width:100%; margin:0 auto; max-width:1440px; background:var(--lt-page); color:var(--lt-text); font-family:var(--lt-sans); font-weight:400; font-size:clamp(.9rem,.18vw + .85rem,.98rem); line-height:1.6; border:1px solid var(--lt-edge); border-radius:var(--lt-r-out); box-shadow:0 18px 44px -30px rgba(0,0,0,.9); overflow:hidden; contain:layout paint style; -webkit-text-size-adjust:100%; } .vnises-lt{ letter-spacing:normal; text-transform:none; font-style:normal; } .vnises-lt *{ font-family:inherit; letter-spacing:inherit; text-transform:inherit; font-style:inherit; color:inherit; } .vnises-lt p, .vnises-lt li, .vnises-lt dt, .vnises-lt dd, .vnises-lt figcaption{ font-size:inherit; line-height:inherit; } .vnises-lt :where(button, input, select, textarea){ line-height:normal; } .vnises-lt em, .vnises-lt i{ font-style:italic; font-weight:inherit; } .vnises-lt b, .vnises-lt strong{ font-weight:600; } .vnises-lt,.vnises-lt *,.vnises-lt *::before,.vnises-lt *::after{ box-sizing:border-box; } .vnises-lt :where(button,input,select){ font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; } .vnises-lt ul,.vnises-lt ol{ margin:0; padding:0; list-style:none !important; } .vnises-lt li{ margin:0; padding:0; list-style:none !important; } .vnises-lt li::marker,.vnises-lt li::before{ content:none !important; display:none !important; } .vnises-lt p{ margin:0 0 .65em; } .vnises-lt p:last-child{ margin-bottom:0; } .vnises-lt :focus-visible{ outline:2px solid var(--lt-accent); outline-offset:2px; border-radius:5px; } .vnises-lt [hidden]{ display:none !important; } .vnises-lt .lt-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .vnises-lt .lt-mono{ font-family:var(--lt-mono); font-variant-numeric:tabular-nums; } .vnises-lt .lt-eyebrow{ font-family:var(--lt-mono); font-size:.64rem; letter-spacing:.19em; text-transform:uppercase; color:var(--lt-accent); margin:0; } .vnises-lt__topbar{ display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 18px; border-bottom:1px solid var(--lt-line); } .vnises-lt__title{ font-weight:600; color:var(--lt-h); margin:0; line-height:1.2; text-align:center; min-width:0; font-size:clamp(.82rem,1.25vw,1.02rem); letter-spacing:.14em; text-transform:uppercase; } .vnises-lt__zones{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--lt-line); } .vnises-lt__zone{ position:relative; appearance:none; background:transparent; border:0; border-right:1px solid var(--lt-line); padding:13px 8px 12px; cursor:pointer; text-align:center; font-family:var(--lt-mono); font-size:.64rem; letter-spacing:.10em; text-transform:uppercase; color:var(--lt-nav-off); line-height:1.35; font-weight:480; transition:color .22s var(--lt-ease), background .22s var(--lt-ease); } .vnises-lt__zone:last-child{ border-right:0; } .vnises-lt__zone:hover{ color:var(--lt-text); background:rgba(255,255,255,.022); } .vnises-lt__zone::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--lt-zc); transform:scaleX(0); transition:transform .26s var(--lt-ease); } .vnises-lt__zone[aria-selected="true"]{ color:var(--lt-h); background:rgba(255,255,255,.035); font-size:.68rem; font-weight:650; } .vnises-lt__zone[aria-selected="true"]::after{ transform:scaleX(1); } .vnises-lt__expbar{ display:flex; align-items:center; gap:22px; padding:6px 14px; border-bottom:1px solid var(--lt-line); } .vnises-lt__expbar .vnises-lt__exp{ flex:0 0 auto; order:1; } .vnises-lt__expbar .vnises-lt__topics{ order:2; flex:1 1 auto; display:flex; gap:6px; overflow-x:auto; border:0; padding:0; margin:0; scrollbar-width:none; min-width:0; } .vnises-lt__expbar .vnises-lt__topics::-webkit-scrollbar{ display:none; } .vnises-lt__exp{ appearance:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; font-size:.95rem; background:transparent; border:1px solid var(--lt-line); border-radius:9px; padding:6px 12px; cursor:pointer; color:var(--lt-dim); font-family:var(--lt-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; transition:all .18s var(--lt-ease); } .vnises-lt__exp:hover{ color:var(--lt-sel); border-color:var(--lt-sel); } .vnises-lt__exp[aria-expanded="true"]{ color:var(--lt-sel); border-color:var(--lt-sel); } .vnises-lt__topic{ flex:0 0 auto; appearance:none; background:transparent; border:1px solid transparent; border-radius:8px; padding:6px 11px; cursor:pointer; font-size:.78rem; color:var(--lt-nav-off); white-space:nowrap; transition:all .18s var(--lt-ease); } .vnises-lt__topic:hover{ color:var(--lt-text); background:rgba(255,255,255,.05); } .vnises-lt__topic[aria-selected="true"]{ color:var(--lt-h); background:rgba(95,208,224,.10); border-color:rgba(95,208,224,.55); font-weight:600; } .vnises-lt--hero{ background-color:var(--lt-page); background-image:linear-gradient(180deg,rgba(7,10,22,.28),rgba(7,10,22,.42)),var(--lt-hero); background-size:100% 100%,100% auto; background-position:top center,top center; background-repeat:no-repeat,no-repeat; } .vnises-lt--hero > .vnises-lt__ws{ background-color:var(--lt-page); } .vnises-lt--hero .vnises-lt__title, .vnises-lt--hero .vnises-lt__zone, .vnises-lt--hero .vnises-lt__topic{ text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55); } .vnises-lt__ws{ display:grid; gap:var(--lt-s2); grid-template-columns:var(--lt-nav) minmax(0,1fr); transition:grid-template-columns .28s var(--lt-ease); padding:var(--lt-s2); min-height:320px; } .vnises-lt__nav{ display:flex; flex-direction:column; gap:3px; min-width:0; border-right:1px solid var(--lt-line); padding-right:var(--lt-s2); transition:opacity .22s var(--lt-ease); } .vnises-lt__item{ width:100%; text-align:left; appearance:none; background:transparent; border:0; border-left:2px solid transparent; border-radius:0 7px 7px 0; padding:8px 10px; cursor:pointer; color:var(--lt-text); font-size:.88rem; line-height:1.42; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:background .16s var(--lt-ease), color .16s var(--lt-ease); } .vnises-lt__item:hover{ background:rgba(255,255,255,.035); } .vnises-lt__item[aria-current="true"]{ background:rgba(255,255,255,.045); color:var(--lt-h); font-weight:700; border-left-color:rgba(95,208,224,.7); } .vnises-lt__trong{ border:1px dashed var(--lt-line2); border-radius:10px; padding:14px; color:var(--lt-dim); font-size:.82rem; line-height:1.6; } .vnises-lt__stage{ display:flex; flex-direction:column; gap:var(--lt-s2); min-width:0; min-height:0; } .vnises-lt__qbox{ padding:2px 4px 0; } .vnises-lt__q{ font-weight:600; color:var(--lt-h); margin:0; font-size:clamp(1.14rem,1.85vw,1.52rem); line-height:1.3; letter-spacing:.005em; } .vnises-lt__tabpanel{ min-width:0; } .vnises-lt__canvaswrap{ position:relative; min-height:clamp(300px,52svh,620px); background:var(--lt-stage); border:1px solid var(--lt-line); border-radius:var(--lt-r); overflow:hidden; } .vnises-lt__pending{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; text-align:center; } .vnises-lt__pending p{ max-width:46ch; font-size:.84rem; color:var(--lt-dim); line-height:1.65; margin:0; } .vnises-lt__pending .lt-eyebrow{ color:var(--lt-zc); } .vnises-lt__lvlbar{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 var(--lt-s3); } .vnises-lt__lvlbtn{ appearance:none; background:transparent; border:1px solid var(--lt-line); border-radius:99px; padding:4px 10px; cursor:pointer; color:var(--lt-dim); font-family:var(--lt-mono); font-size:.64rem; letter-spacing:.06em; transition:all .18s var(--lt-ease); white-space:nowrap; } .vnises-lt__lvlbtn:hover{ color:var(--lt-text); border-color:var(--lt-line2); } .vnises-lt__lvlbtn[aria-selected="true"]{ background:var(--lt-sel); border-color:var(--lt-sel); color:#06121A; font-weight:600; } .vnises-lt__note{ margin-top:var(--lt-s4); padding:11px 13px; border-radius:9px; border:1px dashed var(--lt-line2); color:var(--lt-dim); font-size:.78rem; line-height:1.6; } .vnises-lt .vnises-lt__bai p, .vnises-lt p.vnises-lt__simlead{ font-weight:400; max-width:none; text-align:justify; text-justify:inter-word; } .vnises-lt .vnises-lt__bai strong, .vnises-lt .vnises-lt__bai b{ font-weight:inherit; } .vnises-lt__bai p{ color:var(--lt-text); font-size:.92rem; line-height:1.72; margin:0 0 .8em; } .vnises-lt .vnises-lt__bai [data-muc] + [data-muc]{ margin-top:.8em; } .vnises-lt__bai strong, .vnises-lt__bai em{ color:var(--lt-h); } .vnises-lt__eq{ font-family:var(--lt-mono); font-size:.95rem; color:var(--lt-h); background:var(--lt-field); border:1px solid var(--lt-line); border-left:2px solid var(--lt-accent); border-radius:8px; padding:9px 13px; margin:0 0 10px; overflow-x:auto; white-space:nowrap; } @media (min-width:561px) and (max-height:880px){ .vnises-lt .vnises-lt__simbar{ padding:3px 10px; } .vnises-lt .vnises-lt__simout{ grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:3px 12px; } .vnises-lt .vnises-lt__simo{ padding-top:2px; } .vnises-lt .vnises-lt__simbtn{ padding:6px 12px; } } @media (min-width:561px) and (max-height:772px){ .vnises-lt .vnises-lt__simout{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } } .vnises-lt__phanbody{ overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } .vnises-lt__phanbody:focus-visible{ outline:2px solid var(--lt-sel); outline-offset:2px; } .vnises-lt__phanbody::-webkit-scrollbar{ width:10px; } .vnises-lt__phanbody::-webkit-scrollbar-thumb{ background:var(--lt-line2); border-radius:6px; } .vnises-lt__phanbody::-webkit-scrollbar-track{ background:transparent; } .vnises-lt__hinh{ margin:0 0 1em; } .vnises-lt__hinh svg{ display:block; width:100%; max-width:560px; height:auto; margin:0 auto; } .vnises-lt__hinh svg text{ font-family:var(--lt-sans); } .vnises-lt__hinh figcaption{ color:var(--lt-dim); font-size:.82rem; line-height:1.6; margin:8px auto 0; max-width:560px; text-align:left; } .vnises-lt__simlead{ color:var(--lt-text); font-size:.9rem; line-height:1.65; margin:0 0 var(--lt-s3); } .vnises-lt__simhost{ min-width:0; } .vnises-lt__sim{ display:flex; flex-direction:column; gap:var(--lt-s3); } .vnises-lt__simgrid{ display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:var(--lt-s3); align-items:start; } .vnises-lt__simstage{ min-width:0; background:var(--lt-stage); border:1px solid var(--lt-line); border-radius:var(--lt-r); overflow:hidden; } .vnises-lt__simcv{ display:block; width:100%; } .vnises-lt__simcanh{ display:block; width:100%; border-bottom:1px solid var(--lt-line); } .vnises-lt__simkhung{ position:relative; } .vnises-lt__simkhung .vnises-lt__siminset{ position:absolute; right:10px; bottom:10px; border:1px solid rgba(150,178,215,.38); border-radius:10px; background:rgba(6,10,18,.9); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); cursor:zoom-in; } .vnises-lt__simkhung .vnises-lt__siminset.is-to{ right:8px; bottom:8px; cursor:zoom-out; background:#060a12; } .vnises-lt__simkhung.is-inset .vnises-lt__simcanh{ border-bottom:0; } .vnises-lt__simbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--lt-line); } .vnises-lt__simbtn{ appearance:none; min-height:36px; padding:6px 14px; border-radius:9px; cursor:pointer; border:1px solid var(--lt-line2); background:transparent; color:var(--lt-text); font:inherit; font-size:.84rem; transition:all .18s var(--lt-ease); } .vnises-lt__simbtn:hover{ border-color:var(--lt-sel); color:var(--lt-h); } .vnises-lt__simbtn:disabled{ opacity:.38; cursor:not-allowed; box-shadow:none; } .vnises-lt__simmoc{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; } .vnises-lt__simmoc .vnises-lt__simbtn{ padding:5px 10px; } .vnises-lt__simbtn.is-chinh{ background:var(--lt-sel); border-color:var(--lt-sel); color:#06121A; font-weight:600; } .vnises-lt__simbtn:focus-visible, .vnises-lt__simsel:focus-visible, .vnises-lt__simrange:focus-visible{ outline:2px solid var(--lt-sel); outline-offset:2px; } .vnises-lt__simtd{ margin-left:auto; display:flex; align-items:center; gap:6px; } .vnises-lt__simctl{ display:flex; flex-direction:column; gap:var(--lt-s3); min-width:0; } .vnises-lt__simrow{ display:grid; grid-template-columns:1fr auto auto; align-items:baseline; column-gap:6px; row-gap:4px; } .vnises-lt__simrow > .vnises-lt__simrange, .vnises-lt__simrow > .vnises-lt__simsel, .vnises-lt__simrow > .vnises-lt__simhint{ grid-column:1 / -1; } .vnises-lt__simlbl{ color:var(--lt-dim); font-size:.76rem; font-weight:400; } .vnises-lt__simval{ font-family:var(--lt-mono); font-size:.86rem; color:var(--lt-h); } .vnises-lt__simunit{ font-family:var(--lt-mono); font-size:.72rem; color:var(--lt-dim); } .vnises-lt__simhint{ margin:0; font-size:.72rem; color:var(--lt-dim); } .vnises-lt__simsel{ width:100%; min-width:0; min-height:36px; -webkit-appearance:none; appearance:none; color-scheme:dark; padding:6px 26px 6px 9px; border-radius:9px; border:1px solid var(--lt-line); background-color:var(--lt-field); color:var(--lt-text); font:inherit; font-size:.8rem; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--lt-dim) 50%), linear-gradient(135deg,var(--lt-dim) 50%,transparent 50%); background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .vnises-lt__simtd .vnises-lt__simsel{ width:auto; } .vnises-lt__simrange{ width:100%; min-height:28px; accent-color:var(--lt-sel); } .vnises-lt__simout{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 14px; margin:0; } .vnises-lt__simo{ border-top:1px solid var(--lt-line); padding-top:6px; min-width:0; } .vnises-lt__simo dt{ color:var(--lt-dim); font-size:.72rem; } .vnises-lt__simo dd{ margin:2px 0 0; font-family:var(--lt-mono); font-size:.86rem; color:var(--lt-h); overflow-wrap:anywhere; } @media (max-width:1020px){ .vnises-lt__simgrid{ grid-template-columns:minmax(0,1fr); } } @media (pointer:coarse){ .vnises-lt__simrange{ min-height:36px; } .vnises-lt__simbtn{ min-height:44px; } } @media (max-width:1020px){ .vnises-lt__tabpanel[data-panel="sim"], .vnises-lt__phanbody{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--lt-line2) transparent; background: linear-gradient(var(--lt-page) 35%, rgba(0,0,0,0)) top / 100% 22px no-repeat local, linear-gradient(rgba(0,0,0,0), var(--lt-page) 65%) bottom / 100% 22px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(170,190,230,.28), rgba(0,0,0,0)) top / 100% 11px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(170,190,230,.28), rgba(0,0,0,0)) bottom / 100% 11px no-repeat scroll; } .vnises-lt__tabpanel[data-panel="sim"]{ border-bottom:1px solid var(--lt-line); } .vnises-lt__tabpanel[data-panel="sim"]::-webkit-scrollbar, .vnises-lt__phanbody::-webkit-scrollbar{ width:8px; } .vnises-lt__tabpanel[data-panel="sim"]::-webkit-scrollbar-thumb{ background:var(--lt-line2); border-radius:6px; } .vnises-lt__tabpanel[data-panel="sim"]::-webkit-scrollbar-track{ background:transparent; } .vnises-lt__tabpanel[data-panel="sim"]:focus-visible{ outline:2px solid var(--lt-sel); outline-offset:2px; } } .vnises-lt__picker{ display:none; } @media (min-width:1021px){ .vnises-lt.is-navoff .vnises-lt__ws{ grid-template-columns:0 minmax(0,1fr); } .vnises-lt.is-navoff .vnises-lt__nav{ opacity:0; pointer-events:none; padding:0; border-width:0; overflow:hidden; } } @media (max-width:1020px){ .vnises-lt{ border:0; border-radius:0; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .vnises-lt__zones, .vnises-lt__expbar, .vnises-lt__nav{ display:none; } .vnises-lt__picker{ display:grid; grid-template-columns:1fr; gap:5px; padding:7px 10px; border-bottom:1px solid var(--lt-line); } .vnises-lt__sel{ width:100%; min-width:0; -webkit-appearance:none; appearance:none; color-scheme:dark; padding:7px 26px 7px 9px; border-radius:9px; border:1px solid var(--lt-line); background-color:var(--lt-field); color:var(--lt-text); font-family:inherit; font-size:.8rem; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--lt-dim) 50%), linear-gradient(135deg,var(--lt-dim) 50%,transparent 50%); background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; } .vnises-lt__sel:disabled{ opacity:.45; } .vnises-lt__sel:focus-visible{ outline:2px solid var(--lt-sel); outline-offset:2px; } .vnises-lt__ws{ grid-template-columns:minmax(0,1fr); } .vnises-lt__canvaswrap{ min-height:0; aspect-ratio:16 / 10; } } @media (max-width:1020px){ .vnises-lt__picker .vnises-lt__sel{ margin-top:7px; } } @media (prefers-reduced-motion:reduce){ .vnises-lt *,.vnises-lt *::before,.vnises-lt *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } .vnises-lt .lt-mono{ font-feature-settings:"tnum" 1; } .vnises-lt .lt-eyebrow{ text-align:left; hyphens:none; } .vnises-lt .vnises-lt__title{ font-family:var(--lt-sans); } .vnises-lt .vnises-lt__q{ font-family:var(--lt-sans); text-transform:none; font-weight:600; font-size:clamp(1.14rem,1.85vw,1.52rem); line-height:1.3; letter-spacing:.005em; } .vnises-lt .vnises-lt__item{ font-family:var(--lt-sans); letter-spacing:normal; text-transform:none; font-size:.88rem; font-weight:400; line-height:1.58; display:block; -webkit-line-clamp:unset; overflow:visible; } .vnises-lt .vnises-lt__item[aria-current="true"]{ font-weight:600; } .vnises-lt .vnises-lt__topic{ font-family:var(--lt-sans); font-size:.78rem; letter-spacing:.01em; text-transform:none; } .vnises-lt .vnises-lt__zone[aria-selected="true"]{ font-weight:600; } .vnises-lt .vnises-lt__note{ font-size:.75rem; line-height:1.6; } .vnises-lt .vnises-lt__pending p{ text-align:justify; hyphens:auto; } .vnises-lt .vnises-lt__bai p, .vnises-lt p.vnises-lt__simlead{ font-family:var(--lt-sans); letter-spacing:normal; font-size:.86rem; line-height:1.62; font-weight:420; margin:0 0 .72em; text-align:justify; hyphens:auto; color:var(--lt-text); } .vnises-lt .vnises-lt__bai b, .vnises-lt .vnises-lt__bai strong{ color:var(--lt-h); font-weight:600; } .vnises-lt .vnises-lt__bai em{ color:var(--lt-text); } .vnises-lt .vnises-lt__eq{ font-family:var(--lt-mono); font-size:.76rem; color:var(--lt-accent); background:var(--lt-card2); border:0; border-left:2px solid var(--lt-line2); padding:7px 11px; margin:0 0 5px; border-radius:0 6px 6px 0; overflow-x:auto; white-space:nowrap; line-height:1.62; text-align:left; hyphens:none; } .vnises-lt .vnises-lt__hinh figcaption{ font-family:var(--lt-sans); font-size:.79rem; line-height:1.5; color:var(--lt-dim); text-align:start; } .vnises-lt .vnises-lt__simhint{ font-family:var(--lt-sans); font-size:.79rem; line-height:1.5; color:var(--lt-dim); } .vnises-lt .vnises-lt__simlbl{ font-family:var(--lt-sans); font-size:.86rem; line-height:1.5; color:var(--lt-text); text-wrap:balance; } .vnises-lt .vnises-lt__simval{ font-family:var(--lt-mono); font-size:.86rem; font-weight:600; color:var(--lt-h); } .vnises-lt .vnises-lt__simunit{ font-family:var(--lt-mono); font-size:.78rem; color:var(--lt-dim); margin-left:4px; } .vnises-lt .vnises-lt__simo dt{ font-family:var(--lt-sans); font-size:.86rem; line-height:1.5; color:var(--lt-dim); } .vnises-lt .vnises-lt__simo dd{ font-family:var(--lt-mono); font-size:.86rem; color:var(--lt-text); } .vnises-lt .vnises-lt__simbtn{ font-family:var(--lt-mono); font-size:.63rem; letter-spacing:.05em; text-transform:none; font-weight:450; line-height:normal; } .vnises-lt .vnises-lt__simbtn.is-chinh{ font-weight:600; } .vnises-lt .vnises-lt__simsel{ font-size:.82rem; } .vnises-lt{ --lt-gap:12px; --lt-fit:94svh; --lt-chrome:112px; --lt-wsmin:470px; --lt-wsmax:1040px; --lt-ws:clamp(var(--lt-wsmin), calc(var(--lt-fit) - var(--lt-chrome)), var(--lt-wsmax)); } @supports not (height:1svh){ .vnises-lt{ --lt-fit:94vh; } } .vnises-lt .vnises-lt__ws{ --lt-codinh:1; height:var(--lt-ws); min-height:0; padding:var(--lt-gap); gap:var(--lt-gap); } .vnises-lt .vnises-lt__nav{ min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } .vnises-lt .vnises-lt__stage{ min-height:0; overflow:hidden; } .vnises-lt .vnises-lt__stage > .vnises-lt__tabpanel:not([hidden]){ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } @media (max-width:1180px){ .vnises-lt{ --lt-nav:200px; } } @media (max-width:1020px){ .vnises-lt{ --lt-chrome:214px; --lt-wsmin:430px; } } @media (max-height:760px) and (min-width:821px){ .vnises-lt{ --lt-fit:96svh; --lt-wsmin:410px; } } @media (max-width:820px){ .vnises-lt .vnises-lt__ws{ --lt-codinh:0; height:auto; min-height:320px; } .vnises-lt .vnises-lt__stage{ overflow:visible; } } .vnises-lt{ --lt-line:rgba(150,178,215,.18); border-color:rgba(150,178,215,.4); } .vnises-lt.vnises-lt--hero{ background-image:linear-gradient(rgba(7,10,22,.3),rgba(7,10,22,.3)),var(--lt-hero); background-size:100% 100%,max(100%,680px) auto; background-position:center top,center top; background-repeat:no-repeat; } .vnises-lt.vnises-lt--hero .vnises-lt__zones, .vnises-lt.vnises-lt--hero .vnises-lt__expbar{ background-color:rgba(7,10,22,.75); } .vnises-lt.vnises-lt--hero .vnises-lt__title, .vnises-lt.vnises-lt--hero .vnises-lt__zone, .vnises-lt.vnises-lt--hero .vnises-lt__topic{ text-shadow:none; } .vnises-lt .vnises-lt__topbar{ padding:3px 18px; background:radial-gradient(120% 180% at 50% -60%,rgba(95,208,224,.14),transparent 62%); } .vnises-lt .vnises-lt__title{ font-size:clamp(.96rem,1.47vw,1.2rem); font-weight:700; letter-spacing:.13em; line-height:1; } .vnises-lt.vnises-lt .vnises-lt__title{ text-shadow:0 1px 18px rgba(95,208,224,.20); } .vnises-lt .vnises-lt__zones{ min-height:30px; } .vnises-lt .vnises-lt__zone{ padding:1px 14px; font-family:var(--lt-sans); font-size:.72rem; font-weight:480; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; color:var(--lt-text); } .vnises-lt .vnises-lt__zone[aria-selected="true"]{ font-size:.76rem; font-weight:600; color:var(--lt-h); background:rgba(255,255,255,.035); } .vnises-lt .vnises-lt__expbar{ min-height:34px; padding:2px 16px; gap:14px; } .vnises-lt .vnises-lt__exp{ width:30px; height:30px; border-color:var(--lt-sel); color:var(--lt-sel); background:transparent; border-radius:9px; } .vnises-lt .vnises-lt__topic{ line-height:1.3; min-height:34px; color:var(--lt-text); } .vnises-lt .vnises-lt__topic[aria-selected="true"]{ color:var(--lt-h); } .vnises-lt .vnises-lt__nav{ background:var(--lt-page); border-right:1px solid var(--lt-line); } .vnises-lt .vnises-lt__item{ position:relative; line-height:1.35; min-height:34px; padding:6px 16px 6px 18px; border-left:0; color:var(--lt-text); } .vnises-lt .vnises-lt__item::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:18px; border-radius:2px; background:var(--lt-sel); transition:width .18s ease; } .vnises-lt .vnises-lt__item[aria-current="true"]{ background:rgba(255,255,255,.035); color:var(--lt-h); font-weight:600; } .vnises-lt .vnises-lt__item[aria-current="true"]::before{ width:2px; } .vnises-lt .vnises-lt__lvlbtn{ font-size:.78rem; font-weight:400; letter-spacing:.01em; line-height:1.6; min-height:34px; border-radius:8px; padding:6px 11px; color:var(--lt-text); border:1px solid var(--lt-line); background:rgba(11,18,36,.5); } .vnises-lt .vnises-lt__lvlbtn[aria-selected="true"]{ font-weight:600; color:var(--lt-h); border-color:rgba(95,208,224,.55); background:rgba(95,208,224,.10); } .vnises-lt .vnises-lt__simo dt{ color:var(--lt-text); line-height:1.4; } .vnises-lt .vnises-lt__simo dd{ font-family:var(--lt-sans); font-size:14px; font-weight:500; letter-spacing:-.015em; line-height:1.4; color:var(--lt-h); } .vnises-lt .vnises-lt__simunit{ font-weight:600; line-height:1.4; } .vnises-lt .vnises-lt__simbtn{ font-size:.63rem; font-weight:600; letter-spacing:.05em; line-height:1.6; min-height:34px; padding:6px 12px; border-radius:8px; color:var(--lt-text); background:rgba(95,208,232,.16); border:1px solid rgba(95,208,232,.5); } .vnises-lt .vnises-lt__simbtn:hover{ border-color:var(--lt-sel); color:var(--lt-h); } .vnises-lt .vnises-lt__simbtn.is-chinh{ color:var(--lt-h); background:rgba(95,208,232,.16); border-color:var(--lt-sel); } .vnises-lt .vnises-lt__simlbl{ font-size:13.5px; line-height:1.6; color:var(--lt-dim); } .vnises-lt .vnises-lt__simrange{ -webkit-appearance:none; appearance:none; min-height:0; height:6px; margin:12px 0; border-radius:99px; background:rgba(198,214,240,.15); cursor:pointer; } .vnises-lt .vnises-lt__simrange::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:19px; height:19px; border-radius:50%; background:var(--lt-sel); border:3px solid #0A1220; box-shadow:0 0 0 1px var(--lt-sel); cursor:pointer; } .vnises-lt .vnises-lt__simrange::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--lt-sel); border:3px solid #0A1220; box-shadow:0 0 0 1px var(--lt-sel); cursor:pointer; } .vnises-lt .vnises-lt__simrange::-moz-range-track{ height:6px; border-radius:99px; background:rgba(198,214,240,.15); } .vnises-lt .vnises-lt__simrange:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--lt-sel); } .vnises-lt .vnises-lt__simhint{ font-size:.86rem; line-height:1.55; color:var(--lt-dim); } .vnises-lt .vnises-lt__hinh figcaption{ font-size:13px; line-height:1.5; color:var(--lt-dim); } .vnises-lt .vnises-lt__eq{ margin:.3em 0 1em; padding:6px 0; font-family:var(--lt-sans); font-size:14.5px; line-height:1.6; text-align:center; color:var(--lt-h); background:none; border:0; border-radius:0; white-space:normal; } .vnises-lt .vnises-lt__phanbody, .vnises-lt .vnises-lt__tabpanel{ scrollbar-width:thin; scrollbar-color:rgba(150,178,215,.18) transparent; } .vnises-lt .vnises-lt__phanbody:hover, .vnises-lt .vnises-lt__phanbody.is-scrolling, .vnises-lt .vnises-lt__tabpanel:hover, .vnises-lt .vnises-lt__tabpanel.is-scrolling{ scrollbar-color:rgba(150,178,215,.4) transparent; } .vnises-lt .vnises-lt__phanbody::-webkit-scrollbar, .vnises-lt .vnises-lt__tabpanel::-webkit-scrollbar{ width:7px; } .vnises-lt .vnises-lt__phanbody::-webkit-scrollbar-thumb, .vnises-lt .vnises-lt__tabpanel::-webkit-scrollbar-thumb{ background:rgba(150,178,215,.16); border-radius:4px; } .vnises-lt .vnises-lt__phanbody:hover::-webkit-scrollbar-thumb, .vnises-lt .vnises-lt__phanbody.is-scrolling::-webkit-scrollbar-thumb, .vnises-lt .vnises-lt__tabpanel:hover::-webkit-scrollbar-thumb, .vnises-lt .vnises-lt__tabpanel.is-scrolling::-webkit-scrollbar-thumb{ background:rgba(150,178,215,.4); } .vnises-lt .vnises-lt__nav{ scrollbar-width:thin; scrollbar-color:rgba(198,214,240,.08) transparent; } .vnises-lt .vnises-lt__nav::-webkit-scrollbar{ width:6px; } .vnises-lt .vnises-lt__nav::-webkit-scrollbar-thumb{ background:rgba(198,214,240,.08); border-radius:4px; } .vnises-lt .vnises-lt__nav::-webkit-scrollbar-track{ background:transparent; } .vnises-lt .vnises-lt__insp{ font-weight:400; } .vnises-lt{ --lt-blur:14px; --lt-glass:linear-gradient(180deg,rgba(24,34,62,.62),rgba(11,18,36,.72)); --lt-glass-bd:rgba(198,214,240,.16); --lt-glass-hi:rgba(255,255,255,.07); --lt-glass-sh:0 10px 28px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.24); --lt-cy:95,208,224; --lt-py:20px; --lt-px:22px; --lt-pr:32px; border-color:rgba(150,178,215,.26); box-shadow:0 28px 70px rgba(0,0,0,.52),0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06); } .vnises-lt ::selection{ background:rgba(var(--lt-cy),.3); color:#fff; } .vnises-lt::before{ content:""; position:absolute; left:8%; right:8%; top:0; height:1px; z-index:6; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(var(--lt-cy),.55),rgba(230,205,130,.5),transparent); } .vnises-lt .vnises-lt__topbar{ background-image:radial-gradient(120% 200% at 50% -70%,rgba(var(--lt-cy),.2),transparent 62%),linear-gradient(180deg,rgba(24,34,62,.5),rgba(7,10,22,0)); -webkit-backdrop-filter:blur(var(--lt-blur)) saturate(140%); backdrop-filter:blur(var(--lt-blur)) saturate(140%); } .vnises-lt .vnises-lt__expbar, .vnises-lt .vnises-lt__zones, .vnises-lt .vnises-lt__picker{ background-image:linear-gradient(180deg,rgba(24,34,62,.4),rgba(7,10,22,.1)); -webkit-backdrop-filter:blur(var(--lt-blur)) saturate(140%); backdrop-filter:blur(var(--lt-blur)) saturate(140%); } .vnises-lt .vnises-lt__zone{ font-size:.78rem; min-height:38px; transition:color .22s var(--lt-ease),background-color .22s var(--lt-ease),background-image .22s var(--lt-ease); } .vnises-lt .vnises-lt__zone[aria-selected="true"]{ font-size:.78rem; background-image:linear-gradient(180deg,transparent,hsl(var(--lt-zone) 62% 66% / .14)); } .vnises-lt .vnises-lt__zone::after{ transition:transform .26s var(--lt-ease),box-shadow .26s var(--lt-ease); box-shadow:0 0 14px var(--lt-zc); } .vnises-lt .vnises-lt__expbar{ min-height:46px; } .vnises-lt .vnises-lt__exp{ width:34px; height:34px; border-radius:12px; border-color:var(--lt-glass-bd); background-image:var(--lt-glass); box-shadow:inset 0 1px 0 var(--lt-glass-hi); transition:color .18s var(--lt-ease),border-color .18s var(--lt-ease),box-shadow .18s var(--lt-ease); } .vnises-lt .vnises-lt__exp[aria-expanded="true"]{ border-color:rgba(var(--lt-cy),.55); box-shadow:inset 0 1px 0 var(--lt-glass-hi),0 0 16px rgba(var(--lt-cy),.25); } .vnises-lt .vnises-lt__topic{ min-height:30px; padding:0 14px; font-size:.76rem; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; transition:color .18s var(--lt-ease),border-color .18s var(--lt-ease),background-color .18s var(--lt-ease),box-shadow .18s var(--lt-ease); } .vnises-lt .vnises-lt__topic[aria-selected="true"]{ background-image:linear-gradient(135deg,rgba(var(--lt-cy),.22),rgba(var(--lt-cy),.07)); box-shadow:0 0 0 3px rgba(var(--lt-cy),.1),0 4px 12px rgba(0,0,0,.25); } .vnises-lt .vnises-lt__nav{ background-image:linear-gradient(180deg,rgba(18,27,52,.4),rgba(7,10,22,0) 55%); } .vnises-lt .vnises-lt__item{ flex:0 0 auto; font-size:.84rem; border-radius:0 10px 10px 0; transition:background-color .18s var(--lt-ease),background-image .18s var(--lt-ease),color .18s var(--lt-ease); } .vnises-lt .vnises-lt__item[aria-current="true"]{ background-image:linear-gradient(90deg,rgba(var(--lt-cy),.16),rgba(var(--lt-cy),.02) 85%); box-shadow:0 4px 14px rgba(0,0,0,.2); } .vnises-lt .vnises-lt__item::before{ box-shadow:0 0 10px rgba(var(--lt-cy),.5); } .vnises-lt .vnises-lt__stage{ gap:0; } .vnises-lt .vnises-lt__qbox{ padding-bottom:12px; } .vnises-lt .vnises-lt__q{ text-wrap:balance; text-shadow:0 1px 18px rgba(var(--lt-cy),.12); } .vnises-lt{ --lt-nav:168px; --lt-insp:340px; } @media (max-width:1180px){ .vnises-lt{ --lt-nav:156px; --lt-insp:clamp(300px,30vw,340px); } } @media (min-width:1021px){ .vnises-lt .vnises-lt__ws, .vnises-lt.is-navoff .vnises-lt__ws{ grid-template-columns:var(--lt-nav) minmax(0,1fr) var(--lt-insp); grid-template-rows:minmax(0,1fr); } .vnises-lt.is-navoff .vnises-lt__ws{ grid-template-columns:0 minmax(0,1fr) var(--lt-insp); } } .vnises-lt .vnises-lt__stage{ --lt-py:12px; --lt-px:12px; --lt-pr:16px; } .vnises-lt .vnises-lt__stage > .vnises-lt__tabpanel:not([hidden]){ padding:var(--lt-py) var(--lt-pr) var(--lt-py) var(--lt-px); max-height:none !important; border:1px solid var(--lt-glass-bd); border-radius:16px; background-image:linear-gradient(180deg,rgba(18,27,52,.42),rgba(7,10,22,.1) 60%); box-shadow:0 18px 40px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); } .vnises-lt .vnises-lt__insp{ --lt-py:16px; --lt-px:18px; --lt-pr:24px; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--lt-glass-bd); border-radius:16px; background-image:linear-gradient(180deg,rgba(18,27,52,.42),rgba(7,10,22,.1) 60%); box-shadow:0 18px 40px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); } .vnises-lt .vnises-lt__lvlbar{ position:relative; z-index:3; flex:0 0 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:0; margin:0; padding:0; border-bottom:1px solid var(--lt-line); background-image:var(--lt-glass); -webkit-backdrop-filter:blur(var(--lt-blur)) saturate(140%); backdrop-filter:blur(var(--lt-blur)) saturate(140%); } .vnises-lt .vnises-lt__lvlbtn{ position:relative; min-height:40px; padding:0 2px; border:0; border-radius:0; font-size:.76rem; letter-spacing:0; line-height:1.2; text-align:center; text-wrap:balance; display:flex; align-items:center; justify-content:center; color:var(--lt-dim); background-color:transparent; background-image:none; box-shadow:none; transition:color .18s var(--lt-ease); } .vnises-lt .vnises-lt__lvlbtn:hover{ color:var(--lt-text); } .vnises-lt .vnises-lt__lvlbtn::after{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--lt-sel),var(--lt-accent)); box-shadow:0 0 10px rgba(var(--lt-cy),.45); transform:scaleX(0); transition:transform .24s var(--lt-ease); } .vnises-lt .vnises-lt__lvlbtn[aria-selected="true"]{ color:var(--lt-h); font-weight:600; border:0; background-color:transparent; background-image:linear-gradient(180deg,transparent,rgba(var(--lt-cy),.08)); } .vnises-lt .vnises-lt__lvlbtn[aria-selected="true"]::after{ transform:scaleX(1); } .vnises-lt .vnises-lt__phanbody{ flex:1 1 auto; min-height:0; max-height:none !important; padding:var(--lt-py) var(--lt-pr) var(--lt-py) var(--lt-px); } .vnises-lt .vnises-lt__insp > .vnises-lt__note{ flex:0 0 auto; margin:0 var(--lt-pr) var(--lt-py) var(--lt-px); } .vnises-lt .vnises-lt__note{ border-radius:12px; background-image:linear-gradient(150deg,rgba(198,214,240,.07),rgba(198,214,240,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .vnises-lt .vnises-lt__canvaswrap, .vnises-lt .vnises-lt__simstage{ border-color:rgba(198,214,240,.2); box-shadow:0 18px 40px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); } .vnises-lt .vnises-lt__simbar{ background-image:var(--lt-glass); -webkit-backdrop-filter:blur(var(--lt-blur)) saturate(140%); backdrop-filter:blur(var(--lt-blur)) saturate(140%); } .vnises-lt .vnises-lt__simbtn{ min-height:36px; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:color .18s var(--lt-ease),border-color .18s var(--lt-ease),background-color .18s var(--lt-ease),box-shadow .18s var(--lt-ease); } .vnises-lt .vnises-lt__simsel{ border-radius:10px; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9bad6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:12px 8px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .vnises-lt .vnises-lt__simsel:focus{ box-shadow:0 0 0 3px rgba(var(--lt-cy),.18); } @media (min-width:1021px){ .vnises-lt{ --lt-chrome:116px; } } .vnises-lt .vnises-lt__simgrid{ grid-template-columns:minmax(0,1fr); } .vnises-lt .vnises-lt__xp{ display:flex; flex-direction:column; gap:14px; } .vnises-lt .vnises-lt__xp .vnises-lt__simlead{ margin:0; } .vnises-lt .vnises-lt__xpctl{ display:block; } .vnises-lt .vnises-lt__xpctl > .vnises-lt__simctl{ padding:0; border:0; background:none; box-shadow:none; } .vnises-lt .vnises-lt__subbar{ position:relative; z-index:2; flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:6px; margin:0; padding:12px var(--lt-pr) 10px var(--lt-px); background-color:rgb(8,12,26); box-shadow:0 1px 0 rgba(198,214,240,.1),0 12px 14px -12px rgba(0,0,0,.6); } .vnises-lt .vnises-lt__subbtn{ appearance:none; cursor:pointer; min-height:32px; padding:0 4px; font-size:.72rem; letter-spacing:.02em; line-height:1.25; text-align:center; text-wrap:balance; display:flex; align-items:center; justify-content:center; color:var(--lt-text); border:1px solid var(--lt-line); border-radius:12px; background-color:rgba(11,18,36,.5); background-image:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)); box-shadow:inset 0 1px 0 var(--lt-glass-hi); transition:color .18s var(--lt-ease),border-color .18s var(--lt-ease),background-color .18s var(--lt-ease),box-shadow .18s var(--lt-ease); } .vnises-lt .vnises-lt__subbtn[aria-selected="true"]{ font-weight:600; color:var(--lt-h); border-color:rgba(var(--lt-cy),.55); background-image:linear-gradient(135deg,rgba(var(--lt-cy),.22),rgba(var(--lt-cy),.07)); box-shadow:0 0 0 3px rgba(var(--lt-cy),.1),inset 0 1px 0 rgba(255,255,255,.08); } .vnises-lt .vnises-lt__hinh figcaption{ text-align:left; font-weight:400; font-style:normal; } .vnises-lt .vnises-lt__sel{ min-height:38px; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9bad6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 13px center !important; background-size:12px 8px !important; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px -8px rgba(0,0,0,.6); transition:border-color .18s var(--lt-ease),box-shadow .18s var(--lt-ease); } .vnises-lt .vnises-lt__sel:focus{ box-shadow:0 0 0 3px rgba(var(--lt-cy),.18); } @media (max-width:1020px){ .vnises-lt .vnises-lt__lvlbtn{ min-height:36px; } .vnises-lt .vnises-lt__subbar{ padding-top:10px; } .vnises-lt .vnises-lt__picker{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px 10px 6px; } .vnises-lt .vnises-lt__picker .vnises-lt__sel{ margin-top:0; padding-top:8px; padding-bottom:8px; font-size:.84rem; } .vnises-lt .vnises-lt__picker .vnises-lt__sel:nth-child(3){ grid-column:1 / -1; } .vnises-lt{ display:flex; flex-direction:column; height:100vh; height:100svh; min-height:520px; } .vnises-lt > .vnises-lt__topbar, .vnises-lt > .vnises-lt__picker{ flex:0 0 auto; } .vnises-lt .vnises-lt__ws{ flex:1 1 0; min-height:0; height:auto; padding:8px 10px; gap:8px; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1.15fr) minmax(0,1fr); } .vnises-lt .vnises-lt__stage{ min-height:0; overflow:hidden; } .vnises-lt .vnises-lt__qbox{ padding-bottom:8px; } .vnises-lt .vnises-lt__q{ font-size:clamp(.95rem,4.1vw,1.25rem); line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .vnises-lt .vnises-lt__canvaswrap{ aspect-ratio:auto; min-height:180px; } } @media (max-width:820px){ .vnises-lt .vnises-lt__stage{ --lt-py:12px; --lt-px:12px; --lt-pr:18px; } .vnises-lt .vnises-lt__insp{ --lt-py:14px; --lt-px:14px; --lt-pr:22px; } } @media (max-width:360px){ .vnises-lt .vnises-lt__lvlbtn{ font-size:.7rem; } } @media (max-width:620px){ .vnises-lt .vnises-lt__topbar{ padding-left:14px; padding-right:14px; min-height:22.4px; } .vnises-lt .vnises-lt__title{ font-size:min(.96rem,calc((100vw - 34px) / 15)); letter-spacing:.1em; white-space:nowrap; line-height:1; } } @media (max-width:1020px) and (orientation:landscape) and (max-height:520px){ .vnises-lt{ min-height:0; } .vnises-lt .vnises-lt__picker{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px 10px; } .vnises-lt .vnises-lt__picker .vnises-lt__sel:nth-child(3){ grid-column:auto; } .vnises-lt .vnises-lt__ws{ padding:6px 10px; gap:6px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); } .vnises-lt .vnises-lt__qbox{ padding-bottom:6px; } .vnises-lt .vnises-lt__q{ font-size:clamp(.88rem,2.4vw,1.05rem); -webkit-line-clamp:1; } .vnises-lt .vnises-lt__lvlbtn{ min-height:32px; } .vnises-lt .vnises-lt__subbar{ padding-top:8px; padding-bottom:8px; } .vnises-lt .vnises-lt__subbtn{ min-height:28px; } .vnises-lt .vnises-lt__stage{ --lt-py:10px; --lt-px:12px; --lt-pr:16px; } .vnises-lt .vnises-lt__insp{ --lt-py:10px; --lt-px:14px; --lt-pr:20px; } } @media (max-width:1020px) and (orientation:landscape) and (max-height:420px){ .vnises-lt .vnises-lt__qbox{ display:none; } } @media (max-width:1020px) and (max-height:600px) and (orientation:portrait){ .vnises-lt .vnises-lt__qbox{ display:none; } } @media (hover:hover) and (pointer:fine){ .vnises-lt .vnises-lt__subbtn:hover{ border-color:rgba(var(--lt-cy),.4); } .vnises-lt .vnises-lt__topic:hover{ border-color:rgba(var(--lt-cy),.4); } .vnises-lt .vnises-lt__zone:hover{ background-image:linear-gradient(180deg,transparent,rgba(255,255,255,.04)); } .vnises-lt .vnises-lt__zone[aria-selected="true"]:hover{ background-image:linear-gradient(180deg,transparent,hsl(var(--lt-zone) 62% 66% / .14)); } .vnises-lt .vnises-lt__item:hover{ background-image:linear-gradient(90deg,rgba(255,255,255,.05),transparent 85%); } .vnises-lt .vnises-lt__item[aria-current="true"]:hover{ background-image:linear-gradient(90deg,rgba(var(--lt-cy),.16),rgba(var(--lt-cy),.02) 85%); } .vnises-lt .vnises-lt__lvlbtn:hover::after{ transform:scaleX(.5); } .vnises-lt .vnises-lt__lvlbtn[aria-selected="true"]:hover::after{ transform:scaleX(1); } } @media (hover:none),(pointer:coarse),(max-width:767px){ .vnises-lt{ --lt-blur:8px; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .vnises-lt{ --lt-glass:linear-gradient(180deg,rgba(22,31,58,.94),rgba(11,18,36,.96)); } } @media (prefers-reduced-transparency:reduce){ .vnises-lt{ --lt-glass:linear-gradient(180deg,#16203e,#0b1224); } .vnises-lt .vnises-lt__topbar, .vnises-lt .vnises-lt__expbar, .vnises-lt .vnises-lt__zones, .vnises-lt .vnises-lt__picker, .vnises-lt .vnises-lt__lvlbar, .vnises-lt .vnises-lt__simbar{ -webkit-backdrop-filter:none; backdrop-filter:none; } } @media (prefers-reduced-motion:reduce){ .vnises-lt .vnises-lt__zone, .vnises-lt .vnises-lt__lvlbtn::after, .vnises-lt .vnises-lt__subbtn, .vnises-lt .vnises-lt__topic, .vnises-lt .vnises-lt__item, .vnises-lt .vnises-lt__lvlbtn, .vnises-lt .vnises-lt__simbtn, .vnises-lt .vnises-lt__exp{ transition:none; } } @media (forced-colors:active){ .vnises-lt::before, .vnises-lt .vnises-lt__lvlbtn::after{ display:none; } .vnises-lt .vnises-lt__lvlbtn[aria-selected="true"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-color:Highlight; } .vnises-lt .vnises-lt__subbar{ background-color:Canvas; } .vnises-lt .vnises-lt__subbtn[aria-selected="true"], .vnises-lt .vnises-lt__topic[aria-selected="true"]{ outline:2px solid Highlight; outline-offset:-2px; } .vnises-lt .vnises-lt__topbar, .vnises-lt .vnises-lt__expbar, .vnises-lt .vnises-lt__zones, .vnises-lt .vnises-lt__picker, .vnises-lt .vnises-lt__lvlbar, .vnises-lt .vnises-lt__simbar{ background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .vnises-lt .vnises-lt__lvlbar{ background-color:Canvas; } } .vnises-lt .vnises-lt__canvaswrap > .vnises-lt__idle{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; border:0 !important; margin:0 !important; max-width:none !important; max-height:none !important; } .vnises-lt .vnises-lt__pending{ justify-content:flex-start; gap:8px; z-index:1; pointer-events:none; padding:clamp(18px,3.4vw,32px) clamp(16px,3vw,28px) 0; } .vnises-lt .vnises-lt__pending::before{ content:""; position:absolute; left:0; right:0; top:0; height:64%; z-index:-1; background:linear-gradient(180deg,rgba(7,11,22,.9),rgba(7,11,22,.6) 55%,rgba(7,11,22,0)); } .vnises-lt .vnises-lt__pending .lt-eyebrow{ display:none; } .vnises-lt .vnises-lt__pending .vnises-lt__pendk{ margin:0; max-width:30ch; font-size:clamp(1.15rem,2.2vw,1.7rem); font-weight:650; line-height:1.25; letter-spacing:.005em; color:var(--lt-zc); text-shadow:0 0 22px hsl(var(--lt-zone) 62% 50% / .5),0 1px 10px #070B16; } .vnises-lt .vnises-lt__pending [data-lt="pendt"]{ margin:0; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lt-dim); max-width:none; } .vnises-lt .vnises-lt__pending p{ text-align:center; hyphens:none; text-shadow:0 1px 10px #070B16,0 0 2px #070B16; } .vnises-lt .vnises-lt__pending .vnises-lt__pendz{ font-size:.74rem; line-height:1.5; color:var(--lt-dim); opacity:.88; max-width:52ch; padding-top:8px; margin-top:2px; border-top:1px solid hsl(var(--lt-zone) 62% 66% / .28); text-transform:none; font-style:normal; letter-spacing:normal; } .vnises-lt .vnises-lt__pending .vnises-lt__pendz:empty{ display:none; } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong{ position:relative; overflow:hidden; border:1px solid var(--lt-line); border-radius:12px; padding:14px 16px 84px 20px; color:var(--lt-text); text-transform:none; font-style:normal; letter-spacing:normal; text-align:left; background-image:linear-gradient(150deg,rgba(198,214,240,.07),rgba(198,214,240,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:hsl(var(--lt-zone) 62% 66%); box-shadow:0 0 12px hsl(var(--lt-zone) 62% 66% / .5); } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong::after{ content:""; position:absolute; left:20px; right:16px; bottom:16px; height:60px; background: linear-gradient(rgba(198,214,240,.13),rgba(198,214,240,.13)) 0 0/100% 5px no-repeat, linear-gradient(rgba(198,214,240,.11),rgba(198,214,240,.11)) 0 11px/92% 5px no-repeat, linear-gradient(rgba(198,214,240,.11),rgba(198,214,240,.11)) 0 22px/97% 5px no-repeat, linear-gradient(rgba(198,214,240,.09),rgba(198,214,240,.09)) 0 33px/84% 5px no-repeat, linear-gradient(rgba(198,214,240,.09),rgba(198,214,240,.09)) 0 44px/95% 5px no-repeat, linear-gradient(rgba(198,214,240,.07),rgba(198,214,240,.07)) 0 55px/52% 5px no-repeat; } .vnises-lt .vnises-lt__insp > .vnises-lt__note, .vnises-lt [data-lt="khungnote"]{ display:none !important; } .vnises-lt .vnises-lt__item{ text-align:justify; text-align-last:left; text-justify:inter-word; padding:6px 8px 6px 14px; font-size:.86rem; } .vnises-lt .vnises-lt__tabpanel.is-ranh{ display:flex; flex-direction:column; } .vnises-lt .vnises-lt__tabpanel.is-ranh > .vnises-lt__canvaswrap{ flex:1 1 auto; aspect-ratio:auto; min-height:clamp(200px,34svh,420px); } @media (max-width:560px){ .vnises-lt .vnises-lt__pending{ padding:14px 14px 0; gap:6px; } .vnises-lt .vnises-lt__pending .vnises-lt__pendk{ font-size:1.05rem; max-width:none; } .vnises-lt .vnises-lt__pending .vnises-lt__pendz{ display:none; } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong{ padding-bottom:12px; } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong::after{ display:none; } } @media (max-height:480px){ .vnises-lt .vnises-lt__pending .vnises-lt__pendz{ display:none; } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong{ padding-bottom:12px; } .vnises-lt .vnises-lt__phanbody .vnises-lt__trong::after{ display:none; } }