/* Header → hai cột → thư viện một cột → footer */
body{background:#fff}.page{width:min(1450px,calc(100% - 32px));display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:24px;align-items:start}.player-card{min-width:0}.related-panel{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}.related-head{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:17px 16px 13px;border-bottom:1px solid var(--line)}.related-head h2{margin:2px 0 0;font-size:18px;line-height:1.25}.related-head>span{padding:5px 8px;border-radius:999px;background:var(--pale);color:var(--muted);font-size:10px;font-weight:900;white-space:nowrap}.related-list{max-height:calc(100vh - 190px);overflow-y:auto;padding:9px;scrollbar-width:thin}.related-card{display:grid;grid-template-columns:155px minmax(0,1fr);gap:10px;padding:7px;border-radius:12px;cursor:pointer;outline:none}.related-card:hover,.related-card.active{background:var(--pale)}.related-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:9px;background:var(--mint)}.related-thumb img{width:100%;height:100%;display:block;object-fit:cover}.related-now{position:absolute;inset:auto 5px 5px auto;display:none;padding:3px 5px;border-radius:5px;background:#10251ddd;color:#fff;font-size:8px;font-weight:900}.related-card.active .related-now{display:block}.related-info{min-width:0}.related-info h3{display:-webkit-box;margin:1px 0 5px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.35}.related-info p{margin:0;color:var(--muted);font-size:10px}.related-empty{padding:38px 18px;text-align:center;color:var(--muted);font-size:13px}
.browser{grid-column:1/-1;position:relative;top:auto;max-height:none;margin-top:4px;padding:0 20px 25px;border-radius:22px;overflow:visible}.browser .tabs-row{padding:0}.browser .tabs{gap:38px}.browser .tab{padding:20px 0 16px;font-size:17px}.browser .icon-button{margin-left:42px}.browser .search-panel{padding-top:15px}.browser .list-head{min-height:82px;padding:0}.browser .list-head>span{display:block}.browser .sort-label{margin-left:auto;font-size:15px}.browser .sort-label select{max-width:none;min-height:40px;font-size:14px}.browser .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 16px;max-height:none;padding:0;overflow:visible}.browser .card{display:block}.browser .card .thumb,.browser .card.short .thumb{width:100%;margin:0;aspect-ratio:16/9;border-radius:12px}.browser .card.short .thumb{width:72%;margin:auto;aspect-ratio:9/16}.browser .card .info{padding:8px 2px 0}.browser .card .info h3{display:-webkit-box;margin:0 0 5px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.4}.browser .card .channel{font-size:12px}.browser .card .overlay{display:grid}.browser .card-meta span{padding:4px 7px;font-size:10px}.viewer-tools{grid-template-columns:repeat(2,max-content)}
@media(max-width:1100px){.page{grid-template-columns:minmax(0,1fr) 335px;gap:16px}.related-card{grid-template-columns:130px minmax(0,1fr)}.browser .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.page{display:block;width:min(100% - 24px,900px)}.related-panel{position:relative;top:auto;max-height:none;margin-top:17px}.related-list{display:grid;grid-template-columns:repeat(2,1fr);max-height:430px}.related-card{grid-template-columns:150px minmax(0,1fr)}.browser{margin-top:18px}.browser .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.page{width:100%;margin-top:0}.player-card{border-width:0 0 1px;border-radius:0}.related-panel,.browser{margin:12px;border-radius:16px}.related-list{display:block;max-height:420px}.related-card{grid-template-columns:145px minmax(0,1fr)}.browser{padding-inline:14px}.browser .tabs{gap:20px}.browser .tab{font-size:13px}.browser .icon-button{margin-left:auto}.browser .grid{grid-template-columns:1fr}.browser .sort-label>span{display:none}.player-info{padding-inline:14px}.viewer-tools{display:grid;grid-template-columns:repeat(2,1fr)}}
@media(min-width:1101px){.page{width:min(1560px,calc(100% - 32px));grid-template-columns:minmax(0,1fr) 340px;gap:20px}}