@charset "UTF-8";

@layer ribbon {
/* ==========================================================================
 * 18Cộng Videos v2.19.21 — Featured Ribbon Engine v2
 * One geometry owner for Featured, grid cards, landscape cards and sidebar.
 * ========================================================================== */

/* Media shells own clipping; ribbon itself owns only its shape. */
body.ec18-theme :is(.vtt-card-media,.vtt-sidebar-video__thumb,.ec18-video-list-card__media,.ec18-directory-video-card__media,.ec18-media-safe){isolation:isolate}

body.ec18-theme .ec18-ribbon{
  --ec18-ribbon-font:9px;
  --ec18-ribbon-min-h:24px;
  --ec18-ribbon-pad-x:9px;
  --ec18-ribbon-pad-y:6px;
  --ec18-ribbon-gap:8px;
  --ec18-ribbon-diagonal-width:126px;
  --ec18-ribbon-diagonal-offset:31px;
  --ec18-ribbon-diagonal-top:14px;
  --ec18-ribbon-bookmark-width:48px;
  --ec18-ribbon-vertical-h:62px;
  --ec18-ribbon-triangle-w:76px;
  --ec18-ribbon-triangle-h:62px;
  --ec18-ribbon-burst:64px;
  position:absolute;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:center;
  top:auto;right:auto;bottom:auto;left:auto;
  width:auto;height:auto;
  min-height:var(--ec18-ribbon-min-h);
  max-width:calc(100% - 14px);
  margin:0;
  padding:var(--ec18-ribbon-pad-y) var(--ec18-ribbon-pad-x);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ec18-hot-ribbon-text,#fff) 42%,transparent);
  border-radius:7px;
  background:var(--ec18-hot-ribbon-bg,#ef233c);
  color:var(--ec18-hot-ribbon-text,#fff);
  box-shadow:0 4px 0 color-mix(in srgb,#000 18%,transparent),0 6px 15px rgba(0,0,0,.18);
  font:950 var(--ec18-ribbon-font)/1.05 Quicksand,Inter,sans-serif;
  letter-spacing:.075em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  white-space:nowrap;
  pointer-events:none;
  transform:none;
  clip-path:none;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  box-sizing:border-box;
}
body.ec18-theme .ec18-ribbon::before,body.ec18-theme .ec18-ribbon::after{content:none}
body.ec18-theme .ec18-ribbon__label{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:inherit}

/* Context scale: each poster family gets geometry sized for its real footprint. */
body.ec18-theme .ec18-ribbon--hero{--ec18-ribbon-font:10px;--ec18-ribbon-min-h:27px;--ec18-ribbon-pad-x:11px;--ec18-ribbon-pad-y:7px;--ec18-ribbon-gap:10px;--ec18-ribbon-diagonal-width:150px;--ec18-ribbon-diagonal-offset:37px;--ec18-ribbon-diagonal-top:17px;--ec18-ribbon-bookmark-width:56px;--ec18-ribbon-vertical-h:72px;--ec18-ribbon-triangle-w:88px;--ec18-ribbon-triangle-h:72px;--ec18-ribbon-burst:74px}
body.ec18-theme .ec18-ribbon--card{--ec18-ribbon-font:8.5px;--ec18-ribbon-min-h:23px;--ec18-ribbon-pad-x:8px;--ec18-ribbon-pad-y:5px;--ec18-ribbon-diagonal-width:122px;--ec18-ribbon-diagonal-offset:30px;--ec18-ribbon-diagonal-top:13px;--ec18-ribbon-bookmark-width:46px;--ec18-ribbon-vertical-h:58px;--ec18-ribbon-triangle-w:70px;--ec18-ribbon-triangle-h:57px;--ec18-ribbon-burst:60px}
body.ec18-theme .ec18-ribbon--landscape{--ec18-ribbon-font:8px;--ec18-ribbon-min-h:22px;--ec18-ribbon-pad-x:8px;--ec18-ribbon-pad-y:5px;--ec18-ribbon-diagonal-width:112px;--ec18-ribbon-diagonal-offset:28px;--ec18-ribbon-diagonal-top:12px;--ec18-ribbon-bookmark-width:44px;--ec18-ribbon-vertical-h:54px;--ec18-ribbon-triangle-w:66px;--ec18-ribbon-triangle-h:54px;--ec18-ribbon-burst:56px}
body.ec18-theme .ec18-ribbon--sidebar{--ec18-ribbon-font:6.5px;--ec18-ribbon-min-h:17px;--ec18-ribbon-pad-x:5px;--ec18-ribbon-pad-y:3px;--ec18-ribbon-gap:4px;--ec18-ribbon-diagonal-width:84px;--ec18-ribbon-diagonal-offset:21px;--ec18-ribbon-diagonal-top:9px;--ec18-ribbon-bookmark-width:34px;--ec18-ribbon-vertical-h:43px;--ec18-ribbon-triangle-w:52px;--ec18-ribbon-triangle-h:42px;--ec18-ribbon-burst:44px;letter-spacing:.035em}
body.ec18-theme .ec18-ribbon--micro{--ec18-ribbon-font:6px;--ec18-ribbon-min-h:16px;--ec18-ribbon-pad-x:5px;--ec18-ribbon-pad-y:3px;--ec18-ribbon-gap:4px;--ec18-ribbon-diagonal-width:78px;--ec18-ribbon-diagonal-offset:19px;--ec18-ribbon-diagonal-top:8px;--ec18-ribbon-bookmark-width:32px;--ec18-ribbon-vertical-h:40px;--ec18-ribbon-triangle-w:48px;--ec18-ribbon-triangle-h:40px;--ec18-ribbon-burst:42px;letter-spacing:.025em}
body.ec18-theme .ec18-ribbon--label-short{letter-spacing:.085em}
body.ec18-theme .ec18-ribbon--label-medium{letter-spacing:.055em}
body.ec18-theme .ec18-ribbon--label-long{font-size:calc(var(--ec18-ribbon-font) * .82);letter-spacing:.025em}

/* 01/02 — compact square labels. */
body.ec18-theme.ec18-featured-ribbon--corner-square .ec18-ribbon{top:0;right:0;border-radius:0 0 0 8px}
body.ec18-theme.ec18-featured-ribbon--corner-square-left .ec18-ribbon{top:0;left:0;border-radius:0 0 8px 0}

/* 03/04 — paper-fold comic labels. */
body.ec18-theme.ec18-featured-ribbon--corner-fold .ec18-ribbon{top:0;right:0;padding-left:calc(var(--ec18-ribbon-pad-x) + 9px);border-radius:0 0 0 8px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
body.ec18-theme.ec18-featured-ribbon--corner-fold .ec18-ribbon::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;background:var(--ec18-hot-ribbon-fold);clip-path:polygon(0 0,100% 100%,0 100%)}
body.ec18-theme.ec18-featured-ribbon--corner-fold-left .ec18-ribbon{top:0;left:0;padding-right:calc(var(--ec18-ribbon-pad-x) + 9px);border-radius:0 0 8px 0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
body.ec18-theme.ec18-featured-ribbon--corner-fold-left .ec18-ribbon::before{content:"";position:absolute;top:0;right:0;width:12px;height:12px;background:var(--ec18-hot-ribbon-fold);clip-path:polygon(100% 0,100% 100%,0 100%)}

/* 05/06 — diagonal strips; context variables keep the label inside small media. */
body.ec18-theme.ec18-featured-ribbon--diagonal .ec18-ribbon,body.ec18-theme.ec18-featured-ribbon--diagonal-left .ec18-ribbon{top:var(--ec18-ribbon-diagonal-top);width:min(var(--ec18-ribbon-diagonal-width),calc(100% + var(--ec18-ribbon-diagonal-offset)));max-width:none;min-height:var(--ec18-ribbon-min-h);padding-inline:7px;border-radius:0}
body.ec18-theme.ec18-featured-ribbon--diagonal .ec18-ribbon{right:calc(-1 * var(--ec18-ribbon-diagonal-offset));transform:rotate(45deg)}
body.ec18-theme.ec18-featured-ribbon--diagonal-left .ec18-ribbon{left:calc(-1 * var(--ec18-ribbon-diagonal-offset));transform:rotate(-45deg)}
body.ec18-theme:is(.ec18-featured-ribbon--diagonal,.ec18-featured-ribbon--diagonal-left) .ec18-ribbon--label-long{font-size:calc(var(--ec18-ribbon-font) * .74)}

/* 07/08/09 — pills. */
body.ec18-theme.ec18-featured-ribbon--pill .ec18-ribbon{top:var(--ec18-ribbon-gap);right:var(--ec18-ribbon-gap);border-radius:999px}
body.ec18-theme.ec18-featured-ribbon--pill-left .ec18-ribbon{top:var(--ec18-ribbon-gap);left:var(--ec18-ribbon-gap);border-radius:999px}
body.ec18-theme.ec18-featured-ribbon--pill-center .ec18-ribbon{top:var(--ec18-ribbon-gap);left:50%;max-width:78%;border-radius:999px;transform:translateX(-50%)}

/* 10/11 — slim bars preserve more poster image. */
body.ec18-theme:is(.ec18-featured-ribbon--bar-top,.ec18-featured-ribbon--bar-bottom) .ec18-ribbon{right:0;left:0;width:100%;max-width:none;min-height:calc(var(--ec18-ribbon-min-h) - 2px);padding-block:calc(var(--ec18-ribbon-pad-y) - 1px);border-radius:0;letter-spacing:.055em}
body.ec18-theme.ec18-featured-ribbon--bar-top .ec18-ribbon{top:0;border-width:0 0 1px}
body.ec18-theme.ec18-featured-ribbon--bar-bottom .ec18-ribbon{bottom:0;border-width:1px 0 0}

/* 12/13 — swallow tails with notch on the free edge. */
body.ec18-theme.ec18-featured-ribbon--swallow-right .ec18-ribbon{top:var(--ec18-ribbon-gap);right:0;padding-right:calc(var(--ec18-ribbon-pad-x) + 10px);border-radius:6px 0 0 6px;clip-path:polygon(0 0,100% 0,86% 50%,100% 100%,0 100%)}
body.ec18-theme.ec18-featured-ribbon--swallow-left .ec18-ribbon{top:var(--ec18-ribbon-gap);left:0;padding-left:calc(var(--ec18-ribbon-pad-x) + 10px);border-radius:0 6px 6px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14% 50%)}

/* 14/15 — bookmarks; long labels grow sideways rather than covering the poster. */
body.ec18-theme:is(.ec18-featured-ribbon--bookmark-right,.ec18-featured-ribbon--bookmark-left) .ec18-ribbon{top:0;min-width:var(--ec18-ribbon-bookmark-width);max-width:min(46%,130px);padding-bottom:calc(var(--ec18-ribbon-pad-y) + 6px);border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);white-space:normal}
body.ec18-theme.ec18-featured-ribbon--bookmark-right .ec18-ribbon{right:var(--ec18-ribbon-gap)}
body.ec18-theme.ec18-featured-ribbon--bookmark-left .ec18-ribbon{left:var(--ec18-ribbon-gap)}

/* 16/17 — readable top-to-bottom vertical tabs on both sides. */
body.ec18-theme:is(.ec18-featured-ribbon--vertical-right,.ec18-featured-ribbon--vertical-left) .ec18-ribbon{top:var(--ec18-ribbon-gap);width:26px;max-width:30px;min-height:var(--ec18-ribbon-vertical-h);padding:6px 4px;white-space:normal;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.04em}
body.ec18-theme.ec18-featured-ribbon--vertical-right .ec18-ribbon{right:0;border-radius:7px 0 0 7px}
body.ec18-theme.ec18-featured-ribbon--vertical-left .ec18-ribbon{left:0;border-radius:0 7px 7px 0}
body.ec18-theme:is(.ec18-featured-ribbon--vertical-right,.ec18-featured-ribbon--vertical-left) .ec18-ribbon--label-long{font-size:calc(var(--ec18-ribbon-font) * .74)}

/* 18/19 — corner triangles. */
body.ec18-theme:is(.ec18-featured-ribbon--triangle-right,.ec18-featured-ribbon--triangle-left) .ec18-ribbon{top:0;width:var(--ec18-ribbon-triangle-w);height:var(--ec18-ribbon-triangle-h);max-width:62%;min-height:0;padding:6px;border:0;border-radius:0;white-space:normal;font-size:calc(var(--ec18-ribbon-font) * .82);line-height:1.02;text-shadow:0 1px 2px rgba(0,0,0,.3)}
body.ec18-theme.ec18-featured-ribbon--triangle-right .ec18-ribbon{right:0;align-items:flex-start;justify-content:flex-end;padding-left:32%;padding-bottom:36%;clip-path:polygon(0 0,100% 0,100% 100%)}
body.ec18-theme.ec18-featured-ribbon--triangle-left .ec18-ribbon{left:0;align-items:flex-start;justify-content:flex-start;padding-right:32%;padding-bottom:36%;clip-path:polygon(0 0,100% 0,0 100%)}
body.ec18-theme:is(.ec18-featured-ribbon--triangle-right,.ec18-featured-ribbon--triangle-left) .ec18-ribbon--label-long{font-size:calc(var(--ec18-ribbon-font) * .62)}

/* 20 — comic burst with two-line-safe label. */
body.ec18-theme.ec18-featured-ribbon--comic-burst .ec18-ribbon{top:var(--ec18-ribbon-gap);right:var(--ec18-ribbon-gap);width:var(--ec18-ribbon-burst);height:var(--ec18-ribbon-burst);max-width:42%;min-height:0;padding:9px;border:0;border-radius:0;clip-path:polygon(50% 0,61% 18%,80% 7%,82% 29%,100% 36%,85% 51%,96% 70%,74% 73%,68% 95%,50% 82%,33% 100%,27% 77%,5% 81%,16% 59%,0 46%,21% 35%,14% 14%,39% 20%);white-space:normal;line-height:1.02}
body.ec18-theme.ec18-featured-ribbon--comic-burst .ec18-ribbon__label{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
body.ec18-theme.ec18-featured-ribbon--comic-burst .ec18-ribbon--label-long{font-size:calc(var(--ec18-ribbon-font) * .67)}
body.ec18-theme.ec18-featured-ribbon--hidden .ec18-ribbon{display:none}

/* Collision map -----------------------------------------------------------
 * The top status badge moves to the free corner; bottom bar lifts lower badges.
 */
body.ec18-theme:is(.ec18-featured-ribbon--corner-square,.ec18-featured-ribbon--corner-fold,.ec18-featured-ribbon--diagonal,.ec18-featured-ribbon--pill,.ec18-featured-ribbon--swallow-right,.ec18-featured-ribbon--bookmark-right,.ec18-featured-ribbon--vertical-right,.ec18-featured-ribbon--triangle-right,.ec18-featured-ribbon--comic-burst) .vtt-card-duration{top:6px;right:auto;left:6px}
body.ec18-theme:is(.ec18-featured-ribbon--corner-square-left,.ec18-featured-ribbon--corner-fold-left,.ec18-featured-ribbon--diagonal-left,.ec18-featured-ribbon--pill-left,.ec18-featured-ribbon--swallow-left,.ec18-featured-ribbon--bookmark-left,.ec18-featured-ribbon--vertical-left,.ec18-featured-ribbon--triangle-left) .vtt-card-duration{top:6px;right:6px;left:auto}
body.ec18-theme.ec18-featured-ribbon--pill-center .vtt-card-duration,body.ec18-theme.ec18-featured-ribbon--bar-top .vtt-card-duration{top:auto;right:6px;bottom:6px;left:auto}
body.ec18-theme.ec18-featured-ribbon--bar-bottom :is(.vtt-card-category,.vtt-card-duration){bottom:30px}
body.ec18-theme.ec18-featured-ribbon--bar-bottom :is(.ec18-video-list-card__duration,.ec18-video-list-card__views,.ec18-directory-video-card__duration){bottom:31px}
body.ec18-theme.ec18-featured-ribbon--bar-bottom :is(.vtt-featured-showcase__thumb,.ec18-featured-carousel__media,.ec18-featured-ranking__thumb)>small{bottom:31px}
body.ec18-theme.ec18-featured-ribbon--bar-top .ec18-ribbon--micro,body.ec18-theme.ec18-featured-ribbon--bar-bottom .ec18-ribbon--micro{font-size:5.5px}

/* Preview ribbons must remain over cinematic shade/copy layers. */
body.ec18-theme .vtt-featured-showcase__preview-content{z-index:5}
body.ec18-theme .vtt-featured-showcase__preview .ec18-ribbon,body.ec18-theme [data-ec18-featured-preview] .ec18-ribbon{z-index:18}

/* Mobile density profiles keep Featured posters visible on two-column layouts. */
@media(max-width:640px){
  body.ec18-theme:not(.ec18-ribbon-mobile-desktop) .ec18-ribbon{letter-spacing:.035em;box-shadow:0 2px 0 color-mix(in srgb,#000 15%,transparent),0 4px 10px rgba(0,0,0,.15)}
  body.ec18-theme.ec18-ribbon-mobile-auto .ec18-ribbon--hero{--ec18-ribbon-font:7.8px;--ec18-ribbon-min-h:20px;--ec18-ribbon-pad-x:7px;--ec18-ribbon-pad-y:4px;--ec18-ribbon-gap:6px;--ec18-ribbon-diagonal-width:106px;--ec18-ribbon-diagonal-offset:26px;--ec18-ribbon-diagonal-top:11px;--ec18-ribbon-bookmark-width:42px;--ec18-ribbon-vertical-h:54px;--ec18-ribbon-triangle-w:64px;--ec18-ribbon-triangle-h:52px;--ec18-ribbon-burst:52px}
  body.ec18-theme.ec18-ribbon-mobile-auto .ec18-ribbon--card{--ec18-ribbon-font:6.8px;--ec18-ribbon-min-h:18px;--ec18-ribbon-pad-x:6px;--ec18-ribbon-pad-y:3px;--ec18-ribbon-gap:5px;--ec18-ribbon-diagonal-width:90px;--ec18-ribbon-diagonal-offset:22px;--ec18-ribbon-diagonal-top:9px;--ec18-ribbon-bookmark-width:34px;--ec18-ribbon-vertical-h:44px;--ec18-ribbon-triangle-w:52px;--ec18-ribbon-triangle-h:42px;--ec18-ribbon-burst:44px}
  body.ec18-theme.ec18-ribbon-mobile-auto .ec18-ribbon--landscape{--ec18-ribbon-font:6.6px;--ec18-ribbon-min-h:18px;--ec18-ribbon-diagonal-width:88px;--ec18-ribbon-diagonal-offset:22px;--ec18-ribbon-bookmark-width:34px;--ec18-ribbon-triangle-w:50px;--ec18-ribbon-triangle-h:41px;--ec18-ribbon-burst:42px}
  body.ec18-theme.ec18-ribbon-mobile-small .ec18-ribbon--hero{--ec18-ribbon-font:7px;--ec18-ribbon-min-h:18px;--ec18-ribbon-pad-x:6px;--ec18-ribbon-pad-y:3px;--ec18-ribbon-gap:5px;--ec18-ribbon-diagonal-width:92px;--ec18-ribbon-diagonal-offset:23px;--ec18-ribbon-diagonal-top:9px;--ec18-ribbon-bookmark-width:36px;--ec18-ribbon-vertical-h:46px;--ec18-ribbon-triangle-w:54px;--ec18-ribbon-triangle-h:44px;--ec18-ribbon-burst:46px}
  body.ec18-theme.ec18-ribbon-mobile-small :is(.ec18-ribbon--card,.ec18-ribbon--landscape){--ec18-ribbon-font:6.2px;--ec18-ribbon-min-h:16px;--ec18-ribbon-pad-x:5px;--ec18-ribbon-pad-y:3px;--ec18-ribbon-gap:4px;--ec18-ribbon-diagonal-width:80px;--ec18-ribbon-diagonal-offset:20px;--ec18-ribbon-diagonal-top:8px;--ec18-ribbon-bookmark-width:31px;--ec18-ribbon-vertical-h:40px;--ec18-ribbon-triangle-w:47px;--ec18-ribbon-triangle-h:38px;--ec18-ribbon-burst:40px}
  body.ec18-theme.ec18-ribbon-mobile-tiny .ec18-ribbon--hero{--ec18-ribbon-font:6.4px;--ec18-ribbon-min-h:16px;--ec18-ribbon-pad-x:5px;--ec18-ribbon-pad-y:2px;--ec18-ribbon-gap:4px;--ec18-ribbon-diagonal-width:82px;--ec18-ribbon-diagonal-offset:20px;--ec18-ribbon-diagonal-top:8px;--ec18-ribbon-bookmark-width:32px;--ec18-ribbon-vertical-h:40px;--ec18-ribbon-triangle-w:48px;--ec18-ribbon-triangle-h:39px;--ec18-ribbon-burst:40px}
  body.ec18-theme.ec18-ribbon-mobile-tiny :is(.ec18-ribbon--card,.ec18-ribbon--landscape){--ec18-ribbon-font:5.7px;--ec18-ribbon-min-h:15px;--ec18-ribbon-pad-x:4px;--ec18-ribbon-pad-y:2px;--ec18-ribbon-gap:3px;--ec18-ribbon-diagonal-width:70px;--ec18-ribbon-diagonal-offset:17px;--ec18-ribbon-diagonal-top:7px;--ec18-ribbon-bookmark-width:28px;--ec18-ribbon-vertical-h:36px;--ec18-ribbon-triangle-w:42px;--ec18-ribbon-triangle-h:34px;--ec18-ribbon-burst:36px}
  body.ec18-theme:not(.ec18-ribbon-mobile-desktop):is(.ec18-featured-ribbon--bookmark-right,.ec18-featured-ribbon--bookmark-left) .ec18-ribbon{max-width:min(38%,96px);padding-bottom:calc(var(--ec18-ribbon-pad-y) + 4px)}
  body.ec18-theme:not(.ec18-ribbon-mobile-desktop):is(.ec18-featured-ribbon--bar-top,.ec18-featured-ribbon--bar-bottom) .ec18-ribbon{min-height:16px;padding-block:2px}
  body.ec18-theme:not(.ec18-ribbon-mobile-desktop).ec18-featured-ribbon--comic-burst .ec18-ribbon{padding:6px}
}
@media(max-width:390px){
  body.ec18-theme.ec18-ribbon-mobile-auto .ec18-ribbon--hero{--ec18-ribbon-font:7.2px;--ec18-ribbon-min-h:19px;--ec18-ribbon-diagonal-width:96px;--ec18-ribbon-diagonal-offset:24px;--ec18-ribbon-burst:48px}
  body.ec18-theme.ec18-ribbon-mobile-auto .ec18-ribbon--card{--ec18-ribbon-font:6.3px;--ec18-ribbon-min-h:17px;--ec18-ribbon-diagonal-width:84px;--ec18-ribbon-diagonal-offset:21px;--ec18-ribbon-burst:41px}
}

@media(prefers-reduced-motion:reduce){body.ec18-theme .ec18-ribbon{transition:none}}
}