:root{
	--bg: #000;
	--text: #fff;
	--muted: rgba( 255, 255, 255, .72 );
	--line: rgba( 255, 255, 255, .12 );
	--chip: rgba( 0, 0, 0, .42 );
	--action: rgba( 255, 255, 255, .14 );
	--sidebar: 260px;
	--safe-top: env( safe-area-inset-top, 0px );
	--safe-bottom: env( safe-area-inset-bottom, 0px );
	--shadow: 0 20px 70px rgba( 0, 0, 0, .45 );
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body{
	width: 100%;
	height: 100%;
	background: var( --bg );
	color: var( --text );
	font-family: Arial, Helvetica, sans-serif;
	overflow: hidden;
}

button{
	color: inherit;
	background: none;
	border: 0;
	outline: 0;
	cursor: pointer;
}

a{
	color: inherit;
	text-decoration: none;
}

.tk .app{
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: #000;
	overflow: hidden;
	padding-left: var( --sidebar );
}

	/* SIDEBAR DESKTOP */
.tk .desktop-sidebar{
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: var( --sidebar );
	z-index: 70;
	display: flex;
	flex-direction: column;
	padding: calc( 16px + var( --safe-top ) ) 14px calc( 16px + var( --safe-bottom ) );
	background: linear-gradient( 180deg, rgba( 8, 8, 8, .97 ) 0%, rgba( 8, 8, 8, .91 ) 100% );
	border-right: 1px solid rgba( 255, 255, 255, .08 );
	backdrop-filter: blur( 10px );
	overflow-y: auto;
}

.tk .brand{
	width: 100%;
	height: 60px;
	border-radius: 16px;
	background: linear-gradient( 135deg, #ffffff 0%, #cecece 100% );
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 16px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 );
}

.tk .brand img{
	max-width: 210px;
	margin: 0 auto;
}

.tk .sidebar-search{
	margin-bottom: 14px;
}

.tk .sidebar-search-btn{
	width: 100%;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 255, 255, .08 );
	background: rgba( 255, 255, 255, .04 );
	color: var( --muted );
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
	text-align: left;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.tk .sidebar-search-btn:hover{
	background: rgba( 255, 255, 255, .12 );
	border-color: rgba( 255, 255, 255, .18 );
	color: #fff;
}

.tk .sidebar-nav{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tk .sidebar-group{
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 16px;
	background: rgba( 255, 255, 255, .04 );
	overflow: hidden;
}

.tk .sidebar-toggle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.tk .sidebar-toggle .sidebar-left{
	flex: 1;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: rgba( 255, 255, 255, .88 );
	transition: color .2s ease;
}

.tk .sidebar-toggle .sidebar-left:hover,
.tk .sidebar-toggle .sidebar-left.active{
	color: #fff;
}

.tk .sidebar-icon{
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: rgba( 255, 255, 255, .08 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex: 0 0 auto;
}

.tk .sidebar-arrow{
	padding: 12px 16px;
	font-size: 12px;
	opacity: .75;
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}

.tk .sidebar-arrow:hover{
	opacity: 1;
}

.tk .sidebar-group.open .sidebar-arrow{
	transform: rotate( 180deg );
}

.tk .sidebar-sub{
	display: none;
	padding: 0 10px 10px;
}

.tk .sidebar-group.open .sidebar-sub{
	display: block;
}

.tk .sidebar-sub a{
	display: block;
	padding: 11px 12px 11px 44px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	color: rgba( 255, 255, 255, .84 );
	transition: background .2s ease, color .2s ease;
}

.tk .sidebar-sub a:hover,
.tk .sidebar-sub a.active{
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}

.tk .sidebar-bottom{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.tk .sidebar-quick{
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgba( 255, 255, 255, .08 );
	background: rgba( 255, 255, 255, .04 );
	font-size: 13px;
	font-weight: 700;
}

	/* MOBILE TOPBAR & DRAWER */
.tk .mobile-topbar{
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	top: calc( 10px + var( --safe-top ) );
	z-index: 70;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tk .mobile-brand{
	flex: 1;
	height: 46px;
	border-radius: 14px;
	background: rgba( 15, 15, 15, .76 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	backdrop-filter: blur( 10px );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .4px;
}

.tk .mobile-brand img{
	max-height: 40px;
}

.tk .mobile-menu-btn{
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba( 15, 15, 15, .76 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	backdrop-filter: blur( 10px );
	font-size: 18px;
}

.tk .mobile-drawer{
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	top: calc( 64px + var( --safe-top ) );
	max-height: calc( 65vh - var( --safe-top ) );
	z-index: 72;
	overflow-y: auto;
	padding: 12px;
	border-radius: 18px;
	background: rgba( 10, 10, 10, .84 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	backdrop-filter: blur( 12px );
	box-shadow: var( --shadow );
}

.tk .mobile-drawer.is-show{
	display: block;
}

	/* FEED & SLIDE VIDEO */
.tk .feed{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.tk .feed::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.tk .slide{
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	scroll-snap-align: start;
	overflow: hidden;
	background: #000;
}

.tk .slide-bg{
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	filter: blur( 28px ) saturate( 1.1 );
	transform: scale( 1.12 );
	opacity: .42;
}

.tk .slide-overlay{
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, .15 ) 0%, rgba( 0, 0, 0, .08 ) 28%, rgba( 0, 0, 0, .45 ) 72%, rgba( 0, 0, 0, .8 ) 100% );
	pointer-events: none;
	z-index: 1;
}

.tk .media-wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: min( 100vw, calc( 100dvh * 9 / 16 ) );
	height: min( 100dvh, calc( 100vw * 16 / 9 ) );
	max-width: 620px;
	max-height: 100dvh;
	overflow: hidden;
	background: #111;
	z-index: 2;
}

.tk .media-wrap::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, transparent 50%, rgba( 0, 0, 0, .35 ) 75%, rgba( 0, 0, 0, .8 ) 100% );
	pointer-events: none;
	z-index: 3;
}

.tk .video{
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #111;
}

	/* Khi bấm Fullscreen trên PC lẫn Mobile */
.tk .slide:fullscreen,
.tk .slide:-webkit-full-screen{
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #000 !important;
}

	/* Ép video tự co giãn chuẩn theo tỷ lệ màn hình */
.tk .slide.is-landscape:fullscreen .media-wrap,
.tk .slide.is-landscape:-webkit-full-screen .media-wrap,
.tk .slide.is-landscape:fullscreen .video,
.tk .slide.is-landscape:-webkit-full-screen .video{
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important; /* Giữ chuẩn tỷ lệ video không bị móp/méo */
}

	/* PROGRESS BAR */
.tk .progress{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: rgba( 255, 255, 255, .2 );
	cursor: pointer;
	z-index: 10;
	transition: height .15s ease;
}

.tk .progress::before{
	content: "";
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: 0;
	right: 0;
}

.tk .progress:hover,
.tk .progress.is-dragging{
	height: 9px;
}

.tk .progress-bar{
	width: 0%;
	height: 100%;
	background: #fff;
	position: relative;
	pointer-events: none;
}

.tk .progress-bar::after{
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY( -50% ) scale( 0 );
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.4 );
}

.tk .progress:hover .progress-bar::after,
.tk .progress.is-dragging .progress-bar::after{
	transform: translateY( -50% ) scale( 1 );
}

	/* CHIPS & PLAY BUTTON */
.tk .chip-status,
.tk .chip-sound{
	position: absolute;
	z-index: 4;
	padding: 8px 11px;
	font-size: 12px;
	border-radius: 999px;
	background: var( --chip );
	border: 1px solid var( --line );
	backdrop-filter: blur( 6px );
}

.tk .chip-status{
	top: calc( var( --safe-top ) + 22px );
	left: 12px;
}

.tk .chip-sound{
	top: calc( var( --safe-top ) + 22px );
	right: 12px;
}

.tk .chip-status:hover,
.tk .chip-sound:hover{
	cursor: pointer;
}

.tk .center-play{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	z-index: 5;
	pointer-events: none;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, .36 );
	border: 1px solid rgba( 255, 255, 255, .2 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	opacity: 0;
	transition: opacity .2s ease;
}

.tk .slide.is-paused .center-play{
	opacity: 1;
}

	/* BOTTOM META & ACTIONS */
.tk .bottom{
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: calc( 18px + var( --safe-bottom ) );
	z-index: 4;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.tk .meta{
	min-width: 0;
	max-width: calc( 100% - 76px );
}

.tk .video-title{
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .9 ), 0 2px 8px rgba( 0, 0, 0, .8 );
}

.tk .desc-text{
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .9 ), 0 2px 6px rgba( 0, 0, 0, .8 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: all 0.2s ease;
}

.tk .btn-toggle-desc{
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	margin-top: 4px;
	opacity: 1;
	padding: 2px 0;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .9 );
}

.tk .desc-wrap.is-expanded .desc-text{
	display: block;
	overflow: visible;
	max-height: 150px;
	overflow-y: auto;
}

.tk .btn-toggle-desc{
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	margin-top: 4px;
	opacity: 0.85;
	padding: 2px 0;
}

.tk .btn-toggle-desc:hover{
	opacity: 1;
}

.tk .actions{
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.tk .action-btn{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 56px;
}

.tk .action-icon{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var( --action );
	border: 1px solid var( --line );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	backdrop-filter: blur( 6px );
}

.tk .action-count{
	font-size: 12px;
	color: #fff;
}

	/* NAVIGATION & OVERLAY */
.tk .bottom-nav{
	display: none;
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc( 10px + var( --safe-bottom ) );
	z-index: 71;
	padding: 8px;
	border-radius: 18px;
	background: rgba( 10, 10, 10, .78 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	backdrop-filter: blur( 12px );
	box-shadow: var( --shadow );
	justify-content: space-between;
	gap: 8px;
}

.tk .bottom-nav a{
	flex: 1;
	height: 48px;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 700;
	color: rgba( 255, 255, 255, .82 );
}

.tk .bottom-nav a.active{
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}

.tk .bottom-nav .icon{
	font-size: 17px;
	line-height: 1;
}

.tk .overlay{
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .56 );
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.tk .overlay.is-show{
	opacity: 1;
	visibility: visible;
}

	/* TOAST NOTIFICATION */
.tk .tk-toast{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) scale( 0.85 );
	background: rgba( 20, 20, 20, .85 );
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	z-index: 20;
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border: 1px solid rgba( 255, 255, 255, .18 );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .5 );
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.tk .tk-toast.is-show{
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, -50% ) scale( 1 );
}

	/* SEARCH SIDE PANEL (CỘT THỨ 2 TRƯỢT TỪ SIDEBAR) */
.tk .search-modal{
	position: fixed;
	left: var( --sidebar );
	top: 0;
	bottom: 0;
	width: 360px;
	z-index: 65; /* Nổi trên overlay 60, nằm cạnh sidebar 70 */
	display: flex;
	flex-direction: column;
	padding: calc( 16px + var( --safe-top ) ) 16px calc( 16px + var( --safe-bottom ) );
	background: linear-gradient( 180deg, rgba( 16, 16, 16, .98 ) 0%, rgba( 10, 10, 10, .96 ) 100% );
	border-right: 1px solid rgba( 255, 255, 255, .08 );
	backdrop-filter: blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	box-shadow: 20px 0 50px rgba( 0, 0, 0, .6 );
	transform: translateX( -100% );
	opacity: 0;
	visibility: hidden;
	transition: transform .25s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity .2s ease, visibility .2s ease;
}

.tk .search-modal.is-show{
	transform: translateX( 0 );
	opacity: 1;
	visibility: visible;
}

.tk .search-box{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tk .search-header{
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 14px;
	gap: 10px;
	margin-bottom: 14px;
	flex: 0 0 auto;
	transition: background .2s ease, border-color .2s ease;
}

.tk .search-header:focus-within{
	background: rgba( 255, 255, 255, .1 );
	border-color: rgba( 255, 255, 255, .25 );
}

.tk .search-icon{
	font-size: 15px;
	opacity: .75;
	flex: 0 0 auto;
}

.tk .search-input{
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.tk .search-input::placeholder{
	color: rgba( 255, 255, 255, .45 );
	font-weight: 400;
}

.tk .search-close{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .08 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: rgba( 255, 255, 255, .75 );
	cursor: pointer;
	flex: 0 0 auto;
	transition: background .2s ease, color .2s ease;
}

.tk .search-close:hover{
	background: rgba( 255, 255, 255, .2 );
	color: #fff;
}

.tk .search-result{
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.tk .search-result::-webkit-scrollbar{
	width: 4px;
}

.tk .search-result::-webkit-scrollbar-thumb{
	background: rgba( 255, 255, 255, .15 );
	border-radius: 4px;
}

.tk .search-suggest-list{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tk .search-suggest-item{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background .2s ease, border-color .2s ease;
}

.tk .search-suggest-item:hover{
	background: rgba( 255, 255, 255, .06 );
	border-color: rgba( 255, 255, 255, .08 );
}

.tk .search-item-thumb{
	width: 42px;
	height: 58px;
	border-radius: 8px;
	overflow: hidden;
	background: #111;
	flex: 0 0 auto;
}

.tk .search-item-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tk .search-item-info{
	flex: 1;
	min-width: 0;
}

.tk .search-item-title{
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: rgba( 255, 255, 255, .9 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tk .search-suggest-footer{
	padding: 14px 10px 6px;
	text-align: center;
	flex: 0 0 auto;
}

.tk .search-view-all{
	display: block;
	width: 100%;
	padding: 10px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, .08 );
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	transition: background .2s ease;
}

.tk .search-view-all:hover{
	background: rgba( 255, 255, 255, .15 );
}

.tk .search-view-all .red{
	color: #ff4757;
}

.tk .search-suggest-empty{
	padding: 30px 16px;
	text-align: center;
	color: var( --muted );
	font-size: 13px;
}

	/* TRENDING HASHTAGS */
.tk .search-trend{
	padding: 4px 6px 14px;
	border-bottom: 1px solid rgba( 255, 255, 255, .08 );
	margin-bottom: 10px;
}

.tk .search-trend.is-hidden{
	display: none;
}

.tk .search-trend-title{
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var( --muted );
	margin-bottom: 10px;
}

.tk .search-trend-list{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tk .search-trend-item{
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	color: rgba( 255, 255, 255, .88 );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.tk .search-trend-item:hover{
	background: rgba( 255, 71, 87, .15 );
	border-color: rgba( 255, 71, 87, .4 );
	color: #ff4757;
	transform: translateY( -2px );
}

	/* SEARCH GRID PAGE */
.tk .search-page-wrap{
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: calc( 16px + var( --safe-top ) ) 20px calc( 24px + var( --safe-bottom ) );
	background: #000;
}

.tk .search-page-header{
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba( 255, 255, 255, .1 );
}

.tk .search-page-title{
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

.tk .search-page-keyword{
	color: #ff4757;
}

.tk .search-page-count{
	font-size: 13px;
	font-weight: 400;
	color: var( --muted );
	margin-left: 6px;
}

	/* VIDEO GRID LAYOUT (THU NHỎ GỌN THUMBNAIL) */
.tk .video-grid{
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 16px;
}

.tk .video-card{
	display: flex;
	flex-direction: column;
	background: rgba( 255, 255, 255, .03 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 12px;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.tk .video-card:hover{
	transform: translateY( -3px );
	border-color: rgba( 255, 255, 255, .22 );
	background: rgba( 255, 255, 255, .06 );
}

.tk .video-card-link{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tk .video-card-thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #111;
	overflow: hidden;
}

.tk .video-card-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .3s ease;
}

.tk .video-card:hover .video-card-thumb img{
	transform: scale( 1.05 );
}

.tk .video-play-badge{
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, .65 );
	border: 1px solid rgba( 255, 255, 255, .3 );
	backdrop-filter: blur( 4px );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: #fff;
}

.tk .video-card-info{
	padding: 10px 12px 12px;
	flex: 1;
}

.tk .video-card-title{
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba( 255, 255, 255, .92 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

	/* PAGINATION (DÀN HÀNG NGANG & XÓA CHẤM TRÒN LI) */
.tk .search-pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 28px;
	padding-bottom: 20px;
}

.tk .search-pagination ul{
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 6px;
}

.tk .search-pagination li{
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
}

.tk .search-pagination a,
.tk .search-pagination span,
.tk .search-pagination strong{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	color: rgba( 255, 255, 255, .85 );
	font-size: 13px;
	font-weight: 700;
	transition: background .2s ease, color .2s ease;
}

.tk .search-pagination a:hover{
	background: rgba( 255, 255, 255, .15 );
	color: #fff;
}

.tk .search-pagination strong,
.tk .search-pagination .current{
	background: #ff4757;
	border-color: #ff4757;
	color: #fff;
}

	/* COMMENT SIDE PANEL */
.tk .comment-modal{
	position: fixed;
	left: var( --sidebar );
	top: 0;
	bottom: 0;
	width: 380px;
	z-index: 65;
	display: flex;
	flex-direction: column;
	padding: calc( 16px + var( --safe-top ) ) 16px calc( 16px + var( --safe-bottom ) );
	background: linear-gradient( 180deg, rgba( 16, 16, 16, .98 ) 0%, rgba( 10, 10, 10, .96 ) 100% );
	border-right: 1px solid rgba( 255, 255, 255, .08 );
	backdrop-filter: blur( 16px );
	-webkit-backdrop-filter: blur( 16px );
	box-shadow: 20px 0 50px rgba( 0, 0, 0, .6 );
	transform: translateX( -100% );
	opacity: 0;
	visibility: hidden;
	transition: transform .25s cubic-bezier( 0.4, 0, 0.2, 1 ), opacity .2s ease, visibility .2s ease;
}

.tk .comment-modal.is-show{
	transform: translateX( 0 );
	opacity: 1;
	visibility: visible;
}

.tk .comment-box{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tk .comment-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba( 255, 255, 255, .1 );
	margin-bottom: 14px;
	flex: 0 0 auto;
}

.tk .comment-header-title{
	font-size: 16px;
	color: #fff;
}

.tk .comment-close{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .08 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: rgba( 255, 255, 255, .75 );
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.tk .comment-close:hover{
	background: rgba( 255, 255, 255, .2 );
	color: #fff;
}

.tk .comment-body{
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

	/* BOX YÊU CẦU ĐĂNG NHẬP */
.tk .comment-login-box{
	padding: 16px;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px dashed rgba( 255, 255, 255, .15 );
	text-align: center;
	margin-bottom: 16px;
	flex: 0 0 auto;
}

.tk .comment-login-text{
	font-size: 13px;
	color: var( --muted );
	margin-bottom: 12px;
	line-height: 1.4;
}

.tk .comment-login-btn{
	display: inline-block;
	padding: 8px 20px;
	border-radius: 10px;
	background: #ff4757;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	transition: opacity .2s ease, transform .15s ease;
}

.tk .comment-login-btn:hover{
	opacity: .9;
	transform: translateY( -1px );
}

.tk .comment-empty{
	text-align: center;
	padding: 40px 10px;
	font-size: 13px;
	color: var( --muted );
}

	/* COMMENT INPUT (KHI ĐÃ ĐĂNG NHẬP) */
.tk .comment-input-box{
	display: flex;
	align-items: flex-end;
	padding: 6px 8px 6px 14px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 14px;
	margin-bottom: 16px;
	flex: 0 0 auto;
	transition: background .2s ease, border-color .2s ease;
}

.tk .comment-input-box:focus-within{
	background: rgba( 255, 255, 255, .1 );
	border-color: rgba( 255, 255, 255, .28 );
}

.tk .comment-input{
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	line-height: 18px;
	height: 20px;
	max-height: 90px;
	padding: 6px 4px 6px 0;
	resize: none;
	overflow-y: auto;
	word-break: break-word;
}

.tk .comment-input::-webkit-scrollbar{
	width: 3px;
}

.tk .comment-input::-webkit-scrollbar-thumb{
	background: rgba( 255, 255, 255, .2 );
	border-radius: 3px;
}

.tk .comment-input::placeholder{
	color: rgba( 255, 255, 255, .45 );
	font-weight: 400;
}

.tk .comment-submit-btn{
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: #ff4757;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex: 0 0 auto;
	transition: opacity .2s ease, transform .15s ease;
}

.tk .comment-submit-btn:hover{
	opacity: .9;
	transform: scale( 1.05 );
}

.tk .comment-submit-btn:disabled{
	opacity: .4;
	cursor: not-allowed;
	transform: none;
}

	/* COMMENT INLINE MESSAGE */
.tk .comment-msg{
	display: none;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 12px;
	line-height: 1.4;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.tk .comment-msg.is-show{
	display: flex;
}

.tk .comment-msg.is-error{
	background: rgba( 255, 71, 87, .12 );
	border: 1px solid rgba( 255, 71, 87, .3 );
	color: #ff6b81;
}

.tk .comment-msg.is-success{
	background: rgba( 46, 213, 115, .12 );
	border: 1px solid rgba( 46, 213, 115, .3 );
	color: #2ed573;
}

	/* COMMENT TREE 2-LEVEL */
.tk .comment-list{
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 8px 0;
}

.tk .comment-item{
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tk .comment-avatar{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .12 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 auto;
}

.tk .comment-avatar.is-admin{
	background: linear-gradient( 135deg, #ff4757 0%, #ff6b81 100% );
	color: #fff;
}

.tk .comment-content-wrap{
	flex: 1;
	min-width: 0;
}

.tk .comment-meta{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}

.tk .comment-author{
	font-size: 13px;
	font-weight: 700;
	color: rgba( 255, 255, 255, .95 );
}

.tk .comment-author.is-admin-text{
	color: #ff4757;
}

.tk .badge-qtv{
	font-size: 9px;
	font-weight: 800;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba( 255, 71, 87, .2 );
	color: #ff4757;
	border: 1px solid rgba( 255, 71, 87, .4 );
}

.tk .comment-time{
	font-size: 11px;
	color: var( --muted );
}

.tk .comment-text{
	font-size: 13px;
	line-height: 1.45;
	color: rgba( 255, 255, 255, .86 );
	word-break: break-word;
}

.tk .reply-tag{
	color: #3867d6;
	font-weight: 700;
}

.tk .comment-actions{
	margin-top: 4px;
}

.tk .btn-reply-action{
	font-size: 11px;
	font-weight: 700;
	color: var( --muted );
	padding: 2px 0;
	transition: color .2s ease;
}

.tk .btn-reply-action:hover{
	color: #ff4757;
}

	/* PHẢN HỒI CẤP 2 */
.tk .comment-replies{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 10px;
	padding-left: 10px;
	border-left: 2px solid rgba( 255, 255, 255, .08 );
}

.tk .comment-item.is-reply .comment-avatar{
	width: 26px;
	height: 26px;
	font-size: 11px;
}

	/* THANH TAG ĐANG TRẢ LỜI */
.tk .reply-indicator{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba( 255, 255, 255, .08 );
	font-size: 12px;
	color: var( --muted );
	margin-bottom: 8px;
}

.tk .reply-indicator strong{
	color: #ff4757;
}

.tk .btn-cancel-reply{
	font-size: 11px;
	color: rgba( 255, 255, 255, .6 );
	padding: 2px 6px;
	cursor: pointer;
}

.tk .btn-cancel-reply:hover{
	color: #fff;
}

	/* NÚT TẢI THÊM BÌNH LUẬN */
.tk .comment-load-more{
	text-align: center;
	padding: 10px 0 16px;
}

.tk .btn-load-more-comment{
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .08 );
	border: 1px solid rgba( 255, 255, 255, .1 );
	font-size: 12px;
	font-weight: 600;
	color: var( --muted );
	transition: background .2s ease, color .2s ease;
}

.tk .btn-load-more-comment:hover{
	background: rgba( 255, 255, 255, .15 );
	color: #fff;
}

	/* RESPONSIVE TRÊN MOBILE */
@media( max-width: 767px ){
	.tk .comment-modal{
		left: 12px;
		right: 12px;
		top: calc( 64px + var( --safe-top ) );
		bottom: auto;
		width: auto;
		max-height: calc( 75vh - var( --safe-top ) );
		border-radius: 18px;
		border: 1px solid rgba( 255, 255, 255, .1 );
		box-shadow: var( --shadow );
		transform: translateY( 20px );
	}

	.tk .comment-modal.is-show{
		transform: translateY( 0 );
	}
}

	/* MEDIA QUERIES */
@media( min-width: 768px ){
	.tk .media-wrap{
		border-radius: 18px;
		box-shadow: var( --shadow );
	}
}

@media( max-width: 1400px ){
		/* RESPONSIVE GRID */
	.tk .video-grid{
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media( max-width: 1100px ){
	.tk .video-grid{
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media( max-width: 1024px ){
	:root{
		--sidebar: 220px;
	}
}

@media( max-width: 850px ){
		/* RESPONSIVE GRID */
	.tk .video-grid{
		grid-template-columns: repeat( 2, 1fr );
		gap: 12px;
	}
}

@media( max-width: 767px ){
	:root{
		--sidebar: 0px;
	}

	.tk .app{
		padding-left: 0;
	}

	.tk .desktop-sidebar{
		display: none;
	}

	.tk .mobile-topbar{
		display: flex;
	}

	.tk .bottom-nav{
		display: flex;
	}

		/* Tối ưu diện tích chạm (Touch Target) trên Mobile */
	.tk .sidebar-toggle .sidebar-left{
		padding: 14px 12px;
	}

	.tk .sidebar-arrow{
		padding: 14px 18px;
		font-size: 14px;
	}

	.tk .sidebar-sub a{
		padding: 12px 14px 12px 48px;
		font-size: 14px;
	}

	.tk .media-wrap{
		width: 100vw;
		height: 100dvh;
		max-width: none;
		border-radius: 0;
	}

	.tk .chip-status{
		top: calc( 62px + var( --safe-top ) );
	}

	.tk .chip-sound{
		top: calc( 62px + var( --safe-top ) );
	}

	.tk .bottom{
		bottom: calc( 76px + var( --safe-bottom ) );
	}

	.tk .meta{
		max-width: calc( 100% - 74px );
	}

		/* RESPONSIVE TRÊN MOBILE: Chuyển thành Drawer trượt từ Topbar xuống */
	.tk .search-modal{
		left: 12px;
		right: 12px;
		top: calc( 64px + var( --safe-top ) );
		bottom: auto;
		width: auto;
		max-height: calc( 70vh - var( --safe-top ) );
		border-radius: 18px;
		border: 1px solid rgba( 255, 255, 255, .1 );
		box-shadow: var( --shadow );
		transform: translateY( -15px );
	}

	.tk .search-modal.is-show{
		transform: translateY( 0 );
	}

	.tk .search-page-wrap{
		padding: calc( 64px + var( --safe-top ) ) 10px calc( 76px + var( --safe-bottom ) );
	}

	.tk .video-grid{
		grid-template-columns: repeat( 2, 1fr );
		gap: 8px;
	}

	.tk .video-card-title{
		font-size: 12px;
	}
}