/* ==========================================================================
   CINEFLEX palette — re-skin cho theme motchill2 (DooPlay 2.5.7)
   --------------------------------------------------------------------------
   File TEST (dev). Chưa phải file permanent.
   Nạp tạm ở inc/doo_scripts.php sau dòng enqueue 'dooplay-responsive' (L178).

   THỨ TỰ CASCADE trong <head>:
     front.style.min.css -> colors.default.min.css -> front.mobile.min.css
     -> test.css (file này)
     -> inline <style> của inc/doo_customizer.php (57 rule sinh từ DB option)
   => Với colors.*.min.css: cùng specificity, đứng sau => thắng, KHÔNG cần !important.
   => Với block inline của customizer: thua thứ tự => PHẢI dùng !important.
      Các selector cần !important được đánh dấu bằng chú thích "vs customizer".
      (KHÔNG viết ký tự đóng comment vào trong khối comment này - sẽ đóng sớm.)

   KHÔNG đổi: header.main{height:70px} (vì #contenedor{margin:70px auto 0} phụ thuộc),
              grid column, width .module, DOM/template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   (a) Biến
   -------------------------------------------------------------------------- */
:root{
  --cf-bg:#08080C;
  --cf-hero:#110C22;
  --cf-accent:#B218FF;
  --cf-accent-deep:#7A0FD6;
  --cf-accent-soft:rgba(178,24,255,.14);
  --cf-accent-line:rgba(178,24,255,.45);
  --cf-neon:#00F076;
  --cf-neon-soft:rgba(0,240,118,.18);
  --cf-text:#FFFFFF;
  --cf-meta:#9CA3AF;
  /* #6B7280 trượt (4.14:1 trên --cf-bg, 3.73:1 trên --cf-surface), #767E8E vẫn trượt
     trên surface (4.42:1). #7A8291 đạt cả hai: 4.90:1 / 4.67:1. */
  --cf-meta-dim:#7A8291;
  --cf-surface:#15161C;
  --cf-surface-2:#1B1D25;
  --cf-glass:rgba(255,255,255,.04);
  --cf-border:#2D3342;
  --cf-border-soft:rgba(255,255,255,.12);
  --cf-gold:#FFD600;
  --cf-radius:10px;
  --cf-radius-sm:6px;
  --cf-shadow:0 12px 30px -12px rgba(0,0,0,.75);
  --cf-t:all .25s cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   (b) Base / body / typography
   Thay: body{background:#fff;color:#222d34}, #dt_contenedor{background-color:#f5f7fa}
   -------------------------------------------------------------------------- */
body{
  background-color:var(--cf-bg)!important;   /* vs customizer */
  color:var(--cf-text)!important;            /* vs customizer */
}
#dt_contenedor{
  background-color:var(--cf-bg)!important;   /* vs customizer */
  color:var(--cf-text);
}
a{color:var(--cf-accent)!important}          /* vs customizer */
a:hover{color:var(--cf-accent)}
h1,h2,h3,h4,h5,h6{color:var(--cf-text)}
p{color:var(--cf-meta)}
::selection{background:var(--cf-accent);color:#fff}
::-moz-selection{background:var(--cf-accent);color:#fff}
input,select,textarea,button{font-family:inherit}
::placeholder{color:var(--cf-meta-dim);opacity:1}
:-ms-input-placeholder{color:var(--cf-meta-dim)}

/* --------------------------------------------------------------------------
   (c) Header + nav
   Thay: header.main{background:#fff}, .head-main-nav ... {color:#222d34},
         ul.sub-menu{background:#f5f7fa}, header.responsive{background:#fff}
   -------------------------------------------------------------------------- */
header.main{
  background:rgba(8,8,12,.82);
  border-bottom:1px solid var(--cf-border-soft);
  box-shadow:0 10px 30px -18px #000;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
header.main .hbox .logo{background:transparent}   /* colors.default: #f5f7fa -> loang trắng trên header tối */
header.main .hbox .logo img{opacity:.95}

/* menu chính */
.head-main-nav ul.main-header li a{color:var(--cf-text);transition:color var(--cf-t)}
.head-main-nav ul.main-header li:hover>a,
.head-main-nav ul.main-header li.current-menu-item>a,
.head-main-nav ul.main-header li.current-menu-parent>a,
.head-main-nav ul.main-header li.current-menu-ancestor>a{
  color:var(--cf-accent)!important;           /* vs customizer */
}
/* gạch chân menu active — dùng :before vì :after đã bị caret \f0dd chiếm */
.head-main-nav ul.main-header li>a{position:relative}
.head-main-nav ul.main-header li>a:before{
  content:"";position:absolute;left:20px;right:20px;bottom:12px;height:2px;
  background:linear-gradient(90deg,var(--cf-accent),var(--cf-neon));
  border-radius:2px;transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.head-main-nav ul.main-header li:hover>a:before,
.head-main-nav ul.main-header li.current-menu-item>a:before,
.head-main-nav ul.main-header li.current-menu-parent>a:before,
.head-main-nav ul.main-header li.current-menu-ancestor>a:before{transform:scaleX(1)}

/* dropdown cấp 2 */
.head-main-nav ul.main-header li ul.sub-menu{
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  box-shadow:var(--cf-shadow);
  overflow:hidden;
}
.head-main-nav ul.main-header li ul.sub-menu li a{color:var(--cf-meta);background:transparent}
.head-main-nav ul.main-header li ul.sub-menu li a:hover{
  color:var(--cf-accent)!important;           /* vs customizer */
  background:var(--cf-accent-soft);
}

/* ô search trên header */
header.main .hbox .search form{
  background:var(--cf-glass);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius-sm);
  transition:var(--cf-t);
}
header.main .hbox .search form:hover{border-color:var(--cf-border-soft)}
header.main .hbox .search form:focus-within{border-color:var(--cf-accent);box-shadow:0 0 0 3px var(--cf-accent-soft)}
header.main .hbox .search form input[type=text]{color:var(--cf-text);background:0 0}
header.main .hbox .search form button[type=submit]{color:var(--cf-meta);transition:var(--cf-t)}
header.main .hbox .search form button[type=submit]:hover{color:var(--cf-accent)!important} /* vs customizer */

/* khu user / login */
.dtuser a.clicklogin{color:var(--cf-text);border-left:solid 2px var(--cf-border)}
.dtuser a.clicklogin:hover{color:var(--cf-accent)!important}                                /* vs customizer */
.dtuser .gravatar{border-left:solid 2px var(--cf-border)}
.headitems a#dooplay_signout:hover{color:var(--cf-accent)!important}                        /* vs customizer */
.dtuser a.clicklogin:hover{color:var(--cf-accent)!important}                                /* vs customizer */

/* live search (dropdown kết quả) */
.live-search ul{background:var(--cf-surface);border:1px solid var(--cf-border);border-radius:var(--cf-radius);overflow:hidden}
.live-search ul li{background:transparent;border-bottom:solid 1px var(--cf-border-soft)}
.live-search ul li:hover{background:var(--cf-accent-soft);opacity:1}
.live-search ul li .title{color:var(--cf-text)}
.live-search ul li .other-name{color:var(--cf-meta)}
.live-search ul li .imdb{color:var(--cf-meta)}
.live-search ul li .imdb span.fas{color:var(--cf-gold)}

/* ---- mobile shell ---- */
header.responsive{background:rgba(8,8,12,.92);border-color:var(--cf-border)}
header.responsive a{color:var(--cf-meta)}
header.responsive .nav a.active:before,
header.responsive .search a.active:before{color:var(--cf-accent)!important}   /* vs customizer */
header.responsive .logo img{opacity:.95}
.menuresp .menu{background:var(--cf-surface);border-radius:0 0 var(--cf-radius) var(--cf-radius);overflow:hidden}
.menuresp .menu .user{background:var(--cf-surface-2);border-bottom:solid 1px var(--cf-border-soft)}
.menuresp .menu .user .logout a{background:var(--cf-border);color:var(--cf-meta)}
.menuresp .menu .user .logout a:hover{background:var(--cf-accent);color:#fff}
.menuresp .menu .user a.ctgs{
  background:linear-gradient(135deg,var(--cf-accent),var(--cf-accent-deep))!important;  /* vs customizer */
  color:#fff;
}
.menuresp .menu ul.resp li{border-bottom:solid 1px var(--cf-border-soft)}
.menuresp .menu ul.resp li a{color:var(--cf-text);background:transparent}
.menuresp .menu ul.resp li a:hover{
  color:var(--cf-accent)!important;           /* vs customizer */
  background:var(--cf-accent-soft);
}
.menuresp .menu ul.resp li ul.sub-menu li a:hover{color:var(--cf-accent)!important}   /* vs customizer */
form.form-resp-ab{background:var(--cf-surface);border-color:var(--cf-border)}
form.form-resp-ab input[type=text]{color:var(--cf-text);background:transparent}
form.form-resp-ab button[type=submit]{color:var(--cf-meta)}
form.form-resp-ab button[type=submit]:hover>span{color:var(--cf-accent)!important}     /* vs customizer */
#arch-menu.menuresp,.fondo_dt{background:rgba(5,5,9,.92)}

/* --------------------------------------------------------------------------
   (d) Hero = Owl slider (.slider / #slider-movies-tvshows / .slider article.item)
   Thay: .slider article.item .image{background-color:#f8f9fb}, .data gradient #000
   -------------------------------------------------------------------------- */
.slider{
  background:linear-gradient(180deg,var(--cf-hero) 0%,rgba(17,12,34,0) 62%),var(--cf-bg);
  border-radius:var(--cf-radius);
}
.slider article.item{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.slider article.item:hover{transform:scale(1.02)}
.slider article.item .image{
  background-color:var(--cf-hero);
  border-radius:var(--cf-radius);
  overflow:hidden;
  box-shadow:var(--cf-shadow);
}
.slider article.item .image .data{
  background-image:linear-gradient(rgba(8,8,12,0),rgba(8,8,12,.88) 55%,var(--cf-bg));
}
.slider article.item .image .data h3.title{color:var(--cf-text)}
.slider article.item .image .data span{color:var(--cf-meta);text-shadow:0 0 10px #000}
.slider article.item .image .data span.item_type{
  background:var(--cf-accent)!important;      /* vs customizer */
  color:#fff;
  border-radius:var(--cf-radius-sm);
}
/* item_b.php không có sẵn .mepo như item.php, badge là con trực tiếp của .image
   (.image đã position:relative) nên phải tự neo góc. .data phủ ở đáy nên đặt trên. */
.slider article.item .image>span.tap-progress{
  position:absolute;
  top:10px;
  left:10px;
  float:none;
  z-index:2;
}
.slider article.item .poster a .see{color:var(--cf-neon)}

/* --------------------------------------------------------------------------
   (e) Card phim — .module .content .items .item (glass + border + neon glow)
   Thay: .poster{background:#eceff5}, .dtinfo{background:#fff;border-color:#eceff5},
         .data h3 a{color:#222d34}, .data span{color:#757a7d}
   -------------------------------------------------------------------------- */
.module .content .items .item .poster{
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.9);
  transition:var(--cf-t);
}
.module .content .items .item .poster img{transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .35s ease}
.module .content .items .item:hover>.poster{
  border-color:var(--cf-neon);
  box-shadow:0 0 0 1px var(--cf-neon),0 16px 38px -18px var(--cf-neon-soft);
  transform:translateY(-4px);
}
.module .content .items .item:focus-within>.poster{
  border-color:var(--cf-neon);
  box-shadow:0 0 0 1px var(--cf-neon);
}
.module .content .items .item .poster .rating{
  background:rgba(8,8,12,.75);
  color:var(--cf-text);
  border-radius:0 0 0 var(--cf-radius-sm);
}
.module .content .items .item .poster .mepo span.quality{border-radius:var(--cf-radius-sm)}
.module .content .items .item .data h3,
.module .content .items .item .data h3 a{color:var(--cf-text)}
.module .content .items .item .data h3 a:hover{color:var(--cf-accent)!important}  /* vs customizer */
.module .content .items .item .data span{color:var(--cf-meta)}

/* khối thông tin hover (chỉ desktop, archive) */
.dtinfo{
  background:var(--cf-surface);
  border-color:var(--cf-border);
  border-radius:var(--cf-radius);
  box-shadow:var(--cf-shadow);
}
/* item.php đổi <h4> (trùng h3 phía trên) sang span.dt-title-mob -> phải tự khai
   lại layout mà front.style.min.css `.dtinfo .title h4` đang giữ, nếu không
   tiêu đề hover mất float/padding/ellipsis. */
.dtinfo .title h4,
.dtinfo .title span.dt-title-mob{
  float:left;width:100%;padding:13px;padding-bottom:10px;padding-right:50px;
  font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.dtinfo .title h4,
.dtinfo .title span.dt-title-mob{color:var(--cf-text)}
.dtinfo .metadata{background:var(--cf-glass);color:var(--cf-meta)}
.dtinfo .metadata span.imdb{background:var(--cf-accent-soft);color:var(--cf-accent)}
.dtinfo .texto{color:var(--cf-meta);border-bottom:1px solid var(--cf-border-soft)}
.dtinfo .genres .mta{border-color:var(--cf-border-soft)}
.dtinfo .genres .mta a{color:var(--cf-meta);border-right:1px solid var(--cf-border)}
.dtinfo .genres .mta a:hover{color:var(--cf-accent)}

/* --------------------------------------------------------------------------
   (f) Module / section headers
   Thay: .module{background:#fff}, .module .content header h2{color:#222d34},
         .module .content .items{border-color:#eceff5}
   -------------------------------------------------------------------------- */
/* Sidebar: colors.default.min.css đặt `.module .sidebar{background:#fff}` cho MỌI
   bề rộng (bản sao trong @768 chỉ là lặp lại) -> counter ở đây, không chỉ trong media query. */
.module .sidebar,
.module .content{background:transparent}
.module .sidebar{border-color:var(--cf-border)}
.module{background:transparent;border-color:var(--cf-border)}
.module .content{background:transparent;border-color:var(--cf-border)}
.module .content.right,.module .content.rigth.csearch{border-right-color:var(--cf-border)}
.module .content.left,.module .content.left.csearch{border-left-color:var(--cf-border)}
.module .content .items{border-color:var(--cf-border-soft)}
.module .content header h1,.module .content header h2{
  color:var(--cf-text);
  border-left:solid 3px var(--cf-accent)!important;   /* vs customizer */
  padding-left:12px;
  letter-spacing:.2px;
}
/* thanh gradient dưới tiêu đề section */
.module .content header h1:after,.module .content header h2:after{
  content:"";display:block;height:2px;width:38px;margin-top:8px;
  background:linear-gradient(90deg,var(--cf-accent),var(--cf-neon));
  border-radius:2px;float:none;
}
.module .content header span{color:var(--cf-meta)}
.module .content header span a.see-all{
  background:var(--cf-accent)!important;      /* vs customizer */
  /* !important bắt buộc: a11y.css nạp SAU có `a{color:var(--cf-accent-text)!important}`
     -> chữ tím #C24DFF trên nền tím #B218FF chỉ đạt 1.30:1 */
  color:#fff!important;
  border-radius:var(--cf-radius-sm);
}
a.see_all,a.mtoc,a.main{color:#fff}           /* nền đặt ở (g) */
.nav_items_module a.btn{color:var(--cf-meta);transition:var(--cf-t)}
.nav_items_module a.btn:hover{color:var(--cf-accent)!important}   /* vs customizer */
h1.heading-archive{color:var(--cf-text)}
h1.heading-archive:after,h1.heading-archive:before{background-color:var(--cf-border)}
.dt-breadcrumb{background:transparent;border-bottom:solid 1px var(--cf-border-soft)}
.dt-breadcrumb,.dt-breadcrumb a{color:var(--cf-meta)}
/* front.style.min.css: .dt-breadcrumb{float:left;width:100%} — giữ cho archive,
   nhưng breadcrumb_top phải là block thường để không đẩy lệch .sheader/.single_tabs
   (cả hai cũng float:left;width:100%, chồng float dễ sinh khoảng trắng dọc). */
.breadcrumb_top{
  float:none!important;
  width:auto!important;
  padding:0 0 10px!important;
  margin-bottom:10px;
}
.dt-breadcrumb.breadcrumb_top{border-bottom:1px solid var(--cf-border-soft)}
/* archive: breadcrumb đứng trên h1.heading-archive, chừa khoảng thở phía trên */
.module .content > .breadcrumb_top{margin-top:14px}
/* colors.default: #d4d9e0 trên nền sáng = 1.42:1; #2D3342 (border) trên nền tối
   = 1.58:1 — cả hai đều trượt. Dùng --cf-meta (7.87:1): mũi tên vẫn lùi sau link
   accent nhưng đủ tương phản để đọc được. */
.dt-breadcrumb ol li span.fas{color:var(--cf-meta)}
.dt-breadcrumb ol li:last-child .dt-breadcrumb-name{color:var(--cf-text)}

/* --- Gợi ý "Tìm Kiếm Phim" (inc/parts/single/episodios.php): khối <p> ngay dưới
   breadcrumb, trên player. Markup cũ dùng class Tailwind m-2 / underline /
   decoration-orange-400 nhưng theme KHÔNG nạp Tailwind nên không class nào có
   tác dụng. Thay bằng .cf-gsearch / .cf-gsearch-link.
   Vì là <p>, a11y.css dòng `p{color:var(--cf-meta)}` áp cho phần chữ thường,
   còn <a> bị a11y.css ép `a{color:var(--cf-accent-text)!important}` (nạp SAU
   test.css) -> muốn đổi màu link phải !important. */
.cf-gsearch{
  margin:14px 0 0;                      /* thay .m-2 (0.5rem đều) -> thoáng hơn */
  font-size:14px;
  line-height:1.5;
  color:var(--cf-meta);
}
.cf-gsearch strong{font-weight:600}
.cf-gsearch .cf-gsearch-link{
  color:var(--cf-accent-text,#C24DFF)!important;   /* vs a11y.css */
  text-decoration:underline;
  /* thay .underline + .decoration-orange-400: gạch chân dày, lệch xuống,
     màu accent để ăn khớp theme thay vì cam của Tailwind */
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--cf-accent);
  transition:var(--cf-t);
  /* WCAG 2.5.5: <a> inline chỉ cao ~21px -> nới vùng chạm dọc mà không đổi
     line-height của khối (padding dọc trên inline không đẩy layout). */
  padding:8px 2px;
}
.cf-gsearch .cf-gsearch-link:hover,
.cf-gsearch .cf-gsearch-link:focus-visible{
  color:var(--cf-text)!important;                  /* vs a11y.css */
  text-decoration-color:var(--cf-text);
}
@media only screen and (max-width:768px), (pointer:coarse){
  /* Cùng lý do như khối vùng chạm ở cuối file: inline target phải >= 44px. */
  .cf-gsearch .cf-gsearch-link{display:inline-block;min-height:48px;line-height:48px;padding:0 2px}
}

/* --------------------------------------------------------------------------
   (g) Buttons + icon play + trailer
   Thay: mọi rule customizer background:maincolor cho a.main/a.see_all/a.mtoc/submit...
   -------------------------------------------------------------------------- */
a.button,a.main,a.see_all,a.mtoc,.search-button,
p.form-submit input[type=submit],
.contact .wrapper fieldset input[type=submit],
.report-video-form fieldset input[type=submit],
form.update_profile fieldset input[type=submit],
.login_box .box input[type="submit"],
#edit_link .box .form_edit fieldset input[type="submit"],
form.form-resp-ab button[type=submit],
.report_modal .box .form form fieldset input[type=submit],
.form_post_lik .control .right input[type=submit],
ul.abc li a.select{
  background:linear-gradient(135deg,var(--cf-accent),var(--cf-accent-deep))!important;  /* vs customizer */
  color:#fff;
  border:0;
  border-radius:var(--cf-radius-sm);
  box-shadow:0 8px 20px -10px rgba(178,24,255,.7);
  transition:var(--cf-t);
}
a.button:hover,a.main:hover,a.see_all:hover,a.mtoc:hover,
p.form-submit input[type=submit]:hover,
form.form-resp-ab button[type=submit]:hover,
.contact .wrapper fieldset input[type=submit]:hover,
.login_box .box input[type="submit"]:hover{
  filter:brightness(1.12);
  box-shadow:0 12px 28px -10px rgba(178,24,255,.85);
  transform:translateY(-1px);
}
/* nút phụ / ghost */
a.link_a,.pagination a,.pagination span{
  background:var(--cf-glass);
  border:1px solid var(--cf-border);
  color:var(--cf-meta);
  border-radius:var(--cf-radius-sm);
  transition:var(--cf-t);
}
a.link_a:hover,.pagination a:hover{
  color:var(--cf-accent)!important;           /* vs customizer */
  border-color:var(--cf-accent);
}
.pagination span{color:var(--cf-meta)}
.pagination span.current{
  background:var(--cf-accent)!important;      /* vs customizer */
  border-color:var(--cf-accent)!important;    /* vs customizer */
  color:#fff!important;
}

/* --- icon play trên poster ---
   .see.playN là SVG có fill:#fff cứng -> không tint được bằng color.
   Thay background-image bằng glyph Font Awesome \f04b (FA Pro 5 đã enqueue). */
.module .content .items .item .poster a .see,
.slider article.item .poster a .see{
  background:none!important;
  background-image:none!important;
  display:flex;align-items:center;justify-content:center;
}
.module .content .items .item .poster a .see:before,
.slider article.item .poster a .see:before{
  content:"\f04b";
  font-family:"Font Awesome 5 Pro";
  font-weight:900;font-style:normal;
  font-size:44px;line-height:1;
  color:var(--cf-neon);
  text-shadow:0 0 26px rgba(0,240,118,.65),0 0 4px rgba(0,0,0,.9);
}

/* --- row TRAILER trong danh sách player --- */
.dooplay_player .options ul li#player-option-trailer{
  border-left:2px solid var(--cf-neon);
  background:var(--cf-neon-soft);
  border-radius:var(--cf-radius-sm);
}
.dooplay_player .options ul li#player-option-trailer i,
.dooplay_player .options ul li#player-option-trailer span.title{color:var(--cf-neon)}
.dooplay_player .options ul li#player-option-trailer:hover span.title{color:var(--cf-neon)!important}

/* --------------------------------------------------------------------------
   (h) Form / bộ lọc / search — glass
   Thay: form.search-form{background:#fff}, .search_page_form form{background:#fdfdfd},
         .requests .discover .fixbox .box{background:#fcfdff;border:2px solid #eceff5}
   -------------------------------------------------------------------------- */
form.search-form,.search_page_form form,
.requests .discover .fixbox .box form,
.contact .wrapper fieldset input[type=text],.contact .wrapper fieldset textarea,
form.update_profile fieldset input[type=text],
form.update_profile fieldset input[type=password],
form.update_profile fieldset select,
form.update_profile fieldset textarea,
.comment-form-comment textarea{
  background:var(--cf-glass);
  border:1px solid var(--cf-border);
  color:var(--cf-text);
  border-radius:var(--cf-radius-sm);
  transition:var(--cf-t);
}
form.search-form input[type=text],.search_page_form form input[type=text]{color:var(--cf-text);background:transparent}
form.search-form button[type=submit] span,.search_page_form form button span{color:var(--cf-meta)}
form.search-form button[type=submit]:hover span,.search_page_form form button:hover>span{color:var(--cf-neon)}
.contact .wrapper fieldset input[type=text]:focus,
.contact .wrapper fieldset textarea:focus,
form.update_profile fieldset input[type=text]:focus,
.comment-form-comment textarea:focus{
  border-color:var(--cf-accent)!important;    /* vs customizer */
  box-shadow:0 0 0 3px var(--cf-accent-soft);
  outline:0;
}
.contact,.contact .wrapper{background:transparent}
.contact .wrapper fieldset label{color:var(--cf-meta)}
/* requests archive */
.requests .discover .fixbox .box,
.requests .content .items .item .box{
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  box-shadow:var(--cf-shadow);
}
.requests nav ul li a{color:var(--cf-meta)}
.requests nav ul li a.active{background:var(--cf-accent);color:#fff;border-radius:var(--cf-radius-sm)}
.requests nav a.add_request{background:var(--cf-accent);border-radius:var(--cf-radius-sm);color:#fff}
.requests .discover .fixbox .box form button.filter span{color:var(--cf-meta);transition:var(--cf-t)}
.requests .discover .fixbox .box form:hover button.filter span{color:var(--cf-accent)}
h1.heading-archive span{color:var(--cf-meta)}
/* widget thể loại / năm / alphabet */
.dt_mainmeta nav.genres ul li,.dt_mainmeta nav.releases ul li{border-bottom:1px solid var(--cf-border-soft)}
.dt_mainmeta nav.genres ul li a{color:var(--cf-meta)}
.dt_mainmeta nav.genres ul li a:hover,
.dt_mainmeta nav.genres ul li.current-cat a:before{color:var(--cf-accent)!important}   /* vs customizer */
.dt_mainmeta nav.releases ul li a{background:var(--cf-glass);color:var(--cf-meta);border-radius:var(--cf-radius-sm)}
.dt_mainmeta nav.releases ul li a:hover{background:var(--cf-accent)!important;color:#fff}  /* vs customizer */
.sidemenu h2,.sidemenu ul.genres li{border-color:var(--cf-border-soft)}
.sidemenu h2{color:var(--cf-text)}
.sidemenu ul.genres li a{color:var(--cf-meta)}
.sidemenu ul.genres li a:hover{color:var(--cf-accent)}
.sidemenu ul.year li a{background:var(--cf-glass);color:var(--cf-meta)}
.sidemenu ul.year li a:hover{background:var(--cf-accent);color:#fff}
ul.abc li a{background:var(--cf-glass);color:var(--cf-meta);border-radius:var(--cf-radius-sm)}
ul.abc li a:hover,ul.abc li a.select{background:var(--cf-accent)!important;color:#fff}  /* vs customizer */
.tagcloud a:hover{background:var(--cf-accent)!important;color:#fff}   /* vs customizer */

/* --------------------------------------------------------------------------
   (i) Player
   Thay: .dooplay_player .options ul li{background:#fff;border-bottom:solid 1px #f8f9fb},
         li i{color:#d4d9e0}, li.on{background:#f8f9fb}
   -------------------------------------------------------------------------- */
.dooplay_player{border-bottom:solid 3px var(--cf-hero)}
.dooplay_player h2{color:var(--cf-text);border-bottom:1px solid var(--cf-border-soft)}
.dooplay_player h2 span{color:var(--cf-meta)}
.dooplay_player h2 span.flashit{color:var(--cf-neon)}
.dooplay_player .options{background:transparent}
.dooplay_player .options ul li{
  background:var(--cf-surface);
  border-bottom:solid 1px var(--cf-border-soft);
  border-radius:var(--cf-radius-sm);
  color:var(--cf-text);
  transition:var(--cf-t);
}
.dooplay_player .options ul li i{color:var(--cf-meta)}
.dooplay_player .options ul li i.yt{color:#ff0033}
.dooplay_player .options ul li span.title{color:var(--cf-text)}
.dooplay_player .options ul li span.server{color:var(--cf-meta)}
.dooplay_player .options ul li:hover{background:var(--cf-accent-soft)}
.dooplay_player .options ul li:hover span.title{color:var(--cf-accent)!important}   /* vs customizer */
.dooplay_player .options ul li.on,
.dooplay_player .options ul li.on:hover{
  background:var(--cf-accent-soft);
  box-shadow:inset 0 0 0 1px var(--cf-accent);
}
.dooplay_player .options ul li.on i{color:var(--cf-accent)}
.dooplay_player .options ul li span.flag img{border:solid 2px var(--cf-border)}
.dooplay_player .play .pframe,.dooplay_player .play .preplayer{background:#000}
.dooplay_player .options ul li span.loader{color:var(--cf-neon)}
.loading{color:var(--cf-accent)!important}    /* vs customizer */

/* --- (i-ter) Server player: gom nhóm ngôn ngữ, hàng ngang dạng chip -------
   Thay: `.dooplay_player .options ul li{float:left;width:100%}` (front.style)
         -> mỗi server 1 hàng dọc full-width.
   Nay: <ul> flex-wrap; mỗi server là 1 chip co theo nội dung; mỗi nhóm có
        <li class="pgroup"> flex-basis:100% đóng vai nhãn + ngắt hàng.
   Khe màu bám data-srv (1..8, chu kỳ theo số thứ tự server) chứ KHÔNG dùng
   nth-child: <li id="player-option-trailer"> chen đầu sẽ làm lệch chỉ số.   */

#playeroptionsul{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  column-gap:8px;row-gap:8px;
  float:none;
}

/* Nhãn nhóm — <li> thật, flex-basis 100% nên luôn chiếm trọn 1 hàng.
   Không mang class .dooplay_player_option nên không dính handler click. */
#playeroptionsul>li.pgroup{
  flex:0 0 100%;width:auto;
  float:none;cursor:default;
  margin:10px 0 0;padding:0;
  background:none;border:0;border-radius:0;
  font-size:11px;font-weight:700;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--cf-meta);
}
#playeroptionsul>li.pgroup:first-child{margin-top:0}

/* Chip server — phá float:left + width:100% của front.style.min.css */
.dooplay_player .options ul li.dooplay_player_option{
  --srv:var(--cf-meta);
  --srv-ink:#101014;
  position:relative;
  float:none;
  width:auto;max-width:100%;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0 8px;
  margin:0;padding:9px 14px;
  background:var(--cf-surface);              /* fallback khi không có color-mix */
  border:1px solid var(--cf-border);
  border-radius:calc(var(--cf-radius-sm) + 4px);
  color:var(--srv);
}
/* Bảng màu 8 khe: cam - trắng - vàng - neon - tím - hồng - xanh dương - ngọc */
#playeroptionsul>li.dooplay_player_option[data-srv="1"]{--srv:#FF7A18}
#playeroptionsul>li.dooplay_player_option[data-srv="2"]{--srv:#FFFFFF}
#playeroptionsul>li.dooplay_player_option[data-srv="3"]{--srv:#FFD600}
#playeroptionsul>li.dooplay_player_option[data-srv="4"]{--srv:#00F076}
#playeroptionsul>li.dooplay_player_option[data-srv="5"]{--srv:#B218FF;--srv-ink:#FFFFFF}
#playeroptionsul>li.dooplay_player_option[data-srv="6"]{--srv:#FF3D8B;--srv-ink:#FFFFFF}
#playeroptionsul>li.dooplay_player_option[data-srv="7"]{--srv:#3D9BFF}
#playeroptionsul>li.dooplay_player_option[data-srv="8"]{--srv:#00D9E0}

/* Nền mờ + viền theo màu khe (đặt SAU fallback để trình duyệt cũ vẫn có nền xám) */
#playeroptionsul>li.dooplay_player_option[data-srv]{
  background:color-mix(in srgb,var(--srv) 12%,transparent);
  border-color:color-mix(in srgb,var(--srv) 55%,transparent);
}
#playeroptionsul>li.dooplay_player_option[data-srv] i,
#playeroptionsul>li.dooplay_player_option[data-srv] span.title{color:var(--srv)}
#playeroptionsul>li.dooplay_player_option span.server{
  margin-left:0;
  color:color-mix(in srgb,var(--srv) 60%,var(--cf-meta));
}
/* Loader: JS click -> .show() (inline display:block), nạp xong -> .hide().
   Ẩn/hiện đã đúng sẵn; nhưng baseline `span.loader` của front.style dùng
   `top:23px;left:-16px` tính cho row cao 50px -> trong chip thấp nó rơi ra
   ngoài chip, nhìn như không có loader. Đặt lại vị trí theo tâm chip.
   Selector có [style] nên chỉ khớp lúc JS đã .show() — không phải !important. */
#playeroptionsul>li.dooplay_player_option span.loader[style]{
  position:static;
  float:none;
  left:auto;top:auto;
  margin:0 0 0 2px;
  display:inline-block;
  align-self:center;
}
/* Hạt loader vẽ bằng `background` (rule gốc: rgba(0,0,0,.2)) — đen mờ 20% trên
   nền chip tối nên vô hình. rule `span.loader{color:...}` ở trên KHÔNG tác dụng
   vì loader không vẽ bằng `color`. Đổi sang màu khe. */
#playeroptionsul>li.dooplay_player_option span.loader,
#playeroptionsul>li.dooplay_player_option span.loader:before,
#playeroptionsul>li.dooplay_player_option span.loader:after{
  background:var(--srv);
}

/* .flag chỉ còn ở row TRAILER (icon youtube); server không còn phát sinh span.flag */
#playeroptionsul>li.dooplay_player_option span.flag{margin-left:auto}

/* Đang chọn: JS toggle class `on` (front.ajax.min.js) — nền đặc màu khe */
#playeroptionsul>li.dooplay_player_option.on,
#playeroptionsul>li.dooplay_player_option.on:hover{
  background:var(--srv)!important;
  color:var(--srv-ink)!important;
}
#playeroptionsul>li.dooplay_player_option.on i,
#playeroptionsul>li.dooplay_player_option.on span.title{color:var(--srv-ink)!important}

/* --- Server ĐANG PHÁT: vòng sáng nhịp + 3 thanh equalizer ---------------
   `.on` do JS đặt khi click (front.ajax.min.js) -> cũng chính là server
   đang phát. Vòng sáng ghi đè `box-shadow` của khối hover ở trên. */
@keyframes cf-now{
  0%,100%{box-shadow:0 0 0 2px var(--srv),0 0 14px -1px var(--srv)}
  50%    {box-shadow:0 0 0 4px color-mix(in srgb,var(--srv) 45%,transparent),0 0 20px 0 var(--srv)}
}
#playeroptionsul>li.dooplay_player_option.on,
#playeroptionsul>li.dooplay_player_option.on:hover{
  animation:cf-now 1.8s ease-in-out infinite;
}

/* 3 thanh equalizer bằng 3 layer gradient, chỉ animate background-size.
   `currentColor` = --srv-ink vì .on đã đặt color -> tương phản trên nền đặc. */
@keyframes cf-eq{
  0%,100%{background-size:3px 35%,3px 100%,3px 55%}
  50%    {background-size:3px 100%,3px 50%,3px 100%}
}
#playeroptionsul>li.dooplay_player_option.on::after{
  content:"";
  align-self:center;
  flex:0 0 auto;
  width:15px;height:12px;
  margin-left:6px;
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor);
  background-position:0 100%,6px 100%,12px 100%;
  background-repeat:no-repeat;
  background-size:3px 35%,3px 100%,3px 55%;
  animation:cf-eq .9s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  #playeroptionsul>li.dooplay_player_option.on,
  #playeroptionsul>li.dooplay_player_option.on:hover{animation:none;box-shadow:0 0 0 2px var(--srv)}
  #playeroptionsul>li.dooplay_player_option.on::after{animation:none}
}

/* tab link (download/torrent/...) */
.linktabs ul li a{color:var(--cf-meta);border-radius:var(--cf-radius-sm) var(--cf-radius-sm) 0 0}
.linktabs ul li a.selected{background:var(--cf-accent)!important;color:#fff}   /* vs customizer */

/* --------------------------------------------------------------------------
   (i-bis) Player — kích thước tường minh + chừa chỗ (CLS)
   Cấu hình đang chạy: playajax=1, fakeplayer=0 -> #dooplay_player_response
   RỖNG lúc first paint và KHÔNG có rule nào trong theme => hộp cao 0px,
   click mới nhảy lên ~473px (đẩy hết nội dung bên dưới).
   56.29% của theme = 16/9 làm tròn -> dùng aspect-ratio, tự đúng mọi bề ngang.
   Ratio đặt trên RESPONSE (con, không padding), KHÔNG trên .play: .isnd{padding:20px}
   + box-sizing:border-box sẽ bóp content box làm méo iframe.
   KHÔNG đụng .pframe/.preplayer gốc (a11y.css:262-267 cấm) - chỉ scope trong response.
   -------------------------------------------------------------------------- */

/* bề ngang tường minh: player luôn lấp đầy cột nội dung */
.dooplay_player{width:100%}
#playcontainer.play{width:100%}

/* hộp chừa chỗ: rỗng vẫn có chiều cao nhờ ratio */
#dooplay_player_response{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0 auto;
  aspect-ratio:16 / 9;
  background:#000;              /* tránh nháy trắng trước khi iframe hiện */
}

/* con do JS bơm vào: lấp đầy hộp chừa chỗ, bỏ padding-hack (chỉ trong response) */
#dooplay_player_response > .preplayer,
#dooplay_player_response > .pframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding-bottom:0;
}
#dooplay_player_response > .pframe > iframe,
#dooplay_player_response > .preplayer > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* nhánh non-ajax (playajax=0): cùng cơ chế, phòng khi option đổi */
#dooplay_player_content > .source-box.on{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
}
#dooplay_player_content > .source-box.on > .pframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding-bottom:0;
}

/* fallback trình duyệt không hỗ trợ aspect-ratio: quay về padding-hack */
@supports not (aspect-ratio:1 / 1){
  #dooplay_player_response{padding-bottom:56.25%;height:0}
  #dooplay_player_content > .source-box.on{padding-bottom:56.25%;height:0}
}

/* --------------------------------------------------------------------------
   (j) Footer
   Thay: footer.main{color:#222d34}, .fcmpbox{background:#fff}, .fmenu borders #eceff5
   -------------------------------------------------------------------------- */
footer.main{background:transparent;color:var(--cf-meta);border-color:var(--cf-border-soft)}
footer.main .fcmpbox{
  background:var(--cf-surface);
  border-top:1px solid var(--cf-border);
  box-shadow:none;
}
footer.main .fcmpbox .primary{border-bottom:solid 1px var(--cf-border)}
footer.main .fcmpbox .primary .columenu .item h3{color:var(--cf-text)}
footer.main .fcmpbox .primary .columenu .item ul li a{color:var(--cf-meta)}
footer.main .fcmpbox .primary .columenu .item ul li a:hover{color:var(--cf-accent)}
footer.main .fcmpbox .primary .fotlogo .text p{color:var(--cf-meta)}
footer.main .fcmpbox .primary .fotlogo .logo img{opacity:.8}
footer.main .fbox .fmenu ul li{border-left:solid 1px var(--cf-border)}
footer.main .fbox .fmenu ul li a{color:var(--cf-meta)}
footer.main .fbox .fmenu ul li a:hover,
footer.main .fbox .fmenu ul li.current-menu-item a{color:var(--cf-accent)!important}   /* vs customizer */
footer.main .copy,footer.main .copy a{color:var(--cf-meta-dim)}
span.top-page a{background:var(--cf-accent);color:#fff;border-radius:var(--cf-radius-sm)}
span.top-page a:hover{background:var(--cf-accent-deep);color:#fff}
#oscuridad{background:rgba(8,8,12,.97)}
#blueimp-gallery{background:rgba(8,8,12,.96)}

/* --------------------------------------------------------------------------
   (k) Sidebar / widget / single
   Thay: .sidebar aside.widget ul li a{color:#72818e}, .w_item_b{background:#f8f9fb},
         .sheader{border-bottom:solid 3px #f5f7fa}, .srating .promedio{background:#f5f7fa}
   -------------------------------------------------------------------------- */
.sidebar aside.widget{background:transparent}
.sidebar aside.widget h2.widget-title{color:var(--cf-text)}
.sidebar aside.widget ul li{border-bottom:solid 1px var(--cf-border-soft)}
.sidebar aside.widget ul li:before{color:var(--cf-accent)}
.sidebar aside.widget ul li a{color:var(--cf-meta)}
.sidebar aside.widget ul li a:hover{color:var(--cf-accent)!important}   /* vs customizer */
.w_item_b{
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  transition:var(--cf-t);
}
.w_item_b:hover{background:var(--cf-accent-soft);border-color:var(--cf-accent)}
.w_item_b .data h3,.w_item_b a:hover>.data h3{color:var(--cf-text)}
.w_item_b .data .wextra{color:var(--cf-meta)}
.w_item_b .data .wextra b{border:solid 1px var(--cf-border)}
.w_item_c{border-color:var(--cf-border-soft)}
.w_item_c .rating{background:var(--cf-glass);color:var(--cf-text)}
.w_item_c .data h3{color:var(--cf-text)}
.w_item_c .data span{color:var(--cf-meta)}
.w_item_c a:hover>.rating i{color:var(--cf-accent)!important}   /* vs customizer */
.top-imdb-list h3{color:var(--cf-text);border-color:var(--cf-accent)!important}   /* vs customizer */
.top-imdb-item{border-bottom:1px solid var(--cf-border-soft)}
.top-imdb-item:hover>.title a{color:var(--cf-accent)!important}                   /* vs customizer */
.top-imdb-item .puesto{background:var(--cf-glass);color:var(--cf-meta);border-radius:var(--cf-radius-sm)}
.ads_demo{background:var(--cf-glass);border:1px solid var(--cf-border)}
/* single */
#single,#single .content,#single .sidebar,#serie_contenido{background:transparent}
.sheader{background:var(--cf-surface);border-bottom:solid 3px var(--cf-accent);border-radius:var(--cf-radius)}
.sheader .data h1{color:var(--cf-text)}
/* --- h2.origtitle = "tên phim gốc" (original_name) đặt ngay dưới h1 ở .sheader .data.
   Trước đây .sheader .data không có h2 nào, nên không có rule nào phủ nó:
   reset của front.style.min.css chỉ đặt h1..h6{font-size:100%}, còn font-weight:bold
   của trình duyệt giữ nguyên -> h2 hiện ra đậm + cỡ bằng chữ thường, lệch hẳn h1.
   Ghim lại thành dòng phụ nhỏ, màu mờ, không đậm. Cỡ dưới h1 (30px) và không phải
   heading nội dung (23px) nên không đụng .wp-content h2. --- */
.sheader .data h2.origtitle{
  font-size:15px;font-weight:400;line-height:20px;
  color:var(--cf-meta);margin:0 0 4px;
}
/* span.origyear = "(năm)" trong h2.origtitle. Mờ hơn tên gốc + không đậm, để tên
   phim vẫn là thứ đọc trước. #7A8291 (--cf-meta-dim) đã tính đạt 4.67:1 trên
   --cf-surface nền của .sheader. */
.sheader .data h2.origtitle span.origyear{
  font-weight:400;
  color:var(--cf-meta-dim);
}
#single .content .srelacionados{background:transparent}
.extra span.tagline,.extra span.date{color:var(--cf-meta)}
.srating{border-top:solid 1px var(--cf-border-soft)}
.srating .promedio{background:var(--cf-glass);color:var(--cf-text)}
.srating .rdata .stars span.rating-stars-a{color:var(--cf-border)}
.srating .rdata .stars span.rating-stars-b{color:var(--cf-gold)}
.starstruck .star-on-png:before{color:var(--cf-gold)}
.se_rating:before{color:var(--cf-gold)}
.single_tabs{border-bottom:solid 3px var(--cf-hero)}
.dt_social_single span{border-right:solid 2px var(--cf-border)}
.dt_social_single b#social_count{color:var(--cf-meta)}
.pag_episodes .item a{color:var(--cf-meta)}
.pag_episodes .item a:hover{color:var(--cf-accent)!important}   /* vs customizer */
/* .se-q (hàng tiêu đề season) đã bỏ khỏi template seasons_episodes.php nên
   các rule .se-q/.se-t/.se-o/.se_rating ở đây không còn ai dùng — đã xoá.
   Lưu ý: doo_customizer.php:69 vẫn phát 1 rule cho '#seasons .se-c .se-q span.se-o'
   từ DB option; rule đó giờ vô hại vì không còn phần tử nào khớp. */
#seasons .se-c .se-a ul.episodios li .episodiotitle a{color:var(--cf-text)}
#seasons .se-c .se-a ul.episodios li .episodiotitle a:hover{color:var(--cf-accent)!important}  /* vs customizer */
ul.smenu{background:transparent}
ul.smenu li a{background:var(--cf-glass);color:var(--cf-meta)}
ul.smenu li a.selected{background:var(--cf-accent)!important;color:#fff}   /* vs customizer */
ul.smenu li a:hover{color:var(--cf-accent)!important}                      /* vs customizer */
.sgeneros a:hover{color:var(--cf-accent)!important}                        /* vs customizer */
.sl-wrapper a:before{color:var(--cf-accent)!important}                     /* vs customizer */

/* --------------------------------------------------------------------------
   (l) Scrollbar / badge / pagination / modal / misc
   -------------------------------------------------------------------------- */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background:var(--cf-accent);opacity:.85}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background:var(--cf-accent);opacity:1}
.mCSB_scrollTools .mCSB_draggerRail{background:rgba(255,255,255,.08)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--cf-bg)}
*::-webkit-scrollbar-thumb{background:var(--cf-accent);border-radius:6px;border:2px solid var(--cf-bg)}
html{scrollbar-color:var(--cf-accent) var(--cf-bg);scrollbar-width:thin}

span.quality{background:var(--cf-accent);color:#fff;border-radius:var(--cf-radius-sm)}   /* was #cd2026 */
.featu{background:var(--cf-neon)!important;color:#0A0A0F}                                /* vs customizer, was #00be08 */
span.item_type{background:var(--cf-accent)!important;color:#fff}                         /* vs customizer */

/* --- Tiến độ tập (badge .tap-progress) ------------------------------------
   Nguồn: meta `episode_current` / `episode_total` do plugin phim-crawler ghi
   (pc_episode_progress()). series.php đẩy thêm biến --tp-pct = phần trăm.
   3 chỗ dùng:
     .sheader .data  (series.php — trang phim bộ, chiếm trọn 1 dòng, xem dưới)
     .mepo           (item.php  — card lưới, cạnh span.quality)
     .image          (item_b.php — card slider hero, tự neo góc, xem mục (d))
   Nền trong + viền neon, KHÔNG tô đặc như span.quality: badge này là thông tin
   phụ (đang tới tập mấy), tô đặc ngang hàng sẽ tranh chấp thị giác với nhãn
   chất lượng vốn là thứ người dùng quét trước. */
span.tap-progress {
    --tp-pct: 0%;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 5px 9px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    color: #00ff39;
    background: rgb(0 0 0 / 64%);
    border: 1px solid rgba(0, 240, 118, .38);
    border-radius: 999px;
    overflow: hidden;
    text-shadow: none;
}
/* chấm thay cho icon: không tốn request, không phụ thuộc font icon */
span.tap-progress:before{
  content:'';
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px var(--cf-neon-soft);
}
/* thanh tiến độ neo đáy; badge "Tập 5 / 6" -> 83% */
span.tap-progress:after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:var(--tp-pct);
  height:2px;
  background:linear-gradient(90deg,var(--cf-accent),var(--cf-neon));
}

/* series.php: badge là con trực tiếp của .sheader .data, ngay dưới h2.origtitle
   và TRƯỚC div.extra (float:left;width:100%). .data không phải flex/grid nên
   không có gì chống float: để inline thì .extra trôi lên nằm ngang hàng badge.
   float+width:100% cho badge một dòng riêng — và nhờ nó rộng, thanh :after đọc
   ra được như thanh tiến độ thật thay vì một vạch trang trí. */
.sheader .data>span.tap-progress{
  float:left;
  margin:0 0 10px;
  padding:6px 12px 7px 11px;
  font-size:13px;
}
/* --- .mepo: khung badge góc trên-trái của card (item.php) -------------------
   front.style.min.css chỉ đặt .mepo{position:absolute;top:5px;left:5px} và cho
   các badge float:left. Thiếu `right` nên khối shrink-to-fit: bề rộng lấy theo
   max-content của float con và có thể PHÌNH QUÁ poster.

   Đo thật ở 1440px (Playwright): card lưới 5 cột rộng ~147px, badge
   "Vietsub + Thuyết minh" đã 143px + padding/viền -> mép phải thò ra 2px, bị
   .poster{overflow:hidden} cắt mất chỏm bo tròn. Nhãn dài hơn nữa thì mất chữ.

   Ép `right:5px` để bề rộng bị chặn theo poster, rồi đổi float -> flex để badge
   tự xuống dòng và co lại. */
.mepo{
  right: 5px;                 /* chan be rong -> wrap + ellipsis moi hoat dong */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  max-height: calc(100% - 10px);
  overflow: hidden;
  pointer-events: none;       /* badge khong chan click vao .see phu ca poster */
}
/* Badge con. BAT BUOC min-width:0 — thiếu nó thì flex item lấy min-content (bề
   rộng của từ dài nhất) và không bao giờ co xuống được. */
.mepo > span{
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nhãn DÀI thì xuống dòng, KHÔNG cắt bằng ellipsis.
   Card lưới 5 cột ở 1200px chỉ rộng ~147px; trừ lề .mepo (5+5) và padding badge
   (10+10+2 viền) còn ~115px cho chữ. "Vietsub + Thuyết minh" cần ~133px ở 12px
   đậm — đo bằng Playwright, scrollWidth 135 > clientWidth 115 nên bị cắt thành
   "Vietsub + Thuyế…". Mất chữ tệ hơn xuống dòng: đây là thông tin người dùng cần
   đọc trọn. Chỉ áp cho .lang/.status (nhãn tự do, hay dài); .quality và
   .tap-progress giữ nowrap để "Tập 16 / 24" không bị bẻ đôi giữa hai con số. */
.lang_tvshows
 {
    position: absolute;
    bottom: 8px;           /* Cách mép dưới 8px */
    left: 8px;            /* Cách mép trái 8px */
    z-index: 5;            /* Luôn nổi lên trên hình ảnh */

    /* CSS hiển thị của bạn */
    padding: 4px 10px 5px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: rgb(8 8 12 / 92%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    text-shadow: none;
}
.mepo > span.lang,
.mepo > span.status{
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
/* .quality nhường chỗ co cho .lang/.status: nhãn ngắn nhưng là thứ người dùng
   quét trước, và front.style.min.css đặt sẵn margin-right:5px — nay đã có gap
   nên phải trả về 0, không thì khe hở thành 10px. */
.mepo > span.quality{flex-shrink:0;margin-right:0}

/* Trả float về none: các quy tắc cũ (front.style.min.css .mepo span.quality,
   và .mepo span.tap-progress trước đây) đều set float:left. Trong flex container
   float bị bỏ qua nhưng margin-right thì vẫn tính, gây khe lệch giữa các badge. */
.mepo span.quality,
.mepo span.tap-progress,
.mepo span.lang,
.mepo span.status{float:none;margin-right:0}

/* Ngôn ngữ (badge .lang) + Trạng thái (badge .status) — item.php.
   Badge nằm ĐÈ LÊN ẢNH POSTER nên nền phải ĐẶC, không được trong suốt: bản trước
   dùng var(--cf-glass) (trắng 4%) + var(--cf-meta) (#9CA3AF) — trên poster sáng
   thì chữ xám chìm hẳn vào ảnh, không đọc được, và màu nền đổi theo từng ảnh nên
   không thể đoán trước tương phản.

   Nay: nền gần đen đặc + chữ trắng. Tương phản CỐ ĐỊNH bất kể poster bên dưới.
   Đo thật: 18.05:1 ở card lưới, 19.1:1 ở slider (ngưỡng chữ thường là 4.5:1).

   KHÔNG đặt white-space ở đây. Quyết định nowrap/wrap nằm ở khối `.mepo > span.lang`
   phía trên vì card lưới cần wrap còn slider cần nowrap — và hai rule cùng
   specificity (0,2,1) thì rule sau thắng, nên nowrap ở đây sẽ vô hiệu hoá wrap. */
.mepo span.lang,
.pbadges span.lang {
    padding: 4px 10px 5px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #fff;
    background: rgb(8 8 12 / 92%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    text-shadow: none;
}

/* Trạng thái phim (badge .status) — item.php/item_b.php, meta `status`, phim LẺ only.
   Cùng khuôn với .lang nhưng nhuộm màu nhấn để phân biệt "đang chiếu / hoàn tất"
   với "ngôn ngữ" khi cả hai đứng cạnh nhau.

   Dùng --cf-accent ĐẶC, không phải --cf-accent-soft (tím 14% — trong suốt, dính
   đúng lỗi tương phản vừa sửa ở .lang).

   Chữ TRẮNG, không phải chữ đen. Đã đo bằng công thức WCAG:
     #fff     trên #B218FF -> 4.70:1  (đạt AA, ngưỡng chữ thường 4.5:1)
     #0A0A0F  trên #B218FF -> 4.20:1  (TRƯỢT)
   Trực giác "nền sáng thì chữ đen" sai ở đây vì #B218FF tuy rực nhưng độ chói
   tương đối chỉ 0.173 — không đủ sáng để gánh chữ đen. */
.mepo span.status,
.pbadges span.status {
    color: #fff;
    background: var(--cf-accent);
    border-color: var(--cf-accent);
}

/* --- Nhóm badge góc phải của hero slider (item_b.php) ----------------------
   .slider article.item .image{position:relative;padding-top:53%} (front.style.min.css)
   nên neo tuyệt đối được. Dùng góc PHẢI vì góc trái đã bị .tap-progress chiếm
   (.slider article.item .image>span.tap-progress{top:10px;left:10px}).
   .mepo không tồn tại trong item_b.php — nhóm này thay nó.
   Max-width + truncate: mỗi owl-item chỉ ~50% khung (2 card/khung), nhãn dài như
   "Vietsub + Thuyết Minh" sẽ tràn khỏi poster nếu để nowrap tự do. */
.slider article.item .image > .pbadges{
  position:absolute;
  top:10px;
  right:10px;
  left:auto;
  z-index:2;
  display:flex;
  flex-direction:row-reverse;   /* badge đầu tiên sát mép phải */
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:5px;
  max-width:calc(100% - 130px); /* chừa chỗ cho .tap-progress ở góc trái */
}
/* Cùng lý do tương phản như .mepo span.lang: badge đè lên ảnh nên nền đặc +
   chữ trắng, không dùng --cf-glass/--cf-meta (trong suốt, đổi màu theo ảnh). */
.pbadges span{
  display:inline-block;
  max-width:100%;
  padding:4px 10px 5px;
  font-size:12px;
  line-height:16px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  background:rgb(8 8 12 / 92%);
  border:1px solid rgb(255 255 255 / 22%);
  border-radius:999px;
  text-shadow:none;
}
.pbadges span.quality{
  color:#fff;
  background:var(--cf-accent);
  border-color:var(--cf-accent);
}
.owl-theme .owl-controls .owl-page span{background:var(--cf-border)}
.owl-theme .owl-controls .owl-page.active span{background:var(--cf-accent)}
.dtloadpage,.dtloadbox{background:rgba(8,8,12,.96)}
.report_modal{background-color:rgba(8,8,12,.92)}
.report_modal .box{background:var(--cf-surface);border:1px solid var(--cf-border);border-radius:var(--cf-radius)}
.report_modal .box .form form fieldset label:hover > span.title{color:var(--cf-accent)!important}  /* vs customizer */
.link_sharing{background:var(--cf-surface);border:1px solid var(--cf-border);border-radius:var(--cf-radius)}
.comment-respond h3:before{color:var(--cf-accent)!important}   /* vs customizer */
.post-comments .comment-reply-link:hover{background:var(--cf-accent)!important;color:#fff}   /* vs customizer */
.user_edit_control ul li a.selected{background:var(--cf-accent)!important}                   /* vs customizer */
.user_edit_control ul li a.selected:before{border-top-color:var(--cf-accent)!important}      /* vs customizer */
.page_user nav.user ul li a:hover{color:var(--cf-accent)!important}                          /* vs customizer */
.page_user nav.user ul li a.selected{background:var(--cf-accent)!important;color:#fff}       /* vs customizer */
.page_user .content .paged a.load_more:hover{background:var(--cf-accent)!important}          /* vs customizer */
table.account_links tbody td a:hover{color:var(--cf-accent)!important}                       /* vs customizer */
header.top_imdb h1.top-imdb-h1 span{color:var(--cf-accent)!important}                        /* vs customizer */
article.post .information .meta span.autor{color:var(--cf-accent)!important}                 /* vs customizer */
span.comment-author-link{color:var(--cf-accent)!important}                                   /* vs customizer */
.user_control a.in-list{color:var(--cf-accent)!important}                                    /* vs customizer */
a.liked{background:var(--cf-accent)!important;color:#fff}                                    /* vs customizer */
footer.main .fbox .fmenu ul li.current-menu-item a{color:var(--cf-accent)!important}         /* vs customizer */
.posts .meta .autor i{color:var(--cf-accent)!important}                                      /* vs customizer */
.calendar_wrap table caption{background:var(--cf-glass)}
.srating .promedio{border-radius:var(--cf-radius-sm)}

/* --------------------------------------------------------------------------
   (n) Trang single (movies / tvshows / episodes) — surface sáng còn sót
   Đo thật trên /movies/mad-max-fury-road/, /tvshows/rick-and-morty/,
   /episodes/breaking-bad-1x1/:
     .sbox h2, .custom_fields b.variante, table th  -> #222d34 / #08080C = 1.42:1
     .add_row                                       -> nền #ECEFF5
     .starstruck-rating-wrap, .dt_rating_vgs        -> nền #F5F7FA;
                                                       .rating-text 2.37:1
     #doopostlinks select|input|textarea            -> nền #FFF, chữ #000
     a#main_ali.selected                            -> #C24DFF / #B218FF = 1.30:1
     a.dt_social                                    -> #C24DFF trên màu brand
   -------------------------------------------------------------------------- */
/* --- heading + text: colors.default đặt .sbox h2 / .data h1 / .custom_fields
   ở specificity 0,1,1+ nên rule `h2{color:var(--cf-text)}` toàn cục thua. --- */
#single h2,#single h3,#single h4,
#single .sbox h2,#single .sbox h3,
h1.epih1,h2.epih3,h3.epih3,.epiheader .epidata h3 a,
#serie_contenido h2,#serie_contenido h3{color:var(--cf-text)!important}
/* --- Tên tập (tiếng Anh) đã đổi từ h3.epih3 sang h2.epih3 để h1/h2 đúng cấp.
   Nhưng nó nằm trong #info.sbox > .wp-content, nên bị `.sbox h1,.sbox h2`
   (18px/500) và `.wp-content h2` (23px) bắt — cả hai specificity 0,1,1 — chữ
   phình lên và sai cỡ so với trước. Ghim lại đúng 18px như h3 cũ.
   Dùng `.epih3` không kèm tag để phòng trường hợp template đổi lại thành h3. --- */
h1.epih1{font-size:30px}
h2.epih3,h3.epih3{font-size:18px;font-weight:400;line-height:1.4}
#info .wp-content h2.epih3{font-size:18px;font-weight:400}
/* colors.default: .epiheader .epidata h3 a,.posts header.pos h1{color:#222d34}
   khai báo riêng nên thắng `h1,h2,h3{color:var(--cf-text)}` toàn cục. */
#single .wp-content h1,#single .wp-content h2,#single .wp-content h3,
#single .wp-content h4,#single .wp-content h5,#single .wp-content h6{color:var(--cf-text)}
#reply-title,.comment-reply-title,#respond h3{color:var(--cf-text)!important}
#single b.variante,#single .variante,#single .custom_fields b{color:var(--cf-meta)}
#single .custom_fields{border-color:var(--cf-border-soft)}
#single span.valor,#single .custom_fields span{color:var(--cf-text)}
/* .custom_fields span.valor strong (0,2,2) trong colors.default đục màu #222d34
   -> badge "7.639" chìm hẳn trên nền tối. */
#single .custom_fields span.valor strong,.custom_fields span.valor strong{color:var(--cf-text);border-color:var(--cf-border)}
#single .custom_fields span.valor strong:before,.custom_fields span.valor strong:before{color:var(--cf-gold)}
/* bảng "Type / URL / Quality / Language / File size" */
#single thead tr th,#single table th{color:var(--cf-meta);background:var(--cf-surface-2)}
#single tbody tr,#single tr.row,#single td{background:transparent;border-color:var(--cf-border-soft)}
#single .sbox,#single .content .sbox{border-color:var(--cf-border-soft)}
#single .single_tabs{border-bottom-color:var(--cf-hero)}
#single .poster,.sheader .poster{background:var(--cf-surface)}
.epiheader{border-bottom-color:var(--cf-border-soft)}

/* --- tab "Info / Cast" đang chọn: bg accent do .selected, nhưng a11y.css nạp
   SAU có `a{color:var(--cf-accent-text)!important}` -> chữ tím trên nền tím.
   Cần specificity CAO HƠN và !important (cả hai đều !important thì bên nào
   specificity cao hơn thắng, không phụ thuộc thứ tự nạp). --- */
#single ul.smenu li a.selected,
#single ul#playeroptionsul li a.selected,
#single a.selected{background:var(--cf-accent)!important;color:#fff!important}
#single ul.smenu li a{background:var(--cf-glass);color:var(--cf-meta)}
#single ul.smenu li a:hover{color:var(--cf-accent)!important}
#single .add_row,.add_row{background:var(--cf-glass);color:var(--cf-accent);border:1px solid var(--cf-border)}
#single .add_row:hover,.add_row:hover{background:var(--cf-accent)!important;color:#fff!important}
#single .remove_row{background:var(--cf-glass);color:var(--cf-meta)}

/* --- form thêm link (#doopostlinks): colors.default để input nền #FFF chữ #000 --- */
#doopostlinks select,#doopostlinks input,#doopostlinks textarea{
  background:var(--cf-glass);color:var(--cf-text);
  border:1px solid var(--cf-border);border-radius:var(--cf-radius-sm);
}
#doopostlinks select:focus,#doopostlinks input:focus,#doopostlinks textarea:focus{
  border-color:var(--cf-accent)!important;box-shadow:0 0 0 3px var(--cf-accent-soft);outline:0;
}
#doopostlinks select option{background:var(--cf-surface);color:var(--cf-text)}

/* --- box rating: colors.default đặt .starstruck-rating-wrap{background:#f5f7fa}
   -> mảng sáng giữa trang tối, và .rating-text #9CA3AF trên #F5F7FA chỉ 2.37:1 --- */
.starstruck-rating-wrap,.starstruck-wrap{background:var(--cf-surface);color:var(--cf-text)}
/* .starstruck-wrap .dt_rating_vgs (0,2,0) trong colors.default thắng .dt_rating_vgs
   (0,1,0) -> phải khai báo đúng độ sâu đó. */
.starstruck-wrap .dt_rating_vgs,.dt_rating_vgs{
  background:var(--cf-surface);color:var(--cf-gold);border:1px solid var(--cf-border);
}
.starstruck-rating-wrap{color:var(--cf-meta)}
.starstruck-rating{color:var(--cf-meta)}
.starstruck-rating i{color:var(--cf-border)}
.rating-text,.starstruck-wrap .rating-text{color:var(--cf-meta)}
.starstruck .star-off-png:before{color:var(--cf-border)}
.srating .rdata .stars span.rating-stars-a{color:var(--cf-border)}
.srating .promedio{background:var(--cf-glass);color:var(--cf-text)}
.sheader .srating,.srating{border-color:var(--cf-border-soft)}

/* --- nút chia sẻ: giữ màu brand (nhận diện) nhưng chữ phải đổi theo nền.
   #fff trên #03A9F4 = 2.63:1, trên #51CE60 = 2.03:1 -> hai nút này cần chữ tối.
   #fff trên #4861A3 = 5.98:1, trên #CA212A = 5.58:1 -> giữ chữ trắng. --- */
a.dt_social,a.dt_social b{color:#fff!important}
a.dt_social.facebook{background:#4861A3}
a.dt_social.twitter{background:#03A9F4;color:#08080C!important}
a.dt_social.twitter b{color:#08080C!important}
a.dt_social.pinterest{background:#CA212A}
a.dt_social.whatsapp{background:#51CE60;color:#08080C!important}
a.dt_social.whatsapp b{color:#08080C!important}
.dt_social_single span,.dt_social_single b#social_count{color:var(--cf-meta)}
.dt_social_single span{border-right-color:var(--cf-border)}

/* --- các box single còn lại --- */
#single .content.right,#single .content.left{border-color:var(--cf-border-soft)}
#serie_contenido,#seasons .se-c .se-a{background:transparent}
#seasons .se-c .se-a ul.episodios li{border-color:var(--cf-border-soft)}
/* --- Danh sách tập: ô số xếp hàng ngang ---
   front.style.min.css cho mỗi li width:100%;float:left (1 tập = 1 hàng dọc) và
   .numerando width:80px;float:left;border-right. Đổi ul sang flex-wrap cho các ô
   chảy ngang, li về width:auto + float:none để không giữ 100%. */
#seasons .se-c .se-a ul.episodios{display:flex;flex-wrap:wrap;gap:8px;padding:12px 10px}
#seasons .se-c .se-a ul.episodios li{width:auto;float:none;padding:0;border-bottom:0}
#seasons .se-c .se-a ul.episodios li.none{width:100%;padding:30px 0}
#seasons .se-c .se-a ul.episodios li .numerando{
  float:none;width:auto;min-width:56px;padding:0;margin:0;border-right:0;
  border:1px solid var(--cf-border);border-radius:var(--cf-radius-sm);
  background:var(--cf-glass);
}
/* padding dọc 13px + line-height 1.2 -> <a> cao ~45px, đạt ngưỡng target 44px
   của WCAG 2.5.5 trên cả desktop và mobile (đo được 50x39 khi để 10px).
   border-radius đặt Ở ĐÂY (rule thường), không đặt trong rule :visited: trình duyệt
   chỉ áp cho :visited nhóm property chống dò lịch sử (color, background-color,
   border-color, outline-color...), border-radius KHÔNG nằm trong nhóm đó nên sẽ bị bỏ.
   5px = 6px của .numerando trừ 1px viền -> khớp khít bên trong. */
#seasons .se-c .se-a ul.episodios li .numerando a{
  display:block;padding:13px 12px;text-align:center;line-height:1.2;
  font-weight:600;color:var(--cf-meta);border-radius:5px;
}
#seasons .se-c .se-a ul.episodios li .numerando a:hover{color:var(--cf-accent)!important}  /* vs customizer */
#seasons .se-c .se-a ul.episodios li .numerando:hover{
  border-color:var(--cf-accent);box-shadow:0 0 0 1px var(--cf-accent-soft);
}
/* Tập đã xem: :visited dựa vào lịch sử trình duyệt theo permalink từng tập.
   Phải !important vì a11y.css (nạp sau) ép a{color:var(--cf-accent-text)!important}.
   #7A8291 trên nền đã pha accent (#21122D) = 4.57:1 -> vẫn đạt WCAG AA (4.5:1).
   Nền chỉ 10% accent: đậm hơn nữa thì tương phản chữ tụt dưới 4.5.
   :visited:hover giữ phản hồi hover cho ô đã xem (nếu không, rule này
   specificity cao hơn rule hover ở trên nên ô đã xem sẽ "chết" khi trỏ vào). */
.numerando.Epraw{border-color: #08080f !important;}
#seasons .se-c .se-a ul.episodios li .numerando.Epraw a:visited{background:rgb(8 8 15);color:#26262c!important;}
#seasons .se-c .se-a ul.episodios li .numerando a:visited,
#seasons .se-c .se-a ul.episodios li .numerando a:visited:hover{
  color:var(--cf-meta-dim,#7A8291)!important;
  background:rgb(27 27 29);
}


#playcontainer.play,.playcontainer{background:#000}
/* colors.default: .pag_episodes .item a{color:#8c969c;background:#fdfdfd}
   -> cả dải PREV/ALL/NEXT là một mảng sáng. a.nonex (nút ALL, disabled) cũng
   dùng chung rule này chứ không có rule riêng, chỉ thêm opacity:.3. */
.pag_episodes{border-bottom-color:var(--cf-border-soft)}
.pag_episodes .item{border-right-color:var(--cf-border-soft)}
#single .pag_episodes .item a,.pag_episodes .item a{color:var(--cf-meta);background:var(--cf-glass)}
#single .pag_episodes .item a:hover,.pag_episodes .item a:hover{color:var(--cf-accent)!important;background:var(--cf-accent-soft)}
.pag_episodes .item a i{color:var(--cf-border)}
/* .nonex là nút disabled -> giữ opacity thấp, nhưng chữ phải theo token. */
#single .pag_episodes .item a.nonex,.pag_episodes .item a.nonex{color:var(--cf-meta-dim);background:var(--cf-glass)}

/* a11y.css nạp sau có `a{color:var(--cf-accent-text)!important}` -> ghi đè
   color:#fff của colors.default. Nền #36438E giữ nguyên; #fff trên nó = 8.94:1. */
a.report-video-error,#single a.report-video-error{background:#36438E;color:#fff!important}

/* --- Widget Tìm kiếm của WP core (block) — theme không style, nên nó giữ
   nền trắng/chữ đen mặc định của trình duyệt giữa trang tối. --- */
.wp-block-search__input{
  background:var(--cf-glass);color:var(--cf-text);
  border:1px solid var(--cf-border);border-radius:var(--cf-radius-sm);
}
.wp-block-search__input::placeholder{color:var(--cf-meta-dim)}
.wp-block-search__input:focus{border-color:var(--cf-accent)!important;box-shadow:0 0 0 3px var(--cf-accent-soft);outline:0}
.wp-block-search__button{
  background:var(--cf-accent)!important;color:#fff;border:0;
  border-radius:var(--cf-radius-sm);transition:var(--cf-t);
}
.wp-block-search__button:hover{background:var(--cf-accent-deep)!important;color:#fff}
/* Skip-link của WP core (chỉ hiện khi focus): nền #f0f0f1 + chữ accent = 3.37:1.
   `!important` bắt buộc vì a11y.css nạp sau có `a{color:...!important}`. */
.screen-reader-text:focus,a.screen-reader-shortcut{
  background:var(--cf-surface)!important;color:var(--cf-accent-text)!important;
}

/* --------------------------------------------------------------------------
   (m) Responsive
   front.mobile.min.css chỉ có layout -> chỉ cần counter 2 rule MÀU nằm trong
   colors.default.min.css (@768 .module .sidebar{background:#fff},
   @600 .fondo_dt{background:#fff}) + chỉnh polish.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:1024px){
  .module .content,.module .sidebar{border-color:var(--cf-border)}
}
@media only screen and (max-width:768px){
  .module .sidebar{background:transparent}                         /* counter colors.default */
  .module,.module .content{background:transparent}
  .menuresp .menu{background:var(--cf-surface)}
}
@media only screen and (max-width:600px){
  .fondo_dt{background:rgba(5,5,9,.92)}                            /* counter colors.default */
}
@media only screen and (max-width:540px){
  .slider{background:var(--cf-bg)}                                 /* bỏ dải gradient hero */
  .slider article.item .image .data{background-image:linear-gradient(rgba(8,8,12,0),var(--cf-bg))}
  ul.smenu{background:transparent}
  ul.smenu li a{background:var(--cf-glass);color:var(--cf-text)}
  ul.smenu li a.active{background:var(--cf-accent);color:#fff}
}
@media only screen and (max-width:480px){
  .module .content .items .item .poster{border-radius:var(--cf-radius-sm)}
  .module .content .items .item .poster a .see:before{font-size:34px}
}
@media only screen and (max-width:320px){
  .module .content .items .item .poster a .see:before{font-size:28px}
}

/* --- Vùng chạm cho trang single: a11y.css (e) chỉ khai báo nav/sidebar/
   pagination/see_all, KHÔNG có breadcrumb, tab Info-Cast, PREV-ALL-NEXT hay
   add_row -> đo trên mobile vẫn 35x20, 118x40. Bổ sung tại đây. --- */
@media only screen and (max-width:768px), (pointer:coarse){
  .dt-breadcrumb a,.dt-breadcrumb span{display:inline-block;min-height:48px;line-height:48px;padding:0 6px}
  #single ul.smenu li a,#single ul.smenu li a.selected{min-height:48px;line-height:48px;padding:0 14px}
  #playeroptionsul li a{min-height:48px;line-height:48px}
  #single .add_row,.add_row{min-height:48px;line-height:48px;padding:0 16px}
  #single .pag_episodes .item a{display:inline-block;min-height:48px;line-height:48px;padding:0 10px}
  #single .dt_social_single a.dt_social{min-height:48px;line-height:48px;padding:0 12px}
}

/* --------------------------------------------------------------------------
   (m-bis) Player sizing — mobile + landscape
   aspect-ratio tự đúng ở mọi bề ngang nên chỉ khai báo ở nơi layout đổi (768:
   .content thành full-width) và 2 mốc nhỏ để siết trần. Các mốc 1130/1024/667/
   600/540/424 không cần rule.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:768px){
  /* .content đã full-width; .isnd padding đã bị front.mobile reset -> ratio chính xác */
  #dooplay_player_response{aspect-ratio:16 / 9}
}
@media only screen and (max-width:480px){
  #dooplay_player_response{aspect-ratio:16 / 9}
}
@media only screen and (max-width:320px){
  #dooplay_player_response{aspect-ratio:16 / 9}
}

/* Điện thoại nằm ngang: giữ 16:9, full-width sẽ cao hơn viewport (844x390 -> 475px).
   Kẹp bằng max-width suy từ vh để GIỮ tỉ lệ, KHÔNG dùng max-height (phá tỉ lệ, méo hình). */
@media only screen and (max-height:520px) and (orientation:landscape){
  #dooplay_player_response{
    max-width:calc((100vh - 90px) * 16 / 9);
    margin-left:auto;
    margin-right:auto;
  }
  .dooplay_player .play.isnd{padding:0}
}