/* Custom Responsive Rules migrated from custom.css */
@media (max-width: 768px) {
		.load-more-related-btn {
				padding: 10px 30px;
				font-size: 14px;
		}
		.load-more-wrapper {
				margin: 20px 0;
				padding: 15px 0;
		}
		.load-more-info {
				font-size: 12px;
		}
}

@media (max-width: 600px) {
	.video-info-row {
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 8px;
	}
	
	.video-info-row > div {
		flex: 1 1 auto !important;
		min-width: 0;
	}
	.video-info-like {
		flex: 0 0 auto !important;
		justify-content: flex-end !important;
		display: flex !important;
		margin-left: auto !important;
		min-width: 0;
		max-width: 60vw;
		flex-wrap: nowrap;
		gap: 6px;
	}
	.video-info-like > * {
		min-width: 0;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.video-actor-btn {
		width: auto !important;
		min-width: 0;
		justify-content: flex-start;
		font-size: 15px;
		padding: 6px 10px;
		margin-bottom: 0;
		white-space: nowrap;
	}
}

@media (max-width: 600px) {
	#video-actions.video-info-row {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px;
		padding: 0 8px;
	}
	#video-actions .video-info-like {
		margin-left: auto !important;
		flex-wrap: nowrap;
		min-width: 0;
		max-width: 60vw;
	}
	#video-actions .video-info-like > * {
		min-width: 0;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

    #video-actions .video-actor-btn {
        width: 120px !important;
        min-width: 0;
        justify-content: flex-start;
        font-size: 15px;
        padding: 4px 0px;
        margin-bottom: 0;
        white-space: nowrap;
    
}
}
/* ===================== Responsive CSS Cleaned ===================== */

