/* Homepage structural port V3 — tuned against user-supplied full-page reference screenshot. */
:root{--color-primary-500:235 160 47}
html,body{background:#020617!important}
.pc-header,.pc-home,.pc-footer{padding-left:1.5rem!important;padding-right:1.5rem!important;max-width:100%!important}
.pc-header{margin-bottom:1rem!important;background:rgba(2,6,23,.94)!important;backdrop-filter:blur(14px);border:0!important}
.pc-header-wrap{width:100%}
.pc-brand{display:inline-flex;align-items:center;color:#fff!important;font-size:21px;font-weight:800;line-height:1;letter-spacing:-.055em;white-space:nowrap}
.pc-brand b{font-size:19px;line-height:1;color:rgb(var(--color-primary-500));margin:0 .04em;font-weight:900}
.pc-desktop-nav a{display:flex;align-items:center;position:relative;padding:.625rem .875rem;color:#cbd5e1!important;font-size:.875rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap;border-radius:.5rem}
.pc-desktop-nav a:hover{color:#f8fafc!important;background:rgba(148,163,184,.08)}
.pc-user-nav{overflow:visible!important}.pc-search-btn{width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;color:#64748b;background:transparent;border:0;padding:0}.pc-search-btn:hover{color:rgb(var(--color-primary-500))}
.pc-auth-text{color:#94a3b8!important;padding:.5rem .25rem}.pc-auth-text:hover{color:#fff!important}
.pc-register{display:inline-flex;align-items:center;gap:.85rem;padding:.875rem 2rem;border-radius:999px;background:rgb(var(--color-primary-500));color:white!important;font-size:.875rem;font-weight:500}.pc-register-mobile{padding:.65rem 1rem}
.pc-avatar{display:block;width:2.5rem;height:2.5rem;overflow:hidden;border-radius:999px;border:1px solid rgb(var(--color-primary-500))}
.pc-home{overflow:hidden!important}.gp-main{padding-bottom:0!important}
.pc-hero{position:relative}.pc-hero-stage{position:relative}.pc-hero-slide{display:none}.pc-hero-slide.active{display:block;animation:pcFade .35s ease}.pc-hero-slide>div{overflow:hidden}.pc-hero-shade:before{content:"";position:absolute;right:0;top:0;bottom:0;width:15%;background:linear-gradient(to left,#020617,transparent)}.pc-hero-shade:after{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;background:linear-gradient(to right,#020617,transparent)}
.pc-hero-copy{padding:0 0 0 0}.pc-hero-copy h2{text-transform:uppercase;letter-spacing:-.045em;line-height:.98;max-width:850px}.pc-hero-copy p{max-width:790px}
.pc-hero-arrows{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:.75rem}.pc-hero-arrows button{width:3rem;height:3rem;border:0;border-radius:999px;background:rgba(100,116,139,.55);backdrop-filter:blur(10px);color:#fff;font-size:1.6rem;line-height:1;display:flex;align-items:center;justify-content:center}.pc-hero-arrows button:hover{background:rgba(148,163,184,.75)}
.pc-hero-dots{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:.85rem}.pc-hero-dots button{height:4px;width:18px;border:0;border-radius:999px;background:#334155;padding:0}.pc-hero-dots button.active{width:34px;background:rgb(var(--color-primary-500))}
.pc-story-row{scrollbar-width:none}.pc-story-row::-webkit-scrollbar{display:none}.pc-story-row>a{flex:0 0 auto}
.pc-category-card{min-height:92px}.pc-cat-back{transform:rotate(-8deg)}.pc-cat-front{transform:rotate(9deg)}.pc-category-card:hover .pc-cat-front{transform:rotate(2deg) translate(-7px,-6px)}
.pc-week-grid{padding-left:1.7rem;padding-right:.2rem}.pc-week-grid>div{min-height:126px}
.pc-movie-card>a{background:#0f172a}.pc-movie-card h3{color:#cbd5e1!important}.pc-movie-card:hover h3{color:#fbbf24!important}.pc-movie-card .relative.flex.w-10{position:relative!important;right:auto!important;top:auto!important}
.pc-rank-carousel{width:100%;overflow:hidden;padding:0 2.5rem}.pc-rank-track{display:flex;gap:24px;transition:transform .45s ease;will-change:transform}.pc-rank-slide{flex:0 0 calc((100% - 120px)/6);min-width:0}.pc-rank-slide>a{background:#0f172a}.pc-carousel-dots{display:flex;justify-content:center;align-items:center;gap:.45rem;margin-top:1.25rem}.pc-carousel-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#475569}.pc-carousel-dots button.active{width:23px;background:rgb(var(--color-primary-500))}
.pc-footer{padding-top:2.5rem!important;padding-bottom:2rem!important;color:#64748b;border:0!important;margin-top:0!important}.pc-footer-brand{font-size:18px}.pc-language{display:inline-flex;align-items:center;gap:.7rem;border-radius:999px;background:#1e293b;color:#cbd5e1;padding:.65rem 1.15rem;font-size:.8rem}.pc-footer-links a{color:#94a3b8!important}.pc-footer-links a:hover{color:#e2e8f0!important;text-decoration:underline!important}
@keyframes pcFade{from{opacity:.25}to{opacity:1}}
@media(min-width:1536px){.pc-header,.pc-home,.pc-footer{padding-left:1.5rem!important;padding-right:1.5rem!important}.pc-brand{font-size:22px}.pc-hero-copy{padding-left:0}.pc-week-grid{padding-left:2.4rem}.pc-movie-card .pt-4{padding-top:1rem}}
@media(max-width:1279px){.pc-rank-slide{flex-basis:calc((100% - 72px)/4)}}
@media(max-width:1023px){.pc-header,.pc-home,.pc-footer{padding-left:1rem!important;padding-right:1rem!important}.pc-hero-slide>div{aspect-ratio:16/10!important}.pc-hero-copy{padding:1.5rem!important;align-items:flex-start!important;text-align:left!important;justify-content:flex-end!important}.pc-hero-copy h2{font-size:2.25rem!important}.pc-hero-copy p{font-size:.82rem!important;line-height:1.65!important}.pc-hero-arrows{display:none}.pc-rank-carousel{padding:0}.pc-rank-slide{flex-basis:calc((100% - 48px)/3)}.pc-week-grid{padding-left:1.75rem}}
@media(max-width:767px){.pc-brand{font-size:20px}.pc-home{padding-left:.875rem!important;padding-right:.875rem!important}.pc-hero-slide>div{aspect-ratio:1/1!important}.pc-hero-copy h2{font-size:1.85rem!important}.pc-hero-copy p{display:none}.pc-hero-copy .mt-8{margin-top:1rem!important}.pc-story-row{gap:1.1rem!important}.pc-week-grid{grid-template-columns:1fr 1fr!important;gap:1rem!important}.pc-week-grid>div{min-height:110px}.pc-rank-slide{flex-basis:calc((100% - 16px)/2);gap:16px}.pc-rank-track{gap:16px}.pc-footer{padding-left:1rem!important;padding-right:1rem!important}}

/* ==========================================================
   HOME V3.1 — image visibility + reference-accurate hero
   ========================================================== */
.pc-home img{
  max-width:100%;
  opacity:1!important;
  visibility:visible!important;
}
.pc-home picture{display:block}

/* The reference hero is a real 2:1 media frame.  Do not rely on utility
   pseudo-elements here: explicit layers prevent the backdrop from being
   accidentally covered by compiled-theme gradients. */
.pc-hero-stage{position:relative}
.pc-hero-slide{background:#020617;border-radius:.5rem;overflow:hidden}
.pc-hero-frame{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  overflow:hidden;
  border-radius:.5rem;
  background:#020617;
  isolation:isolate;
}
.pc-hero-image{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  visibility:visible!important;
}
.pc-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,6,23,.68) 0%,rgba(2,6,23,.46) 24%,rgba(2,6,23,.18) 48%,rgba(2,6,23,.03) 72%,rgba(2,6,23,.24) 100%),
    linear-gradient(180deg,rgba(2,6,23,.28) 0%,rgba(2,6,23,0) 30%,rgba(2,6,23,.12) 65%,rgba(2,6,23,.78) 100%);
}
.pc-hero-copy{
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  z-index:2!important;
  width:100%!important;
  max-width:50rem!important;
  padding:2.75rem 3rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-align:left!important;
  color:#fff;
}
.pc-hero-title{
  width:100%;
  max-width:48rem!important;
  margin:0 0 1.15rem!important;
  text-align:left!important;
  text-transform:uppercase;
  font-size:clamp(2.45rem,3.35vw,3.75rem)!important;
  line-height:1.02!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  background:none!important;
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.pc-hero-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.45rem;
  min-height:2.75rem;
  margin-bottom:1.15rem;
  color:#94a3b8;
  font-size:.875rem;
  text-align:left;
}
.pc-hero-quality{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:.28rem;
  background:rgba(100,116,139,.58);
  backdrop-filter:blur(8px);
  color:#e2e8f0;
  font-size:.69rem;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.015em;
}
.pc-hero-year{font-size:.92rem;font-weight:500;color:#94a3b8}
.pc-hero-description{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-width:48rem!important;
  margin:0!important;
  color:rgba(255,255,255,.68)!important;
  font-size:1rem!important;
  line-height:2!important;
  text-align:left!important;
}
.pc-hero-cta-wrap{margin-top:2rem;text-align:left}
.pc-hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:9.8rem;
  min-height:4rem;
  padding:0 2.25rem;
  border-radius:999px;
  background:rgb(var(--color-primary-500));
  color:#fff;
  font-size:.9rem;
  font-weight:550;
  transition:transform .2s ease,filter .2s ease;
}
.pc-hero-slide:hover .pc-hero-cta{filter:brightness(1.06);transform:translateY(-1px)}

/* Make homepage posters independent from the old lazy-background system. */
.pc-movie-card>a{position:relative!important;overflow:hidden!important}
.pc-movie-card>a>picture{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
}
.pc-movie-card>a>picture>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  z-index:0!important;
}
.pc-story-row img,.pc-category-card img,.pc-week-grid img,.pc-rank-slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  visibility:visible!important;
}

@media(min-width:1024px){
  .pc-hero-copy{padding-left:3rem!important;padding-right:1.5rem!important;align-items:flex-start!important;text-align:left!important;justify-content:center!important}
  .pc-hero-copy *{text-align:left}
}
@media(max-width:1023px){
  .pc-hero-frame{aspect-ratio:16/10}
  .pc-hero-copy{padding:1.6rem!important;justify-content:flex-end!important;align-items:flex-start!important;text-align:left!important;max-width:42rem!important}
  .pc-hero-title{font-size:clamp(2rem,6vw,2.75rem)!important;margin-bottom:.85rem!important}
  .pc-hero-description{font-size:.84rem!important;line-height:1.7!important}
  .pc-hero-cta-wrap{margin-top:1.2rem}
  .pc-hero-cta{min-height:3.25rem;min-width:8.5rem;padding:0 1.6rem}
}
@media(max-width:767px){
  .pc-hero-frame{aspect-ratio:1/1}
  .pc-hero-overlay{background:linear-gradient(180deg,rgba(2,6,23,.16) 0%,rgba(2,6,23,.32) 42%,rgba(2,6,23,.92) 100%)}
  .pc-hero-copy{padding:1.25rem!important}
  .pc-hero-title{font-size:1.8rem!important;line-height:1.05!important;margin-bottom:.75rem!important}
  .pc-hero-meta{gap:.8rem;margin-bottom:.35rem}
  .pc-hero-description{display:none!important}
  .pc-hero-cta-wrap{margin-top:.75rem}
  .pc-hero-cta{min-height:2.9rem;min-width:7.5rem;font-size:.82rem}
}


/* ==========================================================
   HOME V3.2 — Vietnamese diacritics-safe hero title
   The original PhimCity .texture-text utility clips glyph extents with
   overflow:hidden. Vietnamese uppercase marks can extend outside the
   font's nominal line box, so render the dynamic title as normal text.
   ========================================================== */
.pc-hero-title{
  overflow:visible!important;
  clip:auto!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  background-image:none!important;
  -webkit-text-fill-color:#f8fafc!important;
  color:#f8fafc!important;
  line-height:1.12!important;
  padding-top:.12em!important;
  padding-bottom:.08em!important;
  text-rendering:optimizeLegibility;
}
@media(max-width:1023px){
  .pc-hero-title{line-height:1.14!important;padding-top:.12em!important;padding-bottom:.06em!important}
}
@media(max-width:767px){
  .pc-hero-title{line-height:1.16!important;padding-top:.1em!important;padding-bottom:.05em!important}
}

/* ==========================================================
   HOME V3.3 — Vietnamese-safe GhiềnPhim logo typography
   The previous whole-logo negative tracking pulled the diacritic of "ề"
   visually toward the preceding "i". Keep each word independently kerned.
   ========================================================== */
.pc-brand{
  display:inline-flex!important;
  align-items:center!important;
  overflow:visible!important;
  line-height:1.16!important;
  letter-spacing:0!important;
  font-kerning:normal;
  font-feature-settings:"kern" 1;
  text-rendering:geometricPrecision;
}
.pc-brand > span{
  display:inline-block;
  line-height:1.16!important;
  letter-spacing:-.025em!important;
  overflow:visible!important;
}
.pc-brand > span:first-child{
  /* Give Vietnamese stacked marks (ề, ễ, ể...) their own breathing room. */
  padding-top:.06em;
  padding-right:.035em;
}
.pc-brand > b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto;
  line-height:1!important;
  margin:0 .07em!important;
  transform:translateY(.05em);
  letter-spacing:0!important;
}

/* ==========================================================
   HOME V3.4 / Patch 07 — slightly tighter genre-card spacing
   Matches the supplied reference: fixed genre order, left copy,
   saturated colors and the tilted square poster at the right edge.
   Text is positioned absolutely: tighten its inset, not the zero padding.
   Reduce card height by 8px without shrinking text, artwork or grid gaps.
   ========================================================== */
.pc-category-section{overflow:visible}
.pc-category-grid{gap:.5rem!important}
.pc-category-cell{min-width:0}
.pc-category-card{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:104px!important;
  min-height:104px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:8px!important;
  color:#fff!important;
  text-decoration:none!important;
  isolation:isolate;
}
.pc-category-card:hover{color:#fff!important;filter:brightness(1.035)}
.pc-category-copy{
  position:absolute!important;
  z-index:4!important;
  left:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:138px!important;
  min-width:0!important;
  padding:0!important;
  text-align:left!important;
  pointer-events:none;
}
.pc-category-title{
  display:block!important;
  margin:0 0 3px!important;
  padding:0!important;
  color:#fff!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.pc-category-count{
  margin:0!important;
  padding:0!important;
  color:rgba(255,255,255,.62)!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:400!important;
  white-space:normal!important;
}
.pc-category-art{
  position:absolute!important;
  z-index:2!important;
  right:14px!important;
  bottom:-13px!important;
  width:96px!important;
  height:96px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.pc-category-art .pc-cat-back{
  position:absolute!important;
  z-index:0!important;
  left:-31px!important;
  top:13px!important;
  width:96px!important;
  height:96px!important;
  border-radius:8px!important;
  background:rgba(0,0,0,.20)!important;
  transform:rotate(-8deg)!important;
}
.pc-category-art .pc-cat-front{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  width:96px!important;
  height:96px!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.08)!important;
  transform:rotate(9deg)!important;
  transform-origin:center center!important;
  transition:transform .2s ease!important;
}
.pc-category-card:hover .pc-cat-front{transform:rotate(2deg) translate(-7px,-6px)!important}
.pc-category-art .pc-cat-front img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:8px!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(min-width:1536px){
  .pc-category-card{height:108px!important;min-height:108px!important}
  .pc-category-copy{left:20px!important;width:145px!important}
  .pc-category-title{font-size:18px!important}
  .pc-category-count{font-size:13px!important}
  .pc-category-art{right:15px!important;width:100px!important;height:100px!important;bottom:-14px!important}
  .pc-category-art .pc-cat-back,.pc-category-art .pc-cat-front{width:100px!important;height:100px!important}
}
@media(max-width:1279px){
  .pc-category-grid{display:flex!important;overflow-x:auto!important;scrollbar-width:none;padding-bottom:2px}
  .pc-category-grid::-webkit-scrollbar{display:none}
  .pc-category-cell{flex:0 0 300px!important}
}
@media(max-width:767px){
  .pc-category-cell{flex-basis:270px!important}
  .pc-category-card{height:96px!important;min-height:96px!important}
  .pc-category-copy{left:16px!important;width:128px!important}
  .pc-category-title{font-size:17px!important}
  .pc-category-count{font-size:12px!important}
  .pc-category-art{right:12px!important;width:90px!important;height:90px!important;bottom:-12px!important}
  .pc-category-art .pc-cat-back,.pc-category-art .pc-cat-front{width:90px!important;height:90px!important}
}


/* =========================================================
   HOME V3.5 — Top-country carousel hover-play placement
   Match the PhimCity reference: the play control sits in the
   upper-middle poster area instead of crowding the movie title.
   ========================================================= */
.pc-rank-slide>a{position:relative!important}
.pc-rank-play{
  position:absolute!important;
  left:50%!important;
  top:40%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
}
.pc-rank-slide>a:hover .pc-rank-play,
.pc-rank-slide>a:focus-visible .pc-rank-play{opacity:1!important}
@media(max-width:767px){
  .pc-rank-play{top:42%!important}
  .pc-rank-play>div{width:3.5rem!important;height:3.5rem!important}
  .pc-rank-play svg{width:1.75rem!important;height:1.75rem!important}
}

/* Patch 10: keep the slim SVG chevrons and vertically stack them at banner center.
   Remove mouse-click outline/shadow only here; keyboard focus remains clearly visible. */
.pc-home .pc-hero-arrows{top:50%;bottom:auto;right:24px;transform:translateY(-50%);gap:16px}
.pc-home .pc-hero-arrows button{width:56px;height:56px;min-width:56px;padding:0;border:0!important;border-radius:50%;background:rgba(107,114,128,.8);color:#fff;box-shadow:none!important;outline:0;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.pc-home .pc-hero-arrows button svg{width:22px;height:22px;display:block;pointer-events:none;stroke-linecap:round;stroke-linejoin:round}
.pc-home .pc-hero-arrows button:hover{background:rgba(148,163,184,.85)}
.pc-home .pc-hero-arrows button:focus,.pc-home .pc-hero-arrows button:active{border:0!important;box-shadow:none!important;outline:0}
.pc-home .pc-hero-arrows button:focus-visible{outline:2px solid #fbbf24;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.pc-home .pc-hero-arrows button{transition:none}}


/* Patch 07: fill the header's content width; cap height, never desktop width.
   Keep the existing responsive aspect ratios until the frame reaches 640px.
   A wider desktop then adds horizontal space without making the banner taller.
   The image still uses object-fit:cover, independent of its intrinsic size. */
.pc-home .pc-hero{
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
.pc-home .pc-hero-frame{
  height:auto;
  min-height:0;
  max-height:640px;
}
/* The existing mobile home gutter is 14px, while the header gutter is 16px.
   Align only the banner; leave all other homepage sections unchanged. */
@media(max-width:767px){
  .pc-home .pc-hero{width:calc(100% - 4px)}
}

/* Patch 10: a little more breathing room below story circles; cards unchanged. */
.pc-story-row .pc-story-caption{padding:16px 0 6px!important}
.pc-story-row .pc-story-caption h3{margin:0;line-height:1.45}
@media(max-width:640px){.pc-story-row .pc-story-caption{padding:14px 0 4px!important}}