/*
Theme Name: Frame Video
Author: Khung Hinh
Description: Dark video theme with large covers, responsive layouts, related videos and two advertising slots.
Version: 3.0.12
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khung-hinh-video
*/
:root{color-scheme:dark;--bg:#111315;--panel:#1b1e21;--muted:#a0a6ac;--accent:#ccf278}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f1f3ed;font:16px/1.7 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,input{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}.site-header{border-bottom:1px solid #303337;display:flex;align-items:center;gap:30px;padding:22px 5%}.logo{font-size:26px;font-weight:800;letter-spacing:-1px}.logo span{color:var(--accent)}nav ul{display:flex;list-style:none;gap:20px;padding:0;margin:0}.search{display:flex;gap:8px;margin-left:auto}.search input{width:240px;border:1px solid #363a3e;border-radius:6px;background:#1b1e21;padding:10px 13px;color:white}.search button,.button{border:0;border-radius:6px;background:var(--accent);color:#19220e;padding:10px 16px;font-weight:650}.wrap{max-width:1440px;margin:auto;padding:42px 5% 60px;min-height:75vh}.intro{padding:15px 0 20px}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:2px}h1{font-size:clamp(28px,4vw,44px);line-height:1.3;letter-spacing:-1px;margin:16px 0}.intro p,.meta{color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0 30px}.chips a{border:1px solid #3b4144;border-radius:30px;padding:7px 17px;font-size:14px}.chips a[aria-current=page],.chips a:hover{background:var(--accent);color:#18220d;border-color:var(--accent)}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 26px}.thumb{display:block;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:10px;background:#233239}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.thumb:hover img{transform:scale(1.035)}.placeholder{display:grid;place-items:center;height:100%;font-size:48px;background:linear-gradient(135deg,#263e43,#19262b);color:#90aba1}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #fff7;border-radius:50%;width:58px;height:58px;background:#1119;display:grid;place-items:center;color:white;opacity:0;transition:opacity .2s}.thumb:hover .play,.thumb:focus-visible .play{opacity:1}.duration{position:absolute;bottom:12px;right:12px;padding:2px 7px;background:#000c;border-radius:3px;font-size:12px}.category{font-size:12px;color:var(--accent);margin:16px 0 6px}.video-card h2{font-size:21px;line-height:1.5;margin:0 0 8px}.meta{font-size:13px}.site-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #303337;padding:25px 5%;color:var(--muted);font-size:13px}.pagination{margin-top:42px}.nav-links{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.page-numbers{padding:8px 14px;background:var(--panel);border-radius:5px}.page-numbers.current{background:var(--accent);color:#19220e}.single{max-width:1100px;margin:0 auto}.back{color:var(--muted);font-size:13px}.single .meta{margin:16px 0 25px}.player{margin:25px 0;background:#000;border-radius:9px;overflow:hidden}.player iframe{width:100%;aspect-ratio:16/9;height:auto;display:block}.player video,.wp-video{max-width:100%;width:100%!important}.content{overflow-wrap:anywhere}.content a{color:var(--accent);text-decoration:underline}.content iframe{max-width:100%}.content video{width:100%;height:auto}.content figure{margin:24px 0}.post-nav{border-top:1px solid #303337;margin-top:35px;padding-top:25px}.empty{text-align:center;padding:65px 10px}.screen-reader-text,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;background:var(--accent);color:#111;padding:10px;z-index:99}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.alignwide{width:100%}.aligncenter{margin-inline:auto}.wp-caption-text,.gallery-caption{color:var(--muted);font-size:13px}@media(max-width:700px){.site-header{flex-wrap:wrap;gap:16px}.logo{font-size:23px}.search{width:100%}.search label{flex:1}.search input{width:100%}.wrap{padding-top:24px}.video-grid{grid-template-columns:1fr;gap:30px}.video-card h2{font-size:19px}.site-footer{flex-direction:column}.play{opacity:1;width:44px;height:44px}.site-header nav{margin-left:auto;font-size:13px}}
/* Catalogue layout: compact navigation and horizontal video shelves. */
:root{--bg:#000;--panel:#141414;--accent:#e8e8e8}body{font-family:Arial,Helvetica,sans-serif}.site-header{padding:12px 3%;gap:32px;background:#080808}.logo{font-size:22px}.logo span{border:2px solid #777;border-radius:50%;padding:4px 8px}.site-header nav{flex:1}.search input{border-radius:24px;background:#000;width:260px;padding:7px 15px}.search button{background:#222;color:#eee;border-radius:20px;padding:6px 14px}.wrap{max-width:1800px;padding:0 1% 45px}.browse-strip{height:85px;background:linear-gradient(115deg,#1a211d,#020302 70%);padding:0 4%;display:flex;align-items:flex-start;gap:24px}.browse-strip span{display:none}.browse-strip a{background:#ddd;color:#111;font-weight:700;letter-spacing:.5px;padding:11px 60px;border-radius:0 0 5px 5px}.video-section{margin:0 0 24px;padding-top:18px}.row-heading{display:flex;align-items:center;justify-content:space-between;padding:0 5px;margin:0 0 20px}.row-heading h2{font-size:20px;margin:0;line-height:1.3}.row-controls{display:flex;gap:6px}.row-controls button{background:#171717;color:white;border:1px solid #333;border-radius:30px;width:34px;height:29px;font-size:22px;line-height:1;cursor:pointer}.video-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/5.3);gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#333 #080808;padding:0 0 12px}.video-rail .video-card{scroll-snap-align:start;min-width:0}.thumb{border-radius:4px}.video-card h3{font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:8px 0 0}.duration{font-size:10px;bottom:5px;right:5px}.site-footer{padding:22px 3%}.category{color:#bbb}.video-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px}.video-grid .video-card h2{font-size:16px}.intro{padding:20px 10px 5px}.intro h1{font-size:28px}.single{padding:35px 3%}.player{margin-top:25px}.chips{padding:0 10px}.chips a:hover,.chips a[aria-current=page]{color:#111}.row-controls button:hover{background:#444}@media(min-width:1500px){.video-rail{grid-auto-columns:calc((100% - 60px)/6.3)}}@media(max-width:900px){.video-rail{grid-auto-columns:calc((100% - 20px)/3.2)}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.site-header{gap:15px}.site-header nav{font-size:13px}}@media(max-width:600px){.site-header{padding:12px 4%}.site-header nav{flex:initial}.search input{width:100%}.wrap{padding-inline:3%}.browse-strip{height:70px}.browse-strip a{padding:10px 32px}.video-rail{grid-auto-columns:77%;gap:12px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.row-heading h2{font-size:18px}.video-card h3{font-size:14px}.site-footer{font-size:12px}}
body.single{background:#0d1019;color:#cbd0dd;padding:0;max-width:none}.single .site-header{background:#0b0d15;border-color:#242936}.single .wrap{max-width:1360px;padding:26px 4% 60px}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px}.watch-main{min-width:0}.watch-crumb{font-size:12px;color:#8e96aa;margin-bottom:14px}.watch-main .player{margin:0 0 18px;border-radius:5px}.watch-main h1{font-size:23px;line-height:1.5;letter-spacing:0;color:#e0e4ef;margin:15px 0 7px}.watch-main .meta{margin:0;color:#929bad}.watch-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:22px 0}.watch-actions button,.watch-actions a{border:0;background:none;padding:0;color:#cdd6e8;font-size:14px;cursor:pointer}.watch-actions button[aria-pressed=true]{color:#ff6974}#kh-watch-status{font-size:11px;color:#aab3c5;flex-basis:100%}.watch-tab{font-size:14px;font-weight:500;color:#ff626c;border-bottom:1px solid #363c49;margin:0 0 15px;padding:10px 0 16px;position:relative}.watch-tab:after{content:'';height:2px;width:95px;background:#ff626c;position:absolute;bottom:-1px;left:0}.watch-description{max-height:110px;overflow:hidden;mask-image:linear-gradient(#000 65%,transparent)}.watch-description.expanded{max-height:none;mask-image:none}.watch-description .content{font-size:16px;line-height:1.8}.watch-description p:first-child{margin-top:0}.watch-more{background:none;border:0;color:#ffc970;padding:8px 0;font-size:15px;cursor:pointer}.watch-info{display:grid;grid-template-columns:110px minmax(0,1fr);gap:9px 12px;font-size:15px;margin:22px 0 35px}.watch-info dt{color:#98a6be}.watch-info dd{margin:0;overflow-wrap:anywhere}.watch-info a{color:#ffd07c}.watch-sidebar h2{font-size:16px;color:#e1e6ef;margin:0 0 16px}.related-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;margin-bottom:22px}.related-card .thumb{align-self:start}.related-card h3{font-size:14px;line-height:1.5;font-weight:400;margin:0 0 8px}.related-card .meta{font-size:11px}.watch-main .nav-links{font-size:13px;border-top:1px solid #303641;padding-top:20px}.single .site-footer{border-color:#242936}.watch-main .content a{color:#ffd07c}.preview-player{aspect-ratio:16/9;position:relative;background:#000;overflow:hidden;border-radius:5px}.preview-player img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.preview-player span{position:absolute;bottom:16px;left:18px;background:#000b;padding:5px 12px;font-size:12px}@media(max-width:1050px){.watch-layout{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.related-card{grid-template-columns:120px minmax(0,1fr)}}@media(max-width:760px){.watch-layout{grid-template-columns:1fr}.watch-sidebar{border-top:1px solid #303641;padding-top:24px}.related-card{grid-template-columns:42% minmax(0,1fr)}.watch-main h1{font-size:20px}.watch-actions{gap:20px}.watch-info{grid-template-columns:90px minmax(0,1fr);font-size:14px}.single .wrap{padding:18px 4% 40px}}
/* v1.4: two ad slots next to the player, four-column related videos below */
body.single{background:#000;color:#ddd}.watch-layout-ads{grid-template-columns:minmax(0,1fr) 300px;gap:30px}.single .site-header{background:#080808}.single .wrap{max-width:1500px;padding-inline:3%}.watch-ad-sidebar{padding-top:32px;display:flex;flex-direction:column;gap:22px;align-self:start;min-width:0}.watch-ad-slot{width:100%;max-width:300px;margin-inline:auto}.ad-label{font-size:10px;color:#8f8f8f;display:block;text-align:center;margin-bottom:5px;letter-spacing:1px}.ad-placeholder{aspect-ratio:6/5;border:1px dashed #424242;border-radius:6px;background:linear-gradient(135deg,#1a1a1a,#0d0d0d);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#b1b1b1;font-size:15px}.ad-placeholder small{display:block;margin-top:10px;color:#666}.kh-ad-widget{max-width:100%;overflow:hidden}.kh-ad-widget img,.kh-ad-widget iframe{max-width:100%}.watch-related-bottom{margin-top:38px;border-top:1px solid #222;padding-top:24px}.watch-related-bottom>h2{font-size:20px;margin:0 0 23px;color:#fff}.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 12px}.related-grid-card{min-width:0}.related-grid-card h3{font-size:14px;line-height:1.5;margin:8px 0 5px;font-weight:400}.related-tax{font-size:11px;line-height:1.8;color:#ccc}.related-tax span{color:#999}.related-tax a{display:inline;background:#191919;border-radius:3px;padding:1px 4px}.related-grid-card .duration{left:5px;right:auto;bottom:4px}.watch-main .watch-tab{color:#ddd}.watch-main .watch-tab:after{background:#ddd}@media(max-width:1050px) and (min-width:761px){.watch-layout-ads{grid-template-columns:minmax(0,1fr) 250px;gap:20px}}@media(max-width:760px){.watch-layout-ads{grid-template-columns:1fr}.watch-ad-sidebar{padding-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.ad-placeholder{font-size:12px}.ad-label{font-size:9px}}@media(max-width:400px){.watch-ad-sidebar{grid-template-columns:1fr}}
/* Latest videos: 15 cards in five desktop columns. */
#new-videos .row-controls{display:none}#new-videos .video-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:28px 16px;overflow:visible;scroll-snap-type:none;padding-bottom:15px}#new-videos .thumb{aspect-ratio:3/2}#new-videos .video-card h3{font-size:14px;line-height:1.5;white-space:normal;overflow:visible;margin-top:10px}#new-videos .duration{font-size:12px;padding:3px 7px;right:8px;bottom:8px}#new-videos .row-heading{margin-bottom:20px}@media(max-width:600px){#new-videos .video-rail{grid-template-columns:1fr;gap:25px}#new-videos .video-card h3{font-size:16px}}
.view-all{margin-left:auto;border:1px solid #333;border-radius:22px;padding:4px 13px;color:#eee;background:#151515;font-size:11px;white-space:nowrap}.view-all:hover{background:#333;color:white}.rail-shell{position:relative}.rail-shell .video-rail{padding-bottom:10px}.rail-arrow{position:absolute;top:35%;transform:translateY(-50%);z-index:2;background:#000b;color:#fff;border:1px solid #ffffff30;border-radius:5px;width:35px;height:54px;font-size:38px;line-height:1;display:grid;place-items:center;cursor:pointer}.rail-prev{left:3px}.rail-next{right:3px}.rail-arrow:hover{background:#333e}.rail-arrow:disabled{opacity:.2;cursor:default}.video-section .row-heading{gap:16px}



.kh-language-switch{padding:9px 4%;border-bottom:1px solid #252525;font-size:12px}.kh-language-switch ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0}.kh-language-switch .current-lang a{color:#ffcf78;font-weight:bold}

@media(min-width:601px) and (max-width:900px){#new-videos .video-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}

.brand{flex-shrink:0}.site-header .logo{display:inline-flex;align-items:center;gap:10px;font-size:25px;letter-spacing:-1px;font-weight:800;line-height:1}.site-header .logo span{border:0;padding:0;border-radius:0}.site-header .logo .logo-mark{display:grid;place-items:center;width:37px;height:37px;background:#c9f477;color:#10170b;border-radius:10px;box-shadow:0 0 25px #b6f25b12}.site-header .logo .logo-text{display:inline-flex;align-items:baseline;gap:5px;color:#f2f4ef}.site-header .logo .logo-accent{color:#c9f477}.custom-logo-link{display:inline-flex;align-items:center}.custom-logo{max-width:240px;max-height:60px;width:auto;height:auto}@media(min-width:901px) and (max-width:1100px){#new-videos .video-rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 12px}}@media(min-width:601px) and (max-width:900px){#new-videos .video-rail{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){#new-videos .video-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}#new-videos .video-card h3{font-size:13px}.site-header .logo{font-size:22px}}

.thumb .card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.thumb.is-previewing .card-preview{opacity:1}.thumb .duration{z-index:2}

/* Framed play mark and responsive wordmark. */
.site-header .logo{gap:12px;letter-spacing:-1.1px;font-weight:800;min-height:48px}
.site-header .logo .logo-mark{width:46px;height:46px;background:transparent;box-shadow:none;border-radius:14px;flex:0 0 46px}
.logo-mark svg{display:block;width:100%;height:100%}
.site-header .logo .logo-text{gap:6px;font-size:25px;line-height:1.1;letter-spacing:-1px}
.site-header .logo:hover .logo-text{color:#fff}
.site-header .logo:hover .logo-mark{box-shadow:0 0 22px #c9f47717}
@media(max-width:600px){.site-header .logo{gap:9px}.site-header .logo .logo-mark{width:38px;height:38px;flex-basis:38px}.site-header .logo .logo-text{font-size:22px}}

.site-header .logo .logo-text{letter-spacing:-1.2px;gap:0;font-weight:800}.site-header .logo .logo-accent{color:#baff78}.site-header .logo .logo-mark{border-radius:12px}.site-header .logo{gap:11px}

/* Ruby brand identity. */
.site-header .logo .logo-text{text-transform:uppercase;font-style:italic;font-weight:900;font-size:24px;letter-spacing:-1.2px;color:#fff}.site-header .logo .logo-accent{color:#f52c47}.site-header .logo:hover .logo-mark{box-shadow:0 0 24px #e51d3828}.site-header .logo .logo-mark{border-radius:13px}@media(max-width:600px){.site-header .logo .logo-text{font-size:21px}}

.browse-strip .browse-title{margin:0;font:inherit;letter-spacing:normal;line-height:inherit}.browse-strip .browse-title a{display:block}

.khvt-multi video{width:100%;display:block;aspect-ratio:16/9;background:#000}.khvt-quality-label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px}.khvt-quality{background:#191719;border:1px solid #494149;color:#fff;border-radius:5px;padding:6px 10px}.khvt-quality-status{font-size:12px;color:#b9b1b7}

/* 3.0.3: large covers across catalogs and home rails. */
body.home .wrap,body.archive .wrap,body.search .wrap,body.blog .wrap{max-width:1360px;padding-left:20px;padding-right:20px}
#new-videos .video-rail,.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px}
.video-rail{grid-auto-columns:calc((100% - 24px)/3);gap:12px}
#new-videos .thumb,.thumb{aspect-ratio:16/9}
.video-card h3,#new-videos .video-card h3,.video-grid .video-card h2{font-size:16px;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px}
.video-section{margin-bottom:30px}.duration{font-size:12px;padding:2px 6px}
.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){#new-videos .video-rail,.video-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-rail{grid-auto-columns:calc((100% - 12px)/2)}}
@media(max-width:520px){#new-videos .video-rail,.video-grid,.related-grid{grid-template-columns:1fr}.video-rail{grid-auto-columns:100%}.video-card h3,#new-videos .video-card h3{font-size:16px}}

/* A single New Videos heading above the newest-first grid. */
.home .browse-strip{display:none}

.watch-main>.player{margin-top:0}.watch-main{position:relative}.kh-tab-restart{display:block;width:100%;padding:16px;background:#202020;color:#fff;border:1px solid #555;border-radius:4px;margin:8px 0}.kh-tab-restart[hidden]{display:none}

/* Keep the restart control inside the player instead of below an empty frame. */
.watch-main>.player{position:relative;background:#000}.watch-main .player>.kh-tab-restart{position:absolute;inset:0;z-index:10;width:100%;height:100%;margin:0;padding:24px;display:flex;align-items:center;justify-content:center;background-color:#111;background-size:cover;background-position:center;color:#fff;font-size:clamp(18px,2vw,28px);font-weight:bold;text-shadow:0 2px 5px #000;border:0;border-radius:0}.watch-main .player>.kh-tab-restart[hidden]{display:none}

.kh-native-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;border:3px solid white;border-radius:50%;width:84px;height:84px;background:#0009;color:#fff;font-size:40px;display:grid;place-items:center}.kh-native-play[hidden]{display:none}.kh-native-status{padding:10px;color:#fff;background:#222}.kh-native-fallback{padding:10px 16px;margin:8px;border:1px solid #888;background:#222;color:#fff}.kh-native-status[hidden],.kh-native-fallback[hidden]{display:none}