/* 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; box-sizing: border-box; }
	#content, #sidebar { width: 100%; float: none; }
	#branding { margin-bottom: 10px; }
	#header-actions { margin-bottom: 10px; }
	#header-search { width: 100%; margin-left: 0; }
	.grid-small .item { width: calc(33.333% - 2px); float: left; margin: 0 1px 20px; }
	.grid-small .thumb { width: 100%; height: 0; padding-bottom: 74.5%; }
	.grid-small .thumb img { width: 100%; }
	    .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; }
	.thumb { padding-bottom: 74.5%; }
	#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, #header { padding: 10px; }
	body { min-width: 320px; }
	.boxed-wrap #page { width: 100%; }
	#main { padding: 20px 0; }
	.archive #main, .search #main, .single #main { padding: 20px 10px; }
	.wrap { width: 100%; }
	#content, #sidebar { width: 100%; float: none; }
	.archive .nag, .search .nag { margin: 0 -10px; }
	#branding { float: none; margin-bottom: 5px; }
	#site-logo img { margin: 0 auto; width: 120px; }
	#header-actions { float: none; }
	#header-search { float: none; width: 100%; margin: 0; padding: 15px 0 0; overflow: hidden; }
	#header .wrap { padding: 5px 0; padding-top: 0; }
	.loop-actions .view .grid-small-link { display: none; }
	.grid-small .item { width: 49%; margin: 0 0 15px; padding: 0 .4%; }
	.grid-small .thumb { width: 100%; height: 0; padding-bottom: 74.5%; }
	.grid-small .thumb img { width: 100%; height:100%;}
	.thumb .clip-link { position: unset; }
	.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; }
}

/* Chuyên mục (mobile-category-list) - cân đối ảnh và text trên mobile */
@media (max-width: 768px) {
	#main, #content, .wrap, .loop-content, .nag {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
	.post-grid { grid-template-columns: repeat(2,1fr); }
	.post-thumbnail { width: 100%; height: 150px; }
	 #mobile-menu-icon {
    display: block !important;
  }
  .mobile-category-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 16px;
  }
  .mobile-cat-item {
    position: relative;
    display: block;
    background: #222;
    color: #fff;
    border-radius: 10px;
    padding: 0;
    min-height: 100px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.2s;
    overflow: hidden;
  }
  .mobile-cat-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 0;

}

  .mobile-cat-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 0 0 8px 8px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;

  }
  #details .section-content {
    padding: 8px 32px;
}
   #main-nav,#header .wrap.cf > *:not(#mobile-menu-icon):not(#branding):not(#mobile-home-icon) {
    display: none !important;
  }
.mobile-cat-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* chỉnh độ tối tại đây */
    z-index: 0;
}
.related-posts .section-content {
    border-bottom: 1px solid #2b2b2b;
    padding: 0 20px;
}
.section-content {
	margin: 0 -18px 20px;

	padding-bottom: 10px
}

}

@media (min-width: 640px) and (max-width: 768px) {
    .grid-small .nag {
        margin: 0 1px;

	}}
/* 02/10/2026: hàng nút dưới video trên mobile (Diễn viên | like, dislike, %, chia sẻ, lưu) giữ 1 hàng.
   Trước đây nút Diễn viên bị ép rộng 120px + khối like giới hạn 60vw và cho xuống dòng ->
   khi thêm nút lưu thì các nút bị nhảy xuống hàng dưới. */
@media (max-width: 600px) {
	#video-actions.video-info-row {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 6px !important;
	}
	#video-actions.video-info-row > div:first-child {
		flex: 0 0 auto !important;
	}
	#video-actions #performer-btn.video-actor-btn {
		width: auto !important;
		padding: 5px 8px !important;
		font-size: 13px !important;
		gap: 4px !important;
	}
	#video-actions.video-info-row > .video-info-like {
		flex: 1 1 auto !important;
		max-width: none !important;
		justify-content: flex-end !important;
	}
	#video-actions .video-info-like > .video-stats {
		flex-wrap: nowrap !important;
		gap: 4px !important;
	}
	#video-actions .video-stats .share-link-btn {
		padding: 6px !important;
	}
}