/* ==============================================
HH3DHAY overrides - fix bundle CSS issues
============================================== */
/* Bundle co cac rule pha layout - reset het */
html, body { max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 0 !important; margin: 0 !important; }
body.halimthemes { padding: 0 !important; margin: 0 !important; width: 100% !important; min-width: 100% !important; }
/* Logo: bo background image cua theme goc, hien anh logo + ten site */
#header .site-title{background:none !important;text-indent:0 !important;height:auto !important;margin:0 !important;font-size:18px;font-weight:700;color:#fff !important;text-align:left;line-height:1;padding:0}
#header .site-title a{position:static !important;color:#fff !important;display:inline-flex !important;align-items:center;gap:10px;width:auto !important;height:auto !important}
#header .site-title .site-logo{max-height:46px;width:auto;display:block}
#header .site-title .site-name-text{font-size:18px;font-weight:700;color:#fff;white-space:nowrap}
@media (max-width: 767px) {
#header .site-title .site-name-text{display:none}
#header .site-title .site-logo{max-height:36px}
}
/* Desktop (>=768px): 3 cot ngang hang (logo / search / actions), logo thang voi grid */
@media (min-width: 768px) {
/* Khong dong vao .container - giu nguyen Bootstrap default */
#header #headwrap{display:flex !important;align-items:center !important;justify-content:space-between !important;flex-wrap:wrap;padding:14px 0 !important;margin:0 !important;gap:20px}
#header #headwrap > .slogan{flex:0 0 auto;width:auto !important;padding:0 !important;margin:0 !important}
#header #headwrap > .slogan .site-title{margin:0 !important;padding:0 !important}
#header #headwrap > .slogan .site-title a{padding:0 !important;margin:0 !important}
#header #headwrap > .halim-search-form{flex:1 1 auto;width:auto !important;max-width:480px}
#header #headwrap > .mobile-icon-menu{flex:0 0 auto;width:auto !important;padding:0 !important;margin:0 !important}
}
/* Xich logo trai + icon menu phai khi zoom <= 100% (viewport >= 1280px) */
@media (min-width: 1280px) {
#header #headwrap > .slogan .site-title a{margin:0 0 0 -100px !important}
#header #headwrap > .mobile-icon-menu{margin-right:-100px !important}
}
/* Material Icons (load tu Google) */
.material-icons-round1{font-family:'Material Icons Round','Material Icons';font-weight:normal;font-style:normal;font-size:22px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga'}
.mobile-icon-menu{padding:14px 0}
@media (max-width: 767px) {
.mobile-icon-menu{margin-top:0 !important;padding:0 !important}
#header #headwrap{padding:4px 0 !important}
#header .site-title{padding:0 !important;margin:0 !important}
#header .site-title .site-logo{max-height:48px}
}
.mobile-icon-menu .nav-items{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.mobile-icon-menu .nav-items a{display:flex;flex-direction:column;align-items:center;color:#aaa;font-size:11px;padding:6px 10px;background:#12171b;border-radius:4px;min-width:54px}
.mobile-icon-menu .nav-items a:hover{color:#fff;background:#1c2530}
.mobile-icon-menu .nav-label{display:block;margin-top:2px;white-space:nowrap;font-size:10px}
/* Notice bar */
.notice-pc, .notice-mobile { display: none; } /* an thong bao bit.ly cua theme goc */
/* Title-block watch page - flex align center 2 ben (title trai + rating phai) */
.title-block.watch-page{display:flex !important;align-items:center !important;justify-content:space-between !important;flex-wrap:wrap;gap:8px;padding:6px 12px !important;background:#1f2021;border-radius:6px;margin-bottom:14px;overflow:visible !important;min-height:0 !important}
.title-block.watch-page .title-wrapper{flex:1 1 auto;float:none !important;width:auto !important;padding:0 !important;border:0 !important;margin:0}
.title-block.watch-page .title-wrapper h1.entry-title{margin:0 !important;line-height:1.2 !important;font-size:15px !important;-webkit-line-clamp:1 !important;line-clamp:1 !important;color:#fff !important}
.title-block.watch-page .title-wrapper h1.entry-title a,
.title-block.watch-page .title-wrapper h1.entry-title i{color:#fff !important}
/* Player controls - hover doi text + icon thanh trang */
.halim-control-btn:hover,
.halim-control-btn:hover *,
.halim-control-btn:hover i,
.halim-control-btn:hover span{color:#fff !important;opacity:1 !important}
.title-block.watch-page .ratings_wrapper{flex:0 0 auto;float:none !important;width:auto !important;display:flex !important;align-items:center;height:auto !important;text-align:right}
.title-block.watch-page .halim-rating-container{height:32px;padding:4px 10px}
.title-block.watch-page .halim-rating-container .halim-rating-button{height:24px;padding:0 12px;font-size:12px}
/* Mobile: title-block compact, title 1 hang truncate, rating box full width */
@media (max-width: 767px) {
.title-block.watch-page{padding:8px 10px !important;gap:8px}
.title-block.watch-page .title-wrapper{min-width:0;overflow:hidden;flex:1 1 100%}
.title-block.watch-page .title-wrapper h1.entry-title{font-size:14px !important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block !important;line-height:1.3 !important}
.title-block.watch-page .ratings_wrapper{flex:1 1 100% !important;width:100% !important;text-align:left !important;display:block !important}
.title-block.watch-page .halim-rating-container{display:flex !important;width:100% !important;justify-content:space-between;align-items:center;height:auto;padding:8px 12px}
.title-block.watch-page .halim-rating-container .halim-rating-button{margin-left:auto}
}
/* Rating box - same height/padding cho box top (single-phim) va box duoi (watch page) */
.halim-rating-container{display:flex;align-items:center;gap:10px;background:#0e1419;padding:8px 14px;border-radius:6px;height:40px;width:100%;box-sizing:border-box;flex-wrap:nowrap;min-width:0}
.halim-rating-container .halim-rating-button{margin-left:auto;flex-shrink:0}
.halim-rating-container .halim-star-rating{display:inline-flex;align-items:center;gap:4px;color:#fff;font-size:14px;line-height:1;min-width:0;flex-wrap:wrap}
.halim-rating-container .halim-star-icon{color:#ffb400;font-size:16px;flex-shrink:0}
.halim-rating-container .halim-rating-score{font-weight:700;font-size:15px;color:#fff;flex-shrink:0}
.halim-rating-container .halim-rating-slash,.halim-rating-container .halim-rating-max{color:#888;font-size:13px;flex-shrink:0}
.halim-rating-container .halim-rating-votes{color:#888;font-size:12px;margin-left:4px;flex-shrink:0}
.halim-rating-container .halim-rating-button{
background:linear-gradient(180deg,#4a8fdc 0%,#1d5fb8 100%);
color:#fff;border:0;padding:0 16px;height:28px;border-radius:4px;
font-weight:700;font-size:13px;cursor:pointer;line-height:1;white-space:nowrap;
transition:filter .15s,transform .15s;
text-shadow:0 1px 1px rgba(0,0,0,.3);
box-shadow:0 2px 6px rgba(29,95,184,.35);
}
.halim-rating-container .halim-rating-button:hover{filter:brightness(1.1);transform:translateY(-1px)}
/* Mobile: thu gọn rating container — giảm padding+gap để giữ button trên cùng hàng */
@media (max-width: 600px){
.halim-rating-container{padding:6px 10px !important;gap:6px !important;height:auto !important;min-height:38px}
.halim-rating-container .halim-rating-button{padding:0 8px !important;height:22px !important;font-size:10px !important;letter-spacing:.2px}
.halim-rating-container .halim-rating-score{font-size:14px}
.halim-rating-container .halim-rating-votes{font-size:11px}
/* Genre tags (CN Animation, Hành động, HH3D, …) — thu nhỏ trên mobile */
.list_cate a{padding:2px 7px !important;margin:2px !important;font-size:11px !important;line-height:1.4 !important;border-radius:4px !important}
}
/* Player wrapper - force full width container, iframe fill 100% aspect 16:9 */
#halim-player-wrapper{width:100% !important;max-width:100%;margin:0 0 14px;padding:0;float:none !important}
#ajax-player-hh3d{width:100%;background:#000;border-radius:8px 8px 0 0;overflow:hidden}
#ajax-player-hh3d iframe{width:100% !important;display:block;border:0;aspect-ratio:16/9;height:auto}
@media (max-width: 767px) {
#halim-player-wrapper{margin:0 0 8px}
#ajax-player-hh3d{border-radius:0}
}
/* An icon search trong mobile-icon-menu (vi navbar mobile da co icon search rieng) */
#mobile-search-toggle{display:none !important}
/* Icon search button trong navbar mobile */
.navbar-toggle.hh3d-search-btn{display:block !important;float:right;background:transparent;border:0;color:#fff;padding:8px 12px;font-size:0;cursor:pointer}
.navbar-toggle.hh3d-search-btn .hl-search{font-family:'halimfont';font-size:22px;color:#fff;line-height:1;display:inline-block}
.navbar-toggle.hh3d-search-btn:hover .hl-search{color:#ffd000}
@media (min-width: 768px) {
.navbar-toggle.hh3d-search-btn{display:none !important}
}
/* Mobile search box (slide down khi bam icon search) - style giong thanh search PC */
.mobile-search-box{display:none;padding:10px 12px;background:transparent;animation:hh3d-slide-down .25s ease}
.mobile-search-box.open{display:block}
.mobile-search-box form{position:relative;margin:0}
.mobile-search-box form::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain;pointer-events:none}
.mobile-search-box input{width:100%;background:#212020;border:1px solid #2a3441;border-radius:5px;color:#fff;padding:10px 16px 10px 40px;outline:none;font-size:16px;line-height:1.4;transition:border-color .15s;-webkit-appearance:none}
.mobile-search-box input:focus{border-color:#0086b3}
.mobile-search-box input::placeholder{color:#888}
@keyframes hh3d-slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media (min-width: 768px) {
#mobile-search-toggle, .mobile-search-box{display:none !important}
}
/* Mobile: card dau hang (2n+1) sat le trai 1px, card cuoi hang (2n) sat le phai 1px */
@media (max-width: 767px) {
.halim_box > article.grid-item:nth-of-type(2n+1) { padding-left: 1px !important; }
.halim_box > article.grid-item:nth-of-type(2n) { padding-right: 1px !important; }
}
/* Schedule tabs - bo padding-left mac dinh cua */
.halim-schedule-block,
.halim-schedule-block-mobile{list-style:none !important}
/* Desktop: an mobile tabs + collapse box */
@media (min-width: 768px) {
.halim-schedule-block-mobile{display:none !important}
#collapseShowtime{display:none !important}
}
/* Mobile: collapse mac dinh an, khi co class .in (Bootstrap toggle) thi hien */
@media (max-width: 767px) {
#collapseShowtime{display:none !important}
#collapseShowtime.in{display:block !important}
}
/* Mobile: an desktop tabs, hien mobile tabs */
@media (max-width: 767px) {
.halim-schedule-block.schedule:not(.menu){display:none !important}
/* Bo padding cua bao quanh schedule */
#main-contents > section { padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
/* 2 tab sat 2 mep, cach o giua bang padding noi cua tung li */
.halim-schedule-block-mobile.mt-3 { gap: 0 !important; padding: 0 2px !important; }
.halim-schedule-block-mobile.mt-3 > li:first-child { padding-right: 4px !important; }
.halim-schedule-block-mobile.mt-3 > li:last-child { padding-left: 4px !important; }
.halim-schedule-block-mobile.mt-3 > li + li { margin-left: 0 !important; }
.halim-schedule-block-mobile.mt-3 > li { flex: 1 1 0 !important; min-width: 0 !important; display: block !important; width: auto !important; float: none !important; }
.halim-schedule-block-mobile.mt-3 > li > a { margin: 0 !important; display: block !important; width: 100% !important; position: relative; }
/* Bo ::before/::after cua tab top (li, a, span) */
.halim-schedule-block-mobile.mt-3::before,
.halim-schedule-block-mobile.mt-3::after,
.halim-schedule-block-mobile.mt-3 > li::before,
.halim-schedule-block-mobile.mt-3 > li::after,
.halim-schedule-block-mobile.mt-3 > li > a::before,
.halim-schedule-block-mobile.mt-3 > li > a::after,
.halim-schedule-block-mobile.mt-3 > li > a > span::before,
.halim-schedule-block-mobile.mt-3 > li > a > span::after { content: none !important; display: none !important; }
/* Showtime collapse - dung style giong tab top "Moi cap nhat / Lich chieu" (flex 2 cot, sat le) */
#collapseShowtime{padding:0 2px !important;margin:4px 0 0 !important;background:transparent !important}
#collapseShowtime .showtime{
display:flex !important;
flex-wrap:wrap !important;
gap:4px 0 !important;
padding:0 !important;
width:100% !important;
background:transparent !important;
}
#collapseShowtime .showtime .item{
flex:1 1 calc(50% - 0px) !important;
max-width:50% !important;
box-sizing:border-box !important;
display:block !important;
clear:none !important;
float:none !important;
background:#333 !important;
background-image:none !important;
color:#fff !important;
padding:8px 4px !important;
border-radius:4px !important;
text-align:center !important;
text-decoration:none !important;
font-size:13px !important;
margin:0 !important;
line-height:1.4 !important;
overflow:visible !important;
min-height:0 !important;
}
#collapseShowtime .showtime .item:nth-child(odd){margin-left:0 !important;margin-right:4px !important;max-width:calc(50% - 4px) !important}
#collapseShowtime .showtime .item:nth-child(even){margin-left:4px !important;margin-right:0 !important;max-width:calc(50% - 4px) !important}
#collapseShowtime .showtime .item p{margin:0 !important;font-weight:600 !important}
#collapseShowtime .showtime .item:hover,#collapseShowtime .showtime .item.active{background:linear-gradient(140deg,rgba(0,77,102,.8) 0%,rgba(0,134,179,.9) 50%,rgba(0,191,255,1) 100%) !important;color:#fff !important}
}
/* ==========================================================
LIVE SEARCH DROPDOWN
========================================================== */
.halim-search-form{position:relative}
.ajax-results.ui-autocomplete{
position:absolute;
top:calc(100% + 4px);
left:0;
right:0;
background:#1c1c20;
border:1px solid rgba(255,255,255,.1);
border-radius:8px;
box-shadow:0 14px 40px rgba(0,0,0,.6);
list-style:none;
margin:0;
padding:6px 0;
max-height:480px;
overflow-y:auto;
z-index:9999;
}
.ajax-results.hidden{display:none !important}
.ajax-results .ls-head{
padding:8px 14px 10px;
color:#bbb;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,.06);
margin-bottom:4px;
}
.ajax-results .ls-head b{color:#e50914;font-weight:700}
.ajax-results .ls-empty{
padding:18px 14px;
text-align:center;
color:#888;
font-size:13px;
}
.ajax-results li{margin:0;padding:0;list-style:none}
.ajax-results li > a{
display:flex;
align-items:center;
gap:12px;
padding:8px 14px;
text-decoration:none !important;
color:#fff;
transition:background .15s;
}
.ajax-results li > a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.ajax-results img{
width:50px;
height:70px;
object-fit:cover;
border-radius:4px;
flex-shrink:0;
background:#000;
}
.ajax-results .ls-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ajax-results .ls-title{
font-size:14px;
font-weight:600;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ajax-results .ls-tap{color:#bbb;font-weight:400;font-size:12px}
.ajax-results .ls-orig{
font-size:13px;
color:#fcd34d;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-shadow:0 0 8px rgba(252,211,77,.25);
}
@media (max-width:767px){
.ajax-results.ui-autocomplete{max-height:60vh;left:0 !important;right:0 !important;width:auto !important}
#mobile-search-box{position:relative}
#mobile-search-box .ajax-results.ui-autocomplete{
position:absolute !important;left:12px !important;right:12px !important;
top:calc(100% - 4px) !important;z-index:99999 !important;
max-height:70vh !important;
}
.ajax-results img{width:42px;height:60px}
.ajax-results .ls-title{font-size:13px}
.ajax-results .ls-orig{font-size:12px}
}
/* ==========================================================
ACCOUNT POPUP DROPDOWN — y hệt mockup HTML
========================================================== */
.hh3d-account-trigger{cursor:pointer}
.mobile-icon-menu{position:relative}
.hh3d-acc-trigger-wrap{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:1}
.hh3d-acc-trigger-avatar{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:50%;
overflow:hidden;
color:#fff;
font-size:11px;
font-weight:700;
line-height:1;
}
.hh3d-acc-trigger-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hh3d-acc-trigger-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1}
.hh3d-account-trigger .hh3d-acc-trigger-icon{font-size:22px;color:#fff;line-height:1}
.hh3d-account-popup{
position:absolute !important;
top:calc(100% + 8px) !important;
right:0 !important;
width:240px !important;
background:#2b2b2b !important;
border:1px solid #3a3a3a !important;
border-radius:8px !important;
box-shadow:0 10px 40px rgba(0,0,0,.5) !important;
padding:0 0 6px 0 !important;
z-index:9999 !important;
text-align:center !important;
overflow:hidden !important;
}
.hh3d-account-popup > .hh3d-acc-avatar{margin-top:20px !important}
.hh3d-account-popup[hidden]{display:none !important}
.hh3d-acc-avatar{
width:62px !important;
height:62px !important;
border-radius:50% !important;
margin:0 auto 10px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
}
.hh3d-acc-avatar img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important}
.hh3d-acc-initial{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
color:#fff !important;
font-size:28px !important;
font-weight:700 !important;
line-height:1 !important;
}
.hh3d-acc-name{
text-align:center !important;
color:#fff !important;
font-size:17px !important;
font-weight:700 !important;
margin:0 0 14px 0 !important;
}
.hh3d-acc-menu{
list-style:none !important;
margin:0 !important;
padding:0 !important;
width:100% !important;
}
.hh3d-acc-menu:not([hidden]){display:block !important}
.hh3d-acc-menu[hidden]{display:none !important}
.hh3d-acc-menu li{
margin:0 !important;
padding:0 !important;
list-style:none !important;
display:block !important;
width:100% !important;
text-align:left !important;
background:transparent !important;
float:none !important;
transition:background .2s ease !important;
}
.hh3d-acc-menu li + li{border-top:1px solid #3a3a3a !important}
.hh3d-acc-menu li:hover{background:#3a3a3a !important}
.hh3d-acc-menu li a{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
padding:10px 16px !important;
color:#fff !important;
text-decoration:none !important;
font-size:15px !important;
font-weight:600 !important;
background:transparent !important;
width:100% !important;
box-sizing:border-box !important;
text-align:left !important;
white-space:nowrap !important;
border-radius:0 !important;
transition:color .2s ease !important;
}
.hh3d-acc-menu li a:hover{
background:transparent !important;
color:#fff !important;
text-decoration:none !important;
}
.hh3d-acc-menu li:hover .hh3d-acc-icon{background:#4a4a4a !important}
.hh3d-acc-menu li a > div{display:none !important}
.hh3d-acc-icon{
width:30px !important;
height:30px !important;
border-radius:50% !important;
background:#3a3a3a !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0 !important;
margin:0 !important;
padding:0 !important;
}
.hh3d-acc-icon i{font-size:13px !important;color:#fff !important;margin:0 !important}
.hh3d-acc-text{flex:1 !important;text-align:left !important;color:inherit !important;font-size:15px !important;font-weight:600 !important}
.hh3d-acc-arrow{font-size:11px !important;color:#888 !important;flex-shrink:0 !important;margin-left:auto !important;transition:transform .2s}
.hh3d-acc-submenu-trigger:hover .hh3d-acc-arrow{color:#fff !important;transform:translateX(2px)}
.hh3d-account-popup .nav-label{display:none !important}
.hh3d-account-popup ul[hidden],
.hh3d-account-popup [hidden]{display:none !important}
.hh3d-acc-pane[hidden]{display:none !important}
.hh3d-acc-back{border-bottom:1px solid #3a3a3a !important}
.hh3d-acc-back .hh3d-acc-text{color:#aaa !important}
.hh3d-acc-back-trigger:hover .hh3d-acc-text{color:#fff !important}
.hh3d-acc-back .hh3d-acc-icon{background:transparent !important}
@media (max-width:767px){
.hh3d-account-popup{
position:fixed !important;
top:170px !important;
left:50% !important;
right:auto !important;
bottom:auto !important;
transform:translateX(-50%) !important;
width:280px !important;
max-width:calc(100% - 32px) !important;
}
}
/* ==========================================================
BÌNH LUẬN GẦN ĐÂY + ĐANG SÔI NỔI (front-page)
========================================================== */
.hh3d-comm-row{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:24px;align-items:stretch}
.hh3d-comm-row > .comments-section,.hh3d-comm-row > .trending-section{display:flex;flex-direction:column;height:100%}
.hh3d-comm-row .comments-container,.hh3d-comm-row .trending-container{flex:1}
.comments-section,.trending-section{background:#1a1a1a !important;border:0 !important;border-radius:8px !important;padding:0 !important;overflow:hidden}
.section-header{align-items:center !important;background:hsla(0,0%,100%,.05) !important;border-bottom:1px solid hsla(0,0%,100%,.1) !important;display:flex !important;justify-content:space-between !important;padding:14px 18px !important;margin:0 !important;flex-wrap:wrap;gap:8px}
.section-header h3{color:#f1f1f1 !important;font-size:15px !important;font-weight:600 !important;margin:0 !important;align-items:center !important;display:flex !important;gap:8px !important}
.section-header h3 i,.section-header h3 *{color:#fff !important}
.header-controls{display:flex;align-items:center;gap:8px}
.sort-select{background:#2a2a2a !important;border:1px solid hsla(0,0%,100%,.2) !important;border-radius:4px !important;color:#f1f1f1 !important;cursor:pointer;font-size:12px !important;padding:5px 10px !important;transition:all .2s ease;outline:none}
.sort-select:focus,.sort-select:hover{background:#333 !important;border-color:hsla(0,0%,100%,.3) !important}
.sort-select option{background:#2a2a2a;color:#f1f1f1}
.refresh-btn{background:transparent !important;border:1px solid hsla(0,0%,100%,.2) !important;border-radius:5px !important;color:#aaa !important;cursor:pointer;padding:5px 10px !important;font-size:12px;transition:all .2s ease}
.refresh-btn:hover{background:hsla(0,0%,100%,.1) !important;border-color:hsla(0,0%,100%,.3) !important;color:#f1f1f1 !important}
.lazy-loading-message{text-align:center;color:#666;padding:30px 10px;font-size:13px}
.lazy-loading-message i{margin-right:6px}
/* Comment item */
.comment-item{align-items:flex-start;border-bottom:1px solid hsla(0,0%,100%,.05);display:flex;gap:12px;padding:14px 18px;transition:background-color .2s ease;text-decoration:none;color:inherit}
.comment-item:last-child{border-bottom:0}
.comment-item:hover{background:hsla(0,0%,100%,.02);text-decoration:none;color:inherit}
.comment-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#000}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;justify-content:space-between;gap:6px;font-size:12px;margin-bottom:3px}
.comment-author{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comment-author:not([class*="color_"]){color:#f1f1f1}
.comment-time{color:#888;flex-shrink:0;font-size:11px}
.comment-text{font-size:13px;color:#ccc;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px}
.comment-on{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Trending item */
.trending-item{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.05);color:inherit;display:flex;gap:12px;padding:12px 16px;text-decoration:none;transition:background-color .2s ease}
.trending-item:last-child{border-bottom:0}
.trending-item:hover{background:hsla(0,0%,100%,.02);text-decoration:none;color:inherit}
.trending-rank{
flex-shrink:0;
width:36px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(39deg,#fecf59,#fff1cc);
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:#fff0;
font-weight:800;
font-style:italic;
font-size:34px;
line-height:1;
}
.trending-thumb{width:46px;height:64px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#000}
.trending-info{flex:1;min-width:0}
.trending-title{font-size:13px;font-weight:600;color:#f1f1f1;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.trending-meta{font-size:11px;color:#888;display:flex;align-items:center;gap:5px}
.trending-meta i{color:#aaa}
@media (max-width:991px){
.hh3d-comm-row{grid-template-columns:1fr;gap:14px}
}
/* ==========================================================
COMMENTS BOX (single-phim + watch page)
========================================================== */
.hh3d-comments{margin-top:24px;background:#1a1a1a;border-radius:8px;overflow:hidden}
.hh3d-comments-head{background:hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.1);padding:14px 18px}
.hh3d-comments-head .section-title{margin:0 !important}
.hh3d-comments-head .section-title span{color:#f1f1f1 !important;font-size:15px !important;font-weight:600 !important;display:flex;align-items:center;gap:8px}
.hh3d-comments-head .section-title i{color:#fff !important}
.hh3d-cm-count{font-weight:700 !important;font-size:13px !important;margin-left:4px !important;background:linear-gradient(to right,#ff8a00,#ff2070) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;text-decoration:none !important;border-bottom:0 !important;float:none !important;position:static !important}
.hh3d-cm-count:before,.hh3d-cm-count:after{content:none !important;display:none !important;background:none !important;border:0 !important;padding:0 !important}
/* Form */
.hh3d-cm-form{padding:16px 18px;border-bottom:1px solid hsla(0,0%,100%,.05)}
.hh3d-cm-form-row{display:flex;gap:12px;align-items:flex-start}
.hh3d-cm-input-wrap{flex:1;min-width:0}
.hh3d-cm-input-wrap textarea{width:100%;background:#2a2a2a;border:1px solid hsla(0,0%,100%,.1);border-radius:8px;color:#f1f1f1;padding:10px 14px;font-size:14px;line-height:1.5;resize:vertical;min-height:70px;outline:none;transition:border-color .15s;box-sizing:border-box;font-family:inherit}
.hh3d-cm-input-wrap textarea:focus{border-color:#00bfff}
.hh3d-cm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;align-items:center}
.hh3d-cm-submit{background:linear-gradient(140deg,#0086b3 0%,#00bfff 100%);border:none;border-radius:6px;color:#fff;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .15s;display:inline-flex;align-items:center;gap:6px}
.hh3d-cm-submit:hover{filter:brightness(1.1)}
.hh3d-cm-submit:disabled{opacity:.6;cursor:not-allowed}
.hh3d-cm-cancel-reply{background:transparent;border:1px solid hsla(0,0%,100%,.15);border-radius:6px;color:#aaa;padding:7px 14px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.hh3d-cm-cancel-reply:hover{background:hsla(0,0%,100%,.05);color:#fff}
.hh3d-cm-loginbox{padding:16px 18px;border-bottom:1px solid hsla(0,0%,100%,.05);color:#aaa;font-size:14px;background:hsla(0,0%,100%,.02);text-align:center}
.hh3d-cm-loginbox i{color:#00bfff;margin-right:6px}
.hh3d-cm-loginbox a{color:#00bfff;font-weight:600;text-decoration:none}
.hh3d-cm-loginbox a:hover{text-decoration:underline}
/* List */
.hh3d-cm-list{padding:0}
.hh3d-cm-empty{padding:30px;text-align:center;color:#888;font-size:14px}
.hh3d-cm-item{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid hsla(0,0%,100%,.05)}
.hh3d-cm-list > .hh3d-cm-item:last-child{border-bottom:0}
.hh3d-cm-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;line-height:1;position:relative;overflow:visible}
.hh3d-cm-avatar img:not(.hh3d-cm-frame){width:100%;height:100%;object-fit:cover;border-radius:50%}
.hh3d-cm-avatar-sm{width:34px;height:34px;font-size:14px}
.hh3d-cm-body{flex:1;min-width:0}
.hh3d-cm-meta{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.hh3d-cm-author{color:#f1f1f1;font-weight:600;font-size:14px}
.hh3d-cm-time{color:#888;font-size:11px}
.hh3d-cm-text{color:#ddd;font-size:14px;line-height:1.55;word-wrap:break-word}
.hh3d-cm-text p{margin:0 0 4px}
.hh3d-cm-text p:last-child{margin-bottom:0}
.hh3d-cm-tools{margin-top:6px;display:flex;gap:14px;align-items:center}
.hh3d-cm-reply-btn,.hh3d-cm-delete-btn,.hh3d-cm-like-btn{background:transparent;border:0;color:#888;cursor:pointer;font-size:12px;padding:0;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.hh3d-cm-reply-btn:hover{color:#00bfff}
.hh3d-cm-delete-btn:hover{color:#ef4444}
/* Nút Thích (heart) */
.hh3d-cm-like-btn{font-weight:600}
.hh3d-cm-like-btn i{font-size:14px;transition:transform .2s,color .2s}
.hh3d-cm-like-btn:hover:not(.disabled){color:#ff4d6d}
.hh3d-cm-like-btn.liked{color:#ff4d6d}
.hh3d-cm-like-btn.liked i{color:#ff4d6d;animation:none}
.hh3d-cm-like-btn.disabled,.hh3d-cm-like-btn[disabled]{cursor:not-allowed;opacity:.55}
.hh3d-cm-like-btn.pop i{animation:hh3dHeartPop .35s ease}
@keyframes hh3dHeartPop{
0%{transform:scale(1)}
40%{transform:scale(1.5)}
70%{transform:scale(.9)}
100%{transform:scale(1)}
}
.hh3d-cm-like-count{font-variant-numeric:tabular-nums;min-width:8px;text-align:left}
/* Replies */
.hh3d-cm-replies{margin-top:14px;padding-left:14px;border-left:2px solid hsla(0,0%,100%,.06)}
.hh3d-cm-replies .hh3d-cm-item{padding:10px 0;border-bottom:1px solid hsla(0,0%,100%,.04)}
.hh3d-cm-replies .hh3d-cm-item:last-child{border-bottom:0;padding-bottom:0}
.hh3d-cm-replies .hh3d-cm-text{font-size:13px}
@media (max-width:640px){
.hh3d-cm-item{padding:12px 14px;gap:10px}
.hh3d-cm-avatar{width:36px;height:36px;font-size:14px}
.hh3d-cm-form{padding:12px 14px}
.hh3d-cm-author{font-size:13px}
.hh3d-cm-text{font-size:13px}
}
/* ==========================================================
COUPLE FRAME OVERLAY (avatar wrap)
========================================================== */
.hh3d-cm-avatar{position:relative;overflow:visible !important;isolation:isolate}
.hh3d-cm-avatar > img:not(.hh3d-cm-frame),
.hh3d-cm-avatar > span{position:relative;z-index:1;border-radius:50%}
/* Frame auto-fit: dùng background-size:contain để browser tự căn theo aspect ratio thật của ảnh */
.hh3d-cm-frame{
position:absolute;top:50%;left:50%;
width:200%;height:200%;
transform:translate(-50%,-50%);
pointer-events:none;z-index:3;
object-fit:contain;
filter:drop-shadow(0 0 6px rgba(252,211,77,.5));
max-width:none;max-height:none;
}
.chat-avatar{position:relative;overflow:visible !important}
.chat-avatar .chat-couple-frame{
position:absolute;top:50%;left:50%;
width:155%;height:155%;
transform:translate(-50%,-50%);
pointer-events:none;z-index:3;
object-fit:contain;
filter:drop-shadow(0 0 6px rgba(255,105,180,.5));
}
/* ==========================================================
Badge Cảnh Giới — background ảnh gradient
========================================================== */
.hh3d-cult-badge{
display:inline-block;
color:#e8dcf4;
font-size:13px;
font-weight:600;
font-family:'EB Garamond','UVN Sach Vo',Arial,serif;
background:url('../images/cultivation/bg-canh-gioi.webp') center/cover no-repeat,
linear-gradient(135deg,#3a2d4f,#2a1a3a);
padding:3px 10px;
border-radius:5px;
text-shadow:0 1px 2px rgba(0,0,0,.6);
letter-spacing:.3px;
vertical-align:middle;
white-space:nowrap;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 4px rgba(0,0,0,.3);
}
.hh3d-cult-badge-sm{
font-size:11px;padding:2px 8px;
}
/* ==========================================================
Tên author của user cảnh giới TOP — gradient ảnh động
========================================================== */
.hh3d-cm-item.wrap-cult-top .hh3d-cm-author:not([class*="color_"]){
font-family:'MaShanZheng','UVNButLong2','LiuJianMaoCao',cursive,Arial,sans-serif;
font-size:14px;
font-weight:800;
letter-spacing:.3px;
background:url('../images/shop/color-text.gif') center/auto repeat;
-webkit-background-clip:text;
background-clip:text;
color:transparent !important;
-webkit-text-fill-color:transparent;
text-shadow:none !important;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
/* ==========================================================
Comment border theo cảnh giới (cao thì hiện viền VIP)
========================================================== */
.hh3d-cm-item.wrap-cult-top{
position:relative;
padding:10px;
border-radius:6px;
}
/* Viền GIF lặp nguyên kích thước — 4 cạnh đều sáng, không bị kéo dãn */
.hh3d-cm-item.wrap-cult-top:before{
content:"";position:absolute;inset:0;pointer-events:none;
background:url('../images/cultivation/border-vip-1y.gif') 0 0 repeat;
border-radius:6px;
-webkit-mask:
linear-gradient(#000,#000) content-box,
linear-gradient(#000,#000);
mask:
linear-gradient(#000,#000) content-box,
linear-gradient(#000,#000);
-webkit-mask-composite:xor;
mask-composite:exclude;
padding:4px;
}
/* Fallback (Safari cũ không support mask-composite): dùng border-image */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
.hh3d-cm-item.wrap-cult-top{
border:4px solid transparent;
border-image:url('../images/cultivation/border-vip-1y.gif') 30 repeat;
}
.hh3d-cm-item.wrap-cult-top:before{display:none}
}
.hh3d-cm-item.wrap-cult-high{
border:2px solid rgba(168,85,247,.45);
padding:10px;
border-radius:6px;
}
/* Bối cảnh user trang bị làm background của comment */
.hh3d-cm-item.has-cult-bg{
background-size:cover;
background-position:center 50%;
background-repeat:no-repeat;
position:relative;
isolation:isolate;
}
@media (max-width:768px){
.hh3d-cm-item.has-cult-bg{
background-position:center bottom;
}
}
.hh3d-cm-item.has-cult-bg:after{
content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(135deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.45) 100%);
border-radius:inherit;pointer-events:none;
}
/* Đảm bảo nội dung (avatar + body) luôn nằm TRÊN lớp overlay đen */
.hh3d-cm-item.has-cult-bg > .hh3d-cm-avatar,
.hh3d-cm-item.has-cult-bg > .hh3d-cm-body{
position:relative;z-index:1;
}
.hh3d-cm-item.has-cult-bg .hh3d-cm-text,
.hh3d-cm-item.has-cult-bg .hh3d-cm-time,
.hh3d-cm-item.has-cult-bg .hh3d-cm-meta{
color:#fff !important;
text-shadow:0 1px 4px #000,0 0 8px rgba(0,0,0,.9);
}
/* Author KHÔNG có name_style → ép trắng + shadow đậm */
.hh3d-cm-item.has-cult-bg .hh3d-cm-author:not([class*="color_"]){
color:#fff !important;
text-shadow:0 1px 4px #00000000, 0 0 8px rgb(0 0 0 / 2%);
font-weight:700;
}
/* Author CÓ name_style (gif/gradient Thái Ất...) → giữ nguyên gif animation,
chỉ thêm "pill nền đen" phía sau bằng :before để gif sáng nổi rõ trên bối cảnh */
.hh3d-cm-item.has-cult-bg .hh3d-cm-author[class*="color_"]{
position:relative;
display:inline-block;
padding:2px 12px;
border-radius:8px;
isolation:isolate; /* stacking context riêng — pill ở dưới text gradient nhưng trên overlay bối cảnh */
}
.hh3d-cm-item.has-cult-bg .hh3d-cm-author[class*="color_"]::before{
content:"";
position:absolute;
inset:-1px;
z-index:-1;
background:rgba(0,0,0,.78);
border-radius:inherit;
box-shadow:
0 0 0 1px rgba(252,211,77,.4) inset,
0 2px 10px rgba(0,0,0,.7),
0 0 16px rgba(252,211,77,.25);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
/* ==========================================================
Strip vật phẩm đã trang bị — hiển thị trên comment
========================================================== */
.hh3d-cm-equipped-strip{
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
margin:4px 0 8px;padding:0;
background:transparent;border:0;
max-width:100%;
}
.hh3d-cm-eq-item{
width:48px;height:48px;object-fit:contain;flex-shrink:0;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
transition:transform .25s,filter .25s;
cursor:pointer;
}
.hh3d-cm-eq-item:hover{
transform:scale(1.5) translateY(-3px);
filter:drop-shadow(0 0 10px rgba(252,211,77,.8)) drop-shadow(0 6px 10px rgba(0,0,0,.6));
z-index:5;position:relative;
}
@media (max-width:600px){
.hh3d-cm-eq-item{width:38px;height:38px}
.hh3d-cm-equipped-strip{gap:5px}
}