html {
  scroll-behavior: smooth;
}

/* ==== Global Color System Overrides ==== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bg:#0a0b1a;            /* nền đen xanh đậm */
  --fg:#e9ecff;            /* chữ sáng */
  --accent:#ffd24a;        /* vàng sao */
  --accent-2:#7aa7ff;      /* xanh nhạt highlight */
  --muted:#9aa3c7;         /* xám nhạt */

  /* Bootstrap override */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-heading-color: var(--fg);
  --bs-link-color: #cfd6ff;
  --bs-link-hover-color: #ffffff;
}

.header-home{
	display:none!important;
}

/* ==== Force dark background on all wrappers ==== */
html, body,
#page, .site, .site-content,
#content, .content-area,
main.starry {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* ==== Starry backdrop ==== */
.starry { position:relative; isolation:isolate; overflow:hidden; }
.starry::before,.starry::after {
  content:""; position:absolute; inset:-10% -10%; z-index:-1; opacity:.25;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent 60%),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 40%, #fff, transparent 60%),
    radial-gradient(1px 1px at 90% 10%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 60%, #fff, transparent 60%);
}
.starry::after { filter:blur(.5px); opacity:.18; }

/* ==== Sections ==== */
.section { padding:6rem 0; position:relative; }
.section .headline { letter-spacing:.06em; }
.section .headline span { color:var(--accent); margin:0 .25rem }
.hr-star-img {
  display: block;
  margin: 0.5rem auto 1.5rem; /* căn giữa + khoảng cách trên dưới */
  max-width: 300px;           /* chỉnh độ dài line, hoặc để 100% nếu muốn full */
  height: auto;
}

.headline {
  position: relative;
  display: inline-block;
  z-index: 1; /* tạo stacking context cho chữ */
}

.headline::after {
  content: "";
  position: absolute;
  left: 80%;
  transform: translateX(-50%);
  bottom: 15px;          /* chỉnh để line không cắt tagline */
  display: block;
  width: 520px;
  height: 20px;
  background: url('../hr-star.png') no-repeat center;
  background-size: contain;
  z-index: -1;             /* QUAN TRỌNG: đưa line xuống hẳn dưới chữ */
}

.tmV{
   max-width: 520px;
}

/* ==== Navbar ==== */
.vnav { position:sticky; top:0; z-index:1000;
  background:rgba(10,11,26,.72); backdrop-filter:saturate(140%) blur(6px); }
.vnav a { color:#cfd6ff; text-decoration:none;
  padding:.75rem 1rem; display:inline-block; border-bottom:2px solid transparent; }
.vnav a:hover { color:#fff; border-color:var(--accent); }

/* ==== Hero ==== */
.hero { padding-top:0rem; }
.hero .logo {
  max-width:520px; height:auto; display:block; margin:0 auto 1rem;
  position:relative; z-index:1;
}
.hero .avatar { max-height:1200px; width:auto;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.tagline { font-size:1.15rem; color:var(--muted) }
.hero h1, .hero p, .hero .btn { position:relative; z-index:2; }

@media (max-width: 991.98px) {
  .hero .avatar { max-height:420px }
}

/* ==== Cards ==== */
.v-card {
  background:linear-gradient(180deg, rgba(122,167,255,.08), rgba(255,210,74,.05));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.v-card:hover { transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.32); }
.v-card img { width:100%; height:auto; display:block; }
.v-card .body { padding:1rem 1.25rem }
.v-card .body .title{ color:#007aff; }
.v-card .meta { color:var(--muted); font-size:.9rem }
.v-card .pill {
    border: 2px solid yellow;
    border-radius: 20px;
    padding: 5px;
    font-size: 12px;
    width: 50px;
    text-align: center;
    color: #aaaaaa;
    margin-right: 10px;
}

/* Card tổng thể */
.v-card.scard {
  background: #fff;                /* nền sáng */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.v-card.scard:hover {
  transform: translateY(-3px);
}

/* ==== Pill Category ==== */
.v-card .pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #c9a51c;               /* chữ vàng */
  border: 1px solid #c9a51c;    /* viền vàng */
  border-radius: 999px;         /* hình viên thuốc */
  padding: 2px 8px;
  margin-right: 6px;
  background-color: transparent;
  white-space: nowrap;
}

/* ==== Title ==== */
.v-card .body h3 {
  font-size: 0.95rem;           /* nhỏ gọn */
  font-weight: 600;
  color: #001F8D;               /* xanh đậm */
  text-align: center;
  margin: 8px 0 4px;
  line-height: 1.4;
}

/* ==== Ngày ==== */
.v-card .body .meta {
  font-size: 0.75rem;
  color: #666;                  /* xám nhạt */
  text-align: right;
  margin: 4px 0;
}

/* ===== FIX hover post nhảy loạn ===== */

/* 1) Cha của stretched-link PHẢI có position:relative để overlay không tràn ô khác */
.v-card{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* 2) Để overlay chỉ phủ trong card (Bootstrap dùng ::after của link) */
.v-card .stretched-link{ position: static; }     /* để ::after bám theo card */
.v-card .stretched-link::after{ position: absolute; inset: 0; }

/* 3) Tránh overlay của card này đè card khác */
.row.g-4 > [class*="col"]{ position: relative; z-index: 0; }
.v-card .stretched-link{ z-index: 1; }

/* 4) Ổn định kích thước ảnh để hover không làm reflow */
.v-card img,
.v-card img.wp-post-image{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;     /* nếu thumbnail không đúng 16:9, vẫn khóa khung */
  object-fit: cover;
}

/* 5) Nếu vẫn thấy “giật” khi hover, bỏ nâng card (tùy chọn) */
/* .v-card, .v-card:hover{ transform: none; } */

/* 6) Giữ màu chữ khi link nằm trong card */
.v-card a{ color: inherit; text-decoration: none; }
.v-card a:hover{ color: inherit; }

/* ==== Data list ==== */
.data-list { list-style:none; padding:0; margin:0 auto; max-width:520px }
.data-list li {
  display:flex; justify-content:space-between;
  border-bottom:1px dashed rgba(255,255,255,.1); padding:.75rem 0;
}
.data-list strong { color:#fff }

/* ==== Contact links ==== */
.contact-links a {
  display:inline-flex; align-items:center; gap:.5rem;
  margin:.25rem .5rem; padding:.5rem .75rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px; color:#eaf0ff; text-decoration:none;
}
.contact-links a:hover {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,210,74,.18);
}

/* Đặt ảnh cung trăng ở phía phải, sau nội dung */
.hero { position: relative; }
.hero .container { position: relative; z-index: 1; }

.hero-arc{
  position: absolute;
  right: clamp(-40px, -6vw, -10px);
  top: 500px;              /* đưa lên cao, tránh tạo khoảng trống */
  width: clamp(180px, 28vw, 360px);
  height: auto;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* Bảo đảm chữ/ảnh nhân vật nổi trên */
.hero h1, .hero p, .hero .btn { position: relative; z-index: 2; }
.hero .avatar { position: relative; z-index: 1; }

/* ==== Typography inside main ==== */
main.starry p, main.starry li, main.starry small { color:#cfd6ff; }
main.starry h1, main.starry h2, main.starry h3,
main.starry h4, main.starry h5, main.starry h6,
main.starry .headline { color:var(--fg); }

/* ==== Links and Buttons ==== */
main.starry a { color: var(--bs-link-color); text-decoration:none; }
main.starry a:hover { color: var(--bs-link-hover-color); }

main.starry .btn.btn-outline-light {
  --bs-btn-color:#e9ecff;
  --bs-btn-border-color:rgba(233,236,255,.6);
  --bs-btn-hover-bg:#e9ecff;
  --bs-btn-hover-color:#0a0b1a;
  --bs-btn-hover-border-color:#e9ecff;
}

/* ==== Remove unwanted white background in containers ==== */
.container, .content, .wrap {
  background:transparent !important;
}

/* ==== Nav Bar ==== */
.custom-nav {
  position: relative;
  background: #0a0b1a;
}

/* menu canh phải, chừa khoảng cho circle */
.custom-nav nav {
  display: flex;
  justify-content: flex-end;
  gap: 3rem;
  padding: 2rem 0 1.25rem;
  position: relative;
  z-index: 2;          /* chữ/menu nổi trên ảnh */
}

.custom-nav a {
  color: #e9ecff;
  text-decoration: none;
  font-weight: 600;
  transition: color .25s;
}
.custom-nav a:hover { color: #ffd24a; }

/* line ảnh */
.nav-line {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    height: 140px;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

/* circle ảnh */
.nav-circle {
  position: absolute;
  top: 6px;             /* chỉnh theo mắt nhìn */
  right: 520px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Tiêu đề chính */
.hero .headline {
  font-size: clamp(2.5rem, 5vw, 4rem); /* responsive: nhỏ trên mobile, to trên desktop */
  font-weight: 700;
  line-height: 1.2;
}

/* Subtitle (SORA UNIVERSE nhỏ dưới) */
.hero .headline small {
  display: block;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 500;
  margin-top: 0.3rem;
}

/* Tagline (câu tiếng Nhật) */
.hero .tagline {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  margin-top: 1.2rem;
}

/* Scroll link*/
.avatar-circle-link {
  position: absolute;
    top: 150px;
    right: 50px;
    display: inline-block;
    z-index: 2;
}

.avatar-circle {
  width: 100px;
    height: auto;
    transition: transform .3s;
    cursor: pointer;
}

.avatar-circle-link:hover .avatar-circle {
  transform: scale(1.1);
}

.pill{
  display:inline-block;
  padding: .2rem .55rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size:.85rem;
  color:#e9ecff;
}

/* Khối nền gradient + họa tiết vòng cung cho section VIDEO */
.video-bg{
  position: relative;
  border-radius: 24px;         /* bo góc giống ảnh mẫu */
  padding: 2.25rem 2rem;       /* tạo khoảng cách với mép khối */
  overflow: hidden;            /* ẩn nền thừa */
  isolation: isolate;          /* tách layer cho overlay */
}

/* Layer ảnh nền */
.video-bg::before{
  content:"";
  position:absolute; inset:0;
  background: url('../img/bg.png') center/cover no-repeat;
  z-index:-2;                  /* dưới mọi nội dung */
}

/* Lớp chuyển sắc nhẹ để hợp với theme tối (tùy chọn) */
.video-bg::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 100% at 0% 0%,
               rgba(255,255,255,.06) 0%,
               rgba(10,11,26,.0) 40%),
              linear-gradient(180deg,
               rgba(0,0,0,.15), rgba(0,0,0,.25));
  mix-blend-mode: normal;
  z-index:-1;
  pointer-events:none;
}

/* Chữ bên trong giữ màu sáng để dễ đọc trên nền mới */
.video-bg, .video-bg p, .video-bg .meta {
  color: #e9ecff;
}
.video-bg .headline { color:#e9ecff; }

/* Khung màu tím */
.video-bg{
  position: relative;
  border-radius: 24px;
  padding: 3.5rem 2rem 2rem;     /* chừa khoảng cho title nổi lên */
  overflow: visible;             /* để sao/tiêu đề tràn ra ngoài */
  isolation: isolate;
}
.video-bg::before{
  content:"";
  position:absolute; inset:0;
  background: url('../img/bg.png') center/cover no-repeat;
  z-index:-1; pointer-events:none;
}

/* Header của section */
.video-head{ position:relative; text-align:center; }

.main-title-jap-video-2{
	color: #F0F0FF;
    -webkit-text-stroke-color: #141138;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	display:block;
	width:fit-content;
	margin:auto;
}

.main-title-jap-video-2:before{
	content:"";
	background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/左の星_PC.png");
	background-repeat:no-repeat;
	background-size:106px;
	width:106px;
	height:129px;
	position: absolute;
    left: calc(50% - 450px);
}

.main-title-jap-video-2:after{
	content:"";
	background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/右の星_PC.png");
	background-repeat: no-repeat;
    background-size: 55px;
    width: 55px;
    height: 65px;
    position: absolute;
    right: calc(50% - 400px);
    top: 4%;
}

/* Bảo đảm phần tử làm mốc cho ::before/::after */
.main-title-jap-video-2 {
  position: relative;                 /* cần cho sao tuyệt đối bám theo */
  -webkit-text-stroke-width: 2px;     /* tùy, cho chữ rõ hơn trên nền đậm */
}

/* ===== Tablet (≤ 1024px) ===== */
@media (max-width: 1024px) {
  .main-title-jap-video-2{
    font-size: 64px;                   /* từ 96px xuống 64px */
    -webkit-text-stroke-width: 1.5px;
  }
  .main-title-jap-video-2:before{
    background-size: 80px;
    width: 80px; height: 98px;
    left: calc(50% - 320px);           /* kéo gần tâm hơn */
    top: -6px;
  }
  .main-title-jap-video-2:after{
    background-size: 42px;
    width: 42px; height: 50px;
    right: calc(50% - 290px);
    top: 2%;
  }
}

/* ===== Mobile (≤ 768px) ===== */
@media (max-width: 768px) {
  .main-title-jap-video-2{
    font-size: 40px;                   /* gọn cho màn 360–428px */
    -webkit-text-stroke-width: 1.2px;
    margin-inline: auto;               /* vẫn căn giữa */
  }
  .main-title-jap-video-2:before{
    background-size: 56px;
    width: 56px; height: 72px;
    left: calc(50% - 200px);
    top: -8px;
  }
  .main-title-jap-video-2:after{
    background-size: 32px;
    width: 32px; height: 38px;
    right: calc(50% - 180px);
    top: 0;
  }
}

/* ===== Small mobile (≤ 390px) — rất nhỏ ===== */
@media (max-width: 390px) {
  .main-title-jap-video-2{
    font-size: 34px;
    -webkit-text-stroke-width: 1px;
  }
  .main-title-jap-video-2:before{
    background-size: 48px;
    width: 48px; height: 62px;
    left: calc(50% - 160px);
  }
  .main-title-jap-video-2:after{
    background-size: 28px;
    width: 28px; height: 34px;
    right: calc(50% - 150px);
  }
}

.main-title-jap-music-2{
	color: #F0F0FF;
    -webkit-text-stroke-color: #141138;
	font-family: Inter;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	display:block;
	width:fit-content;
	margin:auto;
}

.main-title-jap-music-2:before{
	content:"";
	background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/左の星_PC.png");
	background-repeat:no-repeat;
	background-size:106px;
	width:106px;
	height:129px;
	position: absolute;
    left: calc(50% - 200px);
}

.main-title-jap-music-2:after{
	content:"";
	background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/右の星_PC.png");
	background-repeat: no-repeat;
    background-size: 55px;
    width: 55px;
    height: 65px;
    position: absolute;
    right: calc(50% - 150px);
    top: 4%;
}

.main-title-jap-music-2 {
  color: #F0F0FF;
  -webkit-text-stroke-color: #141138;
  font-family: Inter;
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: block;
  width: fit-content;
  margin: auto;
  position: relative; /* để ::before/::after bám theo */
  -webkit-text-stroke-width: 2px;
}

.main-title-jap-music-2:before {
  content:"";
  background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/左の星_PC.png") no-repeat;
  background-size:106px;
  width:106px;
  height:129px;
  position: absolute;
  left: calc(50% - 200px);
}

.main-title-jap-music-2:after {
  content:"";
  background:url("https://www.sora-universe.com/wp-content/uploads/2024/05/右の星_PC.png") no-repeat;
  background-size: 55px;
  width: 55px;
  height: 65px;
  position: absolute;
  right: calc(50% - 150px);
  top: 4%;
}

/* ===== Tablet (≤1024px) ===== */
@media (max-width: 1024px) {
  .main-title-jap-music-2 {
    font-size: 64px;
    -webkit-text-stroke-width: 1.5px;
  }
  .main-title-jap-music-2:before {
    background-size: 80px;
    width: 80px; height: 98px;
    left: calc(50% - 140px);
    top: -6px;
  }
  .main-title-jap-music-2:after {
    background-size: 42px;
    width: 42px; height: 50px;
    right: calc(50% - 120px);
    top: 2%;
  }
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {
  .main-title-jap-music-2 {
    font-size: 40px;
    -webkit-text-stroke-width: 1.2px;
  }
  .main-title-jap-music-2:before {
    background-size: 56px;
    width: 56px; height: 72px;
    left: calc(50% - 90px);
    top: -8px;
  }
  .main-title-jap-music-2:after {
    background-size: 32px;
    width: 32px; height: 38px;
    right: calc(50% - 80px);
    top: 0;
  }
}

/* ===== Small mobile (≤390px) ===== */
@media (max-width: 390px) {
  .main-title-jap-music-2 {
    font-size: 32px;
    -webkit-text-stroke-width: 1px;
  }
  .main-title-jap-music-2:before {
    background-size: 44px;
    width: 44px; height: 56px;
    left: calc(50% - 70px);
  }
  .main-title-jap-music-2:after {
    background-size: 24px;
    width: 24px; height: 30px;
    right: calc(50% - 60px);
  }
}

/* Sao hai bên – độc lập với background */
.video-head .star{
  position:absolute; top: calc(-2.8rem);      /* ngang với phần nhô của chữ */
  width: clamp(36px, 5vw, 64px); height:auto;
  pointer-events:none; z-index: 1;
}
.video-head .star-left {  left: clamp(-28px, -2vw, -12px); }
.video-head .star-right{ right: clamp(-28px, -2vw, -12px); }

/* Gạch vàng mảnh chạy full bề ngang khung tím */
.video-head .gold-line{
  height: 3px;
  background: #c9a51c;
  margin: .6rem 0 1.1rem;        /* khoảng cách so với JP title & EN subtitle */
}

/* Subtitle EN ở giữa */
.video-head .en{
  margin:0;
  color:#e9ecff;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
}

/* ===== Scroller: tối đa 3 card, kéo ngang khi nhiều hơn ===== */
.post-scroller{
  display:flex;
  gap: 1.5rem;              /* khoảng cách giữa các card */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: .25rem .25rem 1rem;
  -webkit-overflow-scrolling: touch;
}

.post-scroller {
    scrollbar-width: none; /* Dành cho Firefox */
    -ms-overflow-style: none;  /* Dành cho Internet Explorer */
}

.post-scroller::-webkit-scrollbar {
    display: none; /* Dành cho Chrome, Safari, Edge */
}

/* Card trong scroller */
.v-card.scard{
  background:#fff;
  position:relative;        /* QUAN TRỌNG cho stretched-link */
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3);   /* 3 card/khung */
  scroll-snap-align:start;
  border-radius: 18px;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.v-card.scard:hover{ transform: translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.32); }

/* Ảnh & link ổn định layout */
.v-card.scard .thumb img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.v-card.scard .stretched-link{ position:static; }
.v-card.scard .stretched-link::after{ position:absolute; inset:0; }

/* Breakpoints: tablet 2 card, mobile 1 card */
@media (max-width: 991.98px){
  .v-card.scard{ flex: 0 0 calc((100% - 1.5rem) / 2); }
}
@media (max-width: 575.98px){
  .v-card.scard{ flex: 0 0 100%; }
}

/* Nút cuộn trái/phải */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0.25em 0.5em;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}
.scroll-btn:hover {
  background: rgba(201,165,28,0.8); /* vàng khi hover */
  color: #000;
}
.scroll-btn.left  { left: -1rem; }
.scroll-btn.right { right: -1rem; }

/* Nếu khung nhỏ hơn thì kéo nút ra trong container */
@media (max-width: 768px){
  .scroll-btn.left  { left: 0.25rem; }
  .scroll-btn.right { right: 0.25rem; }
}

.post-scroller{
  cursor: grab;
  user-select: none;
}
.post-scroller.dragging{
  cursor: grabbing;
}
.post-scroller.dragging a{
  pointer-events: none;
}

.post-scroller {
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  user-select:none;
  scroll-behavior:smooth; /* cho nút mũi tên */
}
.post-scroller.dragging { cursor:grabbing; scroll-behavior:auto; }
.post-scroller.dragging a { pointer-events:none; }

/* ==== Khung màu tím cho slider full màn hình ==== */
.video-panel {
  width: 90vw;          /* chỉ chiếm 90% chiều rộng màn hình, có thể chỉnh 85–95 */
  margin-left: auto;    /* đẩy toàn bộ sang phải */
  margin-right: 0;      /* sát rìa phải */
  border-radius: 24px;
  padding: 0 2rem;
  position: relative;
  isolation: isolate;
}

/* Chữ bên trong giữ màu sáng để dễ đọc trên nền mới */
.video-panel, .video-panel p, .video-panel .meta {
  color:#007aff; 
}
.video-panel .headline { color:#e9ecff; }

.video-panel .scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;         /* đảm bảo nằm trên nền và card */
  cursor: pointer;
}

@media (max-width: 768px) {
  .video-panel {
    width: 100vw;
    margin: 0;
    border-radius: 0;   /* tùy, để tràn màn hình đẹp hơn */
  }
}

.video-title-2{
  color: #F0F0FF;
  -webkit-text-stroke-color: #141138;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
		
		.title-recommend{
			font-size:160px;
			line-height:2
		}
		
		.content-holder{
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
		}
		
		
		@media only screen and (max-width:1920px){
			.video-recommend{
				height:65%;
			}
			.music-recommend{
				height:65%;
			}
			.title-recommend{
				font-size:96px;
			}
		}
		
		@media only screen and (max-width:1440px){
			.video-recommend{
				height:90%;
			}
			.music-recommend{
				height:90%;
			}
		}
		
		@media only screen and (max-width:1280px){
			.video-recommend{
				height:80%;
			}
			.music-recommend{
				height:80%;
			}
		}
		
		@media only screen and (max-width:1024px){
			.video-recommend{
				height:80%;
			}
			.music-recommend{
				height:80%;
			}
		}
		
		@media only screen and (max-width:768px){
			.video-recommend{
				height:80%;
			}
			.music-recommend{
				height:80%;
			}
			
			.video-recommend{
				background-position:center;
			}
			.music-recommend{
				background-position:center;
			}
		}
/* wrapper giữ tỷ lệ 4:3 */
.sora-vid{
  width: min(640px, 100%);
  aspect-ratio: 4 / 3;
  position: relative;
}

/* phần tử bên trong fill toàn bộ */
.sora-vid > iframe,
.sora-vid > video,
.sora-vid > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* hoặc 'contain' nếu muốn toàn khung không crop */
}

/* breakpoints */
@media (max-width: 1024px){ .sora-vid{ width: 90vw; } }
@media (max-width: 768px){  .sora-vid{ width: 92vw; } }
@media (max-width: 390px){  .sora-vid{ width: 100vw; } }

.sora-menu {
  display: flex;
  flex-direction: column; /* hoặc row nếu menu ngang */
}
/* Mặc định: Ẩn ảnh mobile, hiện ảnh desktop */
.sora-menu-img-mobile {
    display: none;
}
.sora-menu-img-desktop {
    display: block;
}

@media (max-width: 991.98px) {
  /* Ẩn/hiện ảnh menu */
  .sora-menu-img-desktop {
      display: none;
  }
  .sora-menu-img-mobile {
      display: block;
      width: 100%; /* Đảm bảo ảnh mobile chiếm hết chiều rộng */
      height: auto;
  }

  /* Định dạng lại UL */
  .sora-ul-menu {
    flex-direction: column; /* Chuyển menu dọc trên mobile */
    align-items: center;    /* Căn giữa các mục */
    padding: 1rem 0;        /* Tăng khoảng đệm */
    position: absolute;
    top: 50%; /* Tinh chỉnh vị trí để nằm giữa ảnh menu mobile */
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0.5rem; /* Khoảng cách giữa các mục */
    width: 100%;
    z-index: 10;
  }
  .sora-ul-menu li {
    padding: 0.25rem 0;
  }
  .sora-ul-menu li a {
    font-size: 1.25rem; /* Cỡ chữ lớn hơn cho dễ chạm */
  }
  .sora-ul-menu .active-menu {
    display: none; /* Có thể ẩn vòng tròn active đi trên mobile cho đơn giản */
  }
}

@media (max-width: 768px) {
  /* Vô hiệu hóa một số vị trí tuyệt đối/cố định để xếp dọc tự nhiên */
  .page-container {
    padding: 0 1rem; /* Thêm padding ngang */
  }

  /* Logo */
  .top-logo {
    text-align: center;
    margin-bottom: 2rem;
  }
  .top-logo-img {
    max-width: 80%;
    height: auto;
  }

  /* Ảnh nhân vật - cần nổi bật */
  .sora-narration-2d {
    position: relative; /* Đổi từ absolute thành relative nếu cần */
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .sora-narration-2d-img {
    max-width: 80%; /* Giảm kích thước ảnh */
    height: auto;
  }

  /* Cuộn xuống */
  .sora-scroll {
    display: none !important; /* Thường ẩn nút cuộn khi ở mobile */
  }

  /* Mô tả */
  .sora-description {
    position: relative; /* Hoặc không cần position */
    width: 100%;
    padding: 0 1rem;
  }
  .sora-description .description-line {
    display: none; /* Ẩn line trang trí nếu nó quá phức tạp */
  }
  .sora-description .description-text p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
  }

  /* Video */
  /* sora-vid đã có responsive tốt ở cuối file CSS, giữ nguyên */

  /* Link mạng xã hội */
  .sora-link {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }
  .sora-link img {
    max-width: 48px;
  }

  /* Nút chi tiết */
  .description-detail {
    text-align: center;
    display: block;
    margin-top: 2rem;
  }

  /* Ảnh nền 2D */
  .sora-2d-background {
    display: none; /* Ẩn ảnh nền lớn để không bị tràn/quá nặng */
  }

  /* Background nhân vật (thường là một div nằm sau) */
  .sora-background {
    display: none;
  }
}

@media (max-width: 768px) {
  /* DATA Section */
  .sora-data {
    text-align: center;
    padding: 2rem 1rem;
  }
  .sora-data img {
    max-width: 80%; /* Giảm kích thước ảnh trang trí */
    height: auto;
  }
  .data-container {
    display: flex;
    flex-direction: column; /* Xếp dọc các cột */
    align-items: center;
  }
  .data-left, .data-right {
    width: 100%;
    max-width: 300px;
    margin: 0.5rem 0;
    text-align: left; /* Chỉnh lại căn lề nếu muốn */
  }
  .data-left p, .data-right p {
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }

  /* Footer */
  .sora-footer {
    padding: 2rem 1rem;
  }
  .footer-header {
    font-size: 1.5rem;
  }
  .footer-link {
    flex-direction: column; /* Xếp dọc link SNS và Mail */
    align-items: center;
    gap: 1.5rem;
  }
  .link-mail {
    text-align: center;
  }
}

/* Mặc định cho Mobile */
@media (max-width: 991.98px) {
    /* -------------------------------------- */
    /* 1. Logo (Ảnh của bạn có vẻ là phần logo A.png + chữ Sora Universe) */
    /* -------------------------------------- */
    .top-logo {
    position: absolute !important; /* Dùng !important để xác nhận ghi đè */
    top: 1.5rem !important;
    left: 1rem !important;
    transform: none !important;
    z-index: 150 !important;
    text-align: left !important;
}
.top-logo-img {
    max-width: 240px; /* CHỈNH SỬA: Tăng kích thước tối đa cho Logo (từ 180px -> 240px) */
    height: auto;
}

    /* -------------------------------------- */
    /* 2. Menu (sora-menu) */
    /* -------------------------------------- */
    .sora-menu {
    position: absolute !important; 
    top: 1.5rem !important; 
    right: 1rem !important; 
    z-index: 150 !important;
    left: auto; 
    transform: none;
    width: auto; 
    height: auto; 
}
    
    /* Ẩn ảnh menu bar (cho gọn gàng, chỉ hiển thị chữ) */
    .sora-menu-img-desktop, .sora-menu-img-mobile {
        display: none;
    }

    /* Định dạng UL (chữ menu) */
    .sora-ul-menu {
    /* CHỈNH SỬA: Loại bỏ định vị tuyệt đối trên mobile */
    position: static; /* Hoặc position: relative; */
    top: 0; /* Loại bỏ các thuộc tính vị trí cũ */
    left: 0;
    transform: none;
    
    /* Các thuộc tính bố cục cần thiết */
    list-style: none;
    padding: 0;
    margin: 0;
    
    flex-direction: column; 
    align-items: flex-end; /* Căn phải */
    width: auto; 
}
    .sora-ul-menu li {
        padding: 0.25rem 0;
        text-align: right; /* Căn phải chữ */
		list-style: none;
    }
    .sora-ul-menu li a {
        color: #4f6eab;;
        font-size: 1.5rem;
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.1em;
    }
	
	.sora-ul-menu li a#active {
    color: var(--accent); /* Màu vàng (đã định nghĩa là --accent: #ffd24a) */
	}
	
    .sora-ul-menu .active-menu {
        display: none; /* Ẩn vòng tròn active */
    }
	
	/* -------------------------------------- */
    /* 3. Nhân vật 2D */
    /* -------------------------------------- */
    .sora-narration-2d {
    position: absolute;
    /* Đẩy nhân vật xuống khỏi màn hình để không che Menu */
    bottom: -5vh; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 50; 
    width: 100%;
    height: auto;
    pointer-events: none;
}

.sora-narration-2d-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    /* Giảm kích thước tối đa của ảnh để không tràn quá cao */
    max-height: 80vh; /* Giảm từ 85vh xuống 80vh */
    object-fit: contain;
}
    
    /* Ẩn các phần không cần thiết */
    .sora-description,
.sora-scroll {
    display: none !important; /* Vẫn ẩn mô tả và nút cuộn */
}
	
.sora-background,
.sora-2d-background,
.description-detail {
    display: block !important; /* KHÔI PHỤC HIỂN THỊ */
}
	
	.description-detail {
    position: absolute;
    top: 50vh; /* CHỈNH SỬA: Vị trí vòng tròn nhỏ (bạn có thể cần tinh chỉnh giá trị này) */
    right: 1rem;
    z-index: 100; /* Đặt vòng tròn dưới Menu nhưng trên Nhân vật */
}

	.sora-background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40; /* Phải nằm dưới nhân vật (50) */
    opacity: 0.3; /* Tinh chỉnh độ mờ */
}
	
}