/* Tablet: 640px - 959px */
@media only screen and (min-width:640px) and (max-width:959px) {
	body { min-width: 0; }
	.boxed-wrap #page { max-width: 100%; width: 100%; }
	#main { padding: 20px 0; }
	.wrap { max-width: 100%; width: 100%; padding: 0 8px; }
	#content, #sidebar { width: 100%; float: none; }
	.single-format-video #content { width: 100%; }
	.grid-small .item {
		width: calc(33.333% - 6px);
	}
	.top-week-ranking-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		max-height: 460px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.top-week-ranking-list .slider-item-inner {
		flex-direction: column;
	}
	.top-week-ranking-list .slider-thumb {
		width: 100%;
		flex-basis: auto;
		margin: 8px 8px 0;
		padding-top: 62.1%; /* ty le 480:298 cua custom-medium hien tai */
	}
	.top-week-ranking-list .slider-info {
		display: block;
	}
	#video-actions { justify-content: center; }
	.video-stats { justify-content: center; }
	.top-week-ranking-wrapper .hot-trending-title {
		text-align: center;
		font-size: 26px;
		padding: 14px 8px;
		margin: 0 -8px;
		background: #0d0d0d;
		border-radius: 8px 8px 0 0;
	}
	.top-week-ranking-wrapper .hot-trending-title a {
		background: linear-gradient(90deg, #ff2b2b, #ff7a18, #ff2b8f);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: #ff3b3b;
		font-weight: 700;
		letter-spacing: 0.5px;
	}
	    .mobile-cat-item {
        justify-content: center;
        min-height: 150px;
        padding: 0;
    }
}

/* Mobile: max-width 639px */
@media only screen and (max-width:639px) {
	.grid-small .nag { margin: 1px; }
	.grid-small .item {
		width: calc(50% - 6px);
	}
	#main-nav .wrap { background: url(images/nav-sep.png) no-repeat right 0; margin: 0; }
	#main-nav .menu { display: block; }
	.loop-actions .prefix { display: none; }
	#main-nav .menu>li.current-menu-item { position: relative; color: #eee; border-radius: 5px; }
	.defixm { margin: 0 -10px !important; }
	.comment-form-author, .comment-form-url { margin-left: 0; width: 100%; float: none; }
	#pull { display: inline-block; width: 100%; position: relative; background: url(images/select-arrow.png) no-repeat right 0 center #222; line-height: 40px; text-indent: 10px; font-size: 16px; color: #fff; }
	#pull:hover { text-decoration: none; }
	#footer { padding: 10px; }
	body { min-width: 0; }
	.boxed-wrap #page { max-width: 100%; width: 100%; }
	#main { padding: 20px 0; }
	.archive #main, .search #main, .single #main { padding: 20px 0; }
	.wrap { max-width: 100%; width: 100%; padding: 0 6px; }
	#content, #sidebar { width: 100%; float: none; }
	.single-format-video #content { width: 100%; }
	.archive .nag, .search .nag { margin: 0; }
	#branding { margin-bottom: 5px; }
	#site-logo img { width: 120px; }
	#header .wrap { padding: 10px; flex-wrap: nowrap; }
	#header { position: relative; z-index: 1002; }

	#mobile-menu-toggle,
	#mobile-search-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	#branding {
		flex: 1 1 auto;
		min-width: 0;
		text-align: center;
		margin-bottom: 0;
	}

	#site-logo {
		display: inline-block;
	}

	#site-title {
		display: inline-block;
	}

	#main-nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 280px;
		max-width: 80%;
		height: 100vh;
		background: #161616;
		z-index: 1001;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .3s ease;
		box-shadow: 2px 0 16px rgba(0,0,0,.5);
	}
	#main-nav.is-open {
		transform: translateX(0);
	}
	#main-nav .wrap {
		background: none;
		margin: 0;
		padding: 60px 0 30px;
	}
	#main-nav .menu {
		float: none;
		background: none;
		padding-right: 0;
	}
	#main-nav .menu>li {
		float: none;
		height: auto;
		background: none;
		border-bottom: 1px solid #262626;
	}
	#main-nav .menu>li>a {
		float: none;
		display: block;
		margin: 0;
		margin-bottom: 0;
		padding: 14px 20px;
		border-radius: 0;
		background-color: transparent;
		font-size: 15px;
	}
	#main-nav .menu>li.current-menu-item>a {
		right: 0;
		border-top: none;
		border-left: 3px solid #d8201d;
		margin-top: 0;
		padding-bottom: 14px;
		background: #1a1a1a;
	}
	#main-nav ul ul {
		position: static;
		width: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		transition: none;
		border-top: none;
	}
	#main-nav li.submenu-open>ul {
		display: block;
	}
	#main-nav ul ul li a {
		padding-left: 36px;
	}
	#main-nav ul ul ul {
		left: 0;
		top: 0;
	}
	#main-nav ul ul ul li a {
		padding-left: 52px;
	}
	#main-nav li:hover>ul {
		display: none;
	}
	#main-nav li.submenu-open:hover>ul {
		display: block;
	}

	#nav-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.6);
		z-index: 1000;
	}
	#nav-overlay.is-open {
		display: block;
	}

	#search-box {
		display: none;
	}
	#search-box.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 10px;
		background: #161616;
		box-sizing: border-box;
		z-index: 100;
	}

	.loop-actions .view .grid-small-link { display: none; }

	/* Bang xep hang tuan - mobile: thu ve luoi 2 cot, doi card sang kieu
	   anh tren/chu duoi thay vi hang ngang (ngang qua hep se bi be) */
	.top-week-ranking-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		max-height: 420px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.top-week-ranking-list .slider-item-inner {
		flex-direction: column;
	}
	.top-week-ranking-list .slider-thumb {
		width: 100%;
		flex-basis: auto;
		margin: 8px 8px 0;
		padding-top: 62.1%; /* ty le 480:298 cua custom-medium hien tai */
	}
	.top-week-ranking-list .slider-info {
		display: block;
	}
	.top-week-ranking-list .rank-number {
		font-size: 22px;
	}
	.thumb .clip-link { position: unset; }
	#video-actions { justify-content: center; }
	.video-stats { justify-content: center; }
	.top-week-ranking-wrapper .hot-trending-title {
		text-align: center;
		font-size: 26px;
		padding: 14px 8px;
		margin: 0 -8px;
		background: #0d0d0d;
		border-radius: 8px 8px 0 0;
	}
	.top-week-ranking-wrapper .hot-trending-title a {
		background: linear-gradient(90deg, #ff2b2b, #ff7a18, #ff2b8f);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: #ff3b3b;
		font-weight: 700;
		letter-spacing: 0.5px;
	}
	.entry-header .entry-title { float: none; margin: 0 0 10px !important; }
	.entry-header .entry-actions { float: none; margin: 0; }
	#colophon { text-align: center; }
	#credits { margin: 0; padding: 10px; display: block; }
}