/* ============================================================
   Parallel Universe — design-study clone
   Palette: cream #E1D9C1 on graphite #0E0E0E, warm accent #A77D49
   Headings: Oswald (≈ Haval)   Body: Space Grotesk (≈ Bounded)
   ============================================================ */

:root{
	--cream:#E1D9C1;
	--muted:#CAC5BD;
	--bg:#0E0E0E;
	--warm:#A77D49;
	--head:'Oswald', sans-serif;
	--body:'Space Grotesk', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body,html{width:100%;min-height:100%;margin:0;padding:0;background:var(--bg);}
body{
	color:var(--cream);
	font-family:var(--body);
	font-size:16px;
	font-weight:300;
	line-height:160%;
	letter-spacing:-0.16px;
	overflow-x:clip;
}
/* fixed cosmic background */
body::before{
	content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(1200px 800px at 70% -10%, rgba(167,125,73,.10), transparent 60%),
		radial-gradient(900px 700px at 10% 20%, rgba(60,70,90,.10), transparent 60%),
		radial-gradient(1000px 1000px at 50% 120%, rgba(167,125,73,.08), transparent 60%),
		#0E0E0E;
}
img{max-width:100%;display:block;}
a{color:var(--cream);text-decoration:none;transition:.5s;}
button{border:0;background:none;padding:0;color:var(--cream);cursor:pointer;font-family:var(--body);transition:.5s;}
:focus{outline:none;}

.container{max-width:1582px;margin:0 auto;padding:0 40px;width:100%;}
.h-100{height:100%;}
.margin-bottom{margin-bottom:200px;}

/* scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-thumb{background:var(--cream);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- typography ---------- */
h1{margin:0 0 48px;font-family:var(--head);font-size:64px;font-weight:500;line-height:100%;letter-spacing:-2.56px;text-transform:uppercase;color:var(--cream);}
h2{margin:0 0 40px;font-family:var(--head);font-size:64px;font-weight:500;line-height:100%;letter-spacing:-2.56px;text-transform:uppercase;text-align:center;color:var(--cream);}
h3{margin:0 0 40px;font-family:var(--head);font-size:40px;font-weight:500;line-height:110%;letter-spacing:-1.6px;text-transform:uppercase;color:var(--cream);}

.section-anons{max-width:1027px;margin:0 auto;text-align:center;font-size:20px;font-weight:300;line-height:160%;letter-spacing:-0.2px;color:var(--cream);}

/* animated link */
.link-default{position:relative;display:inline-block;overflow:hidden;padding:0 0 16px;font-size:14px;font-weight:400;line-height:100%;letter-spacing:-0.14px;text-transform:uppercase;}
.link-default::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cream);}
.link-default::after{content:"";position:absolute;right:0;bottom:0;height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--warm));transition:.5s;}
.link-default span{position:relative;display:block;height:14px;overflow:hidden;}
.link-default span span{display:block;transition:.5s;}
.link-default span::after{content:attr(data-attr);display:block;line-height:14px;}
.link-default:hover::after{right:-60px;}
.link-default:hover span span{margin-top:-14px;}

/* reveal-on-scroll (blur + rise) */
.op{opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),filter .5s ease;}
.op.in{opacity:1;transform:none;filter:blur(0);}

/* per-character text — blur is scrubbed to scroll position by JS (inline styles).
   Default state is sharp & visible, so text can never go missing if JS is slow. */
.word{display:inline-block;white-space:nowrap;}
.char{display:inline-block;will-change:opacity,filter,transform;}

/* Hero: self-running CSS animation — shows on load even with no JS at all. */
@keyframes heroIn{from{opacity:0;filter:blur(20px);transform:translateY(12px);}to{opacity:1;filter:blur(0);transform:none;}}
.hero-info h1{animation:heroIn 1.3s ease both;}
.hero-info .info-title{animation:heroIn 1.1s ease .25s both;}

/* ============ HEADER ============ */
.header{position:fixed;top:0;left:0;right:0;z-index:200;padding:13px 0;transition:.5s;}
.header.fix{background:rgba(14,14,14,.9);backdrop-filter:blur(6px);}
.header.out{transform:translateY(-100%);}
.header-row{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:12px;min-width:188px;}
.logo-mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--cream);position:relative;flex:none;}
.logo-mark::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid var(--warm);}
.logo-text{font-family:var(--head);font-weight:600;font-size:15px;line-height:1;letter-spacing:1px;text-transform:uppercase;}

.header-menu{flex:1;display:flex;justify-content:center;}
.header-menu .nav{list-style:none;display:flex;gap:48px;margin:0;padding:0;}
.header-menu .nav a{font-size:14px;font-weight:400;letter-spacing:-0.14px;text-transform:uppercase;}
.header-menu .nav a:hover{opacity:.6;}

.header-right{display:flex;align-items:center;gap:12px;}
.header-link{position:relative;overflow:hidden;display:block;border-radius:40px;border:1px solid var(--cream);padding:10px 15px;font-size:14px;font-weight:400;letter-spacing:-0.14px;text-transform:uppercase;z-index:0;}
.header-link::before{content:"";position:absolute;top:100%;left:0;width:100%;height:100%;background:var(--cream);z-index:-1;transition:all .4s ease;}
.header-link:hover{color:var(--bg);}
.header-link:hover::before{top:0;}

.header-langs{position:relative;}
.lng-button{position:relative;overflow:hidden;height:36px;width:56px;border-radius:40px;border:1px solid var(--cream);color:var(--cream);font-size:14px;font-weight:400;text-transform:uppercase;display:flex;align-items:center;justify-content:center;z-index:0;}
.lng-button::before{content:"";position:absolute;top:100%;left:0;width:100%;height:100%;background:var(--cream);z-index:-1;transition:all .4s ease;}
.lng-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:-10px;width:100%;background:var(--cream);border-radius:40px;padding:2px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:.4s;}
.lng-dropdown .value{display:block;color:var(--bg);font-size:14px;text-transform:uppercase;padding:10px 0;}
.header-langs:hover .lng-dropdown{opacity:1;visibility:visible;pointer-events:all;margin-top:0;}
.header-langs:hover .lng-button{color:var(--bg);}
.header-langs:hover .lng-button::before{top:0;}

.sound-switcher{position:relative;overflow:hidden;height:36px;width:72px;border-radius:40px;border:1px solid var(--cream);display:flex;align-items:center;padding:0 14px;}
.sound-switcher .sound-line{position:absolute;left:14px;right:34px;height:1px;background:var(--cream);transition:.4s;}
.sound-bars{display:flex;align-items:center;gap:2px;height:14px;opacity:0;transition:.4s;}
.sound-bars i{width:2px;background:var(--cream);height:4px;animation:eq 1s ease-in-out infinite;}
.sound-bars i:nth-child(2){animation-delay:.2s;}
.sound-bars i:nth-child(3){animation-delay:.4s;}
.sound-bars i:nth-child(4){animation-delay:.6s;}
.sound-switcher.is-play .sound-line{opacity:0;}
.sound-switcher.is-play .sound-bars{opacity:1;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}

.menu-button{display:none;width:40px;height:40px;border:1px solid var(--cream);border-radius:50%;position:relative;}
.menu-button span,.menu-button span::before,.menu-button span::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;background:var(--cream);transform:translate(-50%,-50%);transition:.3s;}
.menu-button span::before{top:-5px;}
.menu-button span::after{top:5px;}

/* ============ HERO ============ */
.content{padding-top:0;}
.main-hero{position:relative;height:1315px;max-height:100vh;min-height:760px;overflow:hidden;}
.main-hero .hero-media{position:absolute;inset:0;z-index:1;}
.main-hero .hero-media::after{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(0deg,rgba(12,12,12,.2) 0%,rgba(12,12,12,.4) 50%,rgba(12,12,12,.8) 100%);}
.starfield{position:absolute;inset:0;width:100%;height:100%;display:block;}

.hero-portal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;height:560px;z-index:3;}
.hero-info{position:absolute;top:0;left:0;right:0;bottom:100px;z-index:20;display:flex;align-items:center;}
.hero-info .container{display:flex;flex-direction:column;justify-content:center;height:100%;}
.info-container{display:flex;flex-direction:column;justify-content:center;height:59vh;max-height:560px;}
.hero-info h1{margin:0;font-family:var(--head);font-size:164px;font-weight:500;line-height:100%;letter-spacing:-4px;text-transform:uppercase;}
.hero-info h1 span{display:block;text-align:right;margin-top:16px;}
.info-title{margin-top:auto;color:var(--muted);font-family:var(--head);font-size:32px;font-weight:400;letter-spacing:1.28px;text-transform:uppercase;}

/* ---- CSS portal (replaces proprietary video) ---- */
.portal-ring,.portal-core{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%);}
.portal-ring{border:1px solid rgba(225,217,193,.25);}
.portal-ring.r1{width:100%;height:100%;animation:spin 26s linear infinite;}
.portal-ring.r1::after{content:"";position:absolute;top:-2px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--warm);box-shadow:0 0 12px var(--warm);}
.portal-ring.r2{width:74%;height:74%;border-style:dashed;border-color:rgba(225,217,193,.2);animation:spin 18s linear infinite reverse;}
.portal-ring.r3{width:50%;height:50%;border-color:rgba(167,125,73,.4);animation:spin 12s linear infinite;}
.portal-core{width:60%;height:60%;background:
		radial-gradient(circle at 50% 50%, rgba(167,125,73,.55), rgba(60,40,20,.25) 40%, rgba(14,14,14,.9) 72%);
	box-shadow:0 0 80px rgba(167,125,73,.35), inset 0 0 60px rgba(0,0,0,.8);
	animation:pulse 6s ease-in-out infinite;}
.portal-core::after{content:"";position:absolute;inset:18%;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(225,217,193,.18),transparent,rgba(167,125,73,.25),transparent);animation:spin 20s linear infinite;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes pulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.25);}}

/* ============ PLANET SECTION ============ */
.planet-section>.container>h2{font-size:50px;letter-spacing:-1.6px;max-width:1100px;margin-left:auto;margin-right:auto;}
.planet-section .section-anons{margin:0 auto 48px;}
.intro-meta{max-width:760px;margin:0 auto 104px;}
.intro-meta .meta-row{display:flex;align-items:baseline;gap:24px;padding:18px 4px;border-top:1px solid rgba(225,217,193,.14);}
.intro-meta .meta-row:last-child{border-bottom:1px solid rgba(225,217,193,.14);}
.intro-meta .meta-label{flex:none;width:200px;font-family:var(--head);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--warm);}
.intro-meta .meta-val{flex:1;font-size:18px;font-weight:300;line-height:150%;letter-spacing:-0.18px;color:var(--cream);}
@media (max-width:680px){
	.intro-meta .meta-row{flex-direction:column;gap:6px;}
	.intro-meta .meta-label{width:auto;}
	.intro-meta .meta-val{font-size:16px;}
}
.planet-section .planet-video{position:relative;margin:0 0 96px;display:flex;justify-content:center;min-height:480px;align-items:center;}
.planet-section .video-container{position:relative;width:480px;height:480px;border-radius:50%;overflow:hidden;background:#0b0b0b;}
.planet-section .video-container::after{content:"";position:absolute;inset:0;background:rgba(14,14,14,.45);}
.planet-section .planet-title-1{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:420px;}
.planet-section .planet-title-2{position:absolute;right:0;top:50%;transform:translateY(-50%);max-width:420px;text-align:right;}
.planet-section .planet-title-2 h3{text-align:right;}
.planet-section .planet-video h3{margin:0;}
.planet-items{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:0 4%;}
.planet{border-radius:50%;position:relative;z-index:3;}
.planet::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset -14px -10px 40px rgba(0,0,0,.85),inset 14px 12px 30px rgba(225,217,193,.08);}
.planet-1{width:184px;height:184px;margin-top:76px;background:radial-gradient(circle at 32% 28%,#6a6258,#2a2622 70%);}
.planet-2{width:258px;height:258px;margin-top:134px;background:radial-gradient(circle at 35% 30%,#a98a5d,#3a2c1a 72%);}
.planet-3{width:146px;height:146px;margin-top:178px;background:radial-gradient(circle at 30% 30%,#7d8794,#26303a 72%);}
.planet-4{width:318px;height:318px;margin-top:20px;background:radial-gradient(circle at 36% 30%,#c2b7a0,#3a352a 74%);}

/* ============ CASES ============ */
.main-cases{position:relative;}
/* video4 = nền dính nằm dưới (z-index 0); thẻ bài tập ở trên (z-index 2) */
.cases-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.cases-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;}
.cases-circle{position:relative;width:115vh;height:115vh;max-width:115vw;padding:clamp(40px,6vh,90px);}
.cases-circle::before{content:"";position:absolute;inset:0;border:1px solid var(--muted);opacity:.1;border-radius:50%;}
.cases-circle::after{content:"";position:absolute;inset:36px;border:1px dashed var(--muted);opacity:.1;border-radius:50%;}
.cases-circle .video-container{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;}
.cases-circle .video-container::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 50% 50%, rgba(12,13,14,.22), rgba(12,13,14,.80) 72%);}
.cases-circle .video-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cases-content{position:relative;z-index:2;}
.cases-titles{position:relative;z-index:5;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.cases-titles h2{max-width:1060px;margin:0 auto 32px;}
.cases-titles h3{max-width:884px;margin:0 auto;text-align:center;}

.cases-list{position:relative;}
.cases-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.cases-list .item{display:block;width:calc(44% - 30px);margin:116px 15px 80px;}
.cases-row:first-child .item{margin-top:0;}
.cases-list .item .item-image{padding:16px;border:1px solid var(--muted);height:620px;margin:0 0 24px;overflow:hidden;transition:.5s;}
.cases-list .item .image-container{height:100%;overflow:hidden;}
.cases-list .item .item-image img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:grayscale(.4) contrast(1.05) brightness(.9);}
.cases-list .item:hover .item-image{padding:12px;}
.cases-list .item:hover .item-image img{transform:scale(1.2);}
.item-foot{display:flex;align-items:flex-start;justify-content:space-between;}
.item-name{display:flex;align-items:flex-start;color:var(--muted);font-size:20px;font-weight:400;line-height:140%;letter-spacing:-0.2px;}
.item-name .number{font-weight:300;width:100px;min-width:100px;}
.item .date{color:var(--muted);font-size:16px;font-weight:400;white-space:nowrap;}

.cases-list .item.small{width:calc(31% - 30px);margin:64px 15px 48px;}
.cases-row:nth-child(2) .item.small:nth-child(2){margin-top:128px;}
.cases-list .item.small .item-image{height:410px;}
.cases-list .item.small .item-name{font-size:16px;}
.cases-list .item.small .item-name .number{width:60px;min-width:60px;}

.more-container{width:100%;margin:40px 0 0;border-top:1px solid rgba(225,217,193,.2);padding-top:32px;text-align:center;}

/* ============ MOUNT ============ */
.mount-section{position:relative;}
.mount-titles{position:absolute;top:0;left:0;right:0;z-index:5;padding-top:60px;}
.mount-titles .section-anons{max-width:784px;}
.mount-animate{position:relative;height:1100px;overflow:hidden;}
.mount-animate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:6;background:linear-gradient(to bottom,rgba(14,14,14,0),#0E0E0E);}
.mount-layer{position:absolute;left:-5%;right:-5%;bottom:0;background-repeat:no-repeat;background-position:bottom center;background-size:cover;}
.mount-far{height:55%;background:
	radial-gradient(60% 120% at 80% 0%, rgba(167,125,73,.12), transparent 60%),
	linear-gradient(to top,#1a1814,transparent);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 170 L150 120 L320 200 L480 90 L650 180 L820 70 L1000 160 L1200 110 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 170 L150 120 L320 200 L480 90 L650 180 L820 70 L1000 160 L1200 110 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;}
.mount-mid{height:48%;background:linear-gradient(to top,#16140f,#211d16);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 210 L220 120 L430 230 L640 110 L900 240 L1120 140 L1200 200 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 210 L220 120 L430 230 L640 110 L900 240 L1120 140 L1200 200 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;}
.mount-near{height:40%;background:linear-gradient(to top,#0d0c0a,#100e0b);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 250 L180 180 L380 260 L560 170 L780 270 L980 190 L1200 250 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300 L0 250 L180 180 L380 260 L560 170 L780 270 L980 190 L1200 250 L1200 300 Z' fill='black'/></svg>") bottom/100% 100% no-repeat;}

/* ============ ABOUT ============ */
.main-about{position:relative;padding:0 0 160px;margin-top:0;z-index:5;}
.main-about .about-images{display:flex;align-items:flex-start;justify-content:space-between;gap:55px;margin:0 0 112px;}
.main-about .about-images .image{flex:1;height:480px;overflow:hidden;}
.main-about .about-images .image img{width:100%;height:120%;object-fit:cover;filter:grayscale(.4) brightness(.85);}
.main-about .about-images .image-2{margin-top:-48px;}
.about-flex{display:flex;align-items:flex-start;justify-content:space-between;gap:80px;}
.about-left{flex:1;max-width:600px;}
.main-about .about-info h2{text-align:left;margin:0 0 32px;}
.main-about .about-info .anons{width:46%;max-width:560px;color:var(--muted);font-size:18px;font-weight:300;line-height:160%;letter-spacing:-0.18px;}
.main-about .about-info{position:relative;z-index:3;}
/* image frame under the conclusion */
.about-frame{border:1px solid var(--muted);padding:14px;background:rgba(225,217,193,.02);}
.about-frame .media-slot{min-height:300px;}
.about-frame img{display:block;width:100%;height:auto;}

/* ============ FOOTER ============ */
.footer{position:relative;overflow:hidden;padding-top:140px;background:
	radial-gradient(80% 60% at 50% 0%, rgba(167,125,73,.10), transparent 60%);}
.footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:570px;z-index:3;background:linear-gradient(180deg,rgba(12,12,12,0) 50%,#0C0C0C);pointer-events:none;}
.footer .container{position:relative;z-index:5;}
.footer-form{text-align:center;margin:0 0 80px;}
.footer-form h3{text-align:center;}
.footer-form .anons{margin:0 0 32px;font-size:20px;font-weight:300;line-height:160%;letter-spacing:-0.2px;}
.subscribe-form{width:668px;max-width:100%;margin:0 auto;position:relative;}
.input-container{position:relative;margin:0;}
.input{width:100%;height:68px;padding:0 130px 0 28px;border:1px solid var(--cream);border-radius:34px;background:transparent;color:var(--cream);font-family:var(--body);font-size:14px;text-transform:uppercase;letter-spacing:-0.14px;}
.input::placeholder{color:var(--cream);opacity:.3;}
.subscribe-form .submit{position:absolute;top:50%;right:40px;transform:translateY(-50%);background:none;color:var(--cream);font-family:var(--body);font-size:14px;text-transform:uppercase;letter-spacing:-0.14px;}

.footer-cols{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;}
.footer .logo{display:flex;margin:0 0 40px;}
.footer-nav ul{list-style:none;margin:0;padding:0;}
.footer-nav a{display:block;margin:0 0 40px;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:-0.14px;}
.footer-nav li:last-child a{margin:0;}
.footer-nav a:hover{text-decoration:underline;}
.footer-right{text-align:right;}
.ic-circle{display:inline-flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;border:1px solid rgba(225,217,193,.5);border-radius:50%;margin-right:20px;font-size:20px;}
.footer .phone{display:flex;align-items:center;margin:0 0 48px;font-size:24px;font-weight:400;text-transform:uppercase;letter-spacing:-0.24px;}
.footer .adres{display:inline-flex;align-items:center;text-align:left;margin:0 0 48px;font-size:16px;font-weight:400;line-height:140%;}
.footer .socials{width:232px;margin-left:auto;text-align:left;}
.footer .socials a{display:block;margin:0 0 40px;font-size:14px;font-weight:400;text-transform:uppercase;}
.footer .socials a:last-child{margin:0;}
.footer .socials a:hover{text-decoration:underline;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin:92px 0 0;border-top:1px solid rgba(225,217,193,.12);padding:25px 0 26px;font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:-0.12px;}
.footer-bottom .links{text-align:center;flex:1;}
.footer-bottom a:hover{text-decoration:underline;}

.footer-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.footer-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:0;}
.footer-img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,88%);z-index:4;}
.footer-portal{position:relative;width:432px;height:432px;bottom:-160px;}

/* ============ MOBILE MENU ============ */
.mobile-overlay{position:fixed;inset:0;z-index:150;background:rgba(14,14,14,.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.4s;}
.mobile-overlay.open{opacity:1;visibility:visible;}
.mobile-overlay ul{list-style:none;text-align:center;padding:0;}
.mobile-overlay li{margin:24px 0;}
.mobile-overlay a{font-family:var(--head);font-size:28px;text-transform:uppercase;}

/* ============ CASE DETAIL (shared template) ============ */
.inner .content{padding-top:160px;}
.inner .header{position:fixed;}

.case-detail .detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin:0 0 48px;}
.case-detail h1{margin:0 0 16px;text-align:left;font-size:46px;letter-spacing:-1.6px;}
.case-detail .detail-date{color:var(--muted);font-size:16px;letter-spacing:-0.16px;}
.case-detail .detail-top .detail-right{padding-top:18px;}

.case-detail .detail-container{display:flex;align-items:flex-start;gap:60px;}
.case-detail .detail-container .detail-left{order:1;flex:1;min-width:0;}
.case-detail .detail-container .detail-right{order:2;width:460px;min-width:460px;}
.case-detail .detail-sticky{position:sticky;top:150px;}
.case-detail .detail-anons{margin:0 0 40px;font-size:18px;font-weight:300;line-height:160%;letter-spacing:-0.18px;color:var(--muted);}

.case-detail .audio-button{display:inline-flex;align-items:center;gap:14px;margin:0 0 48px;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:-0.14px;}
.case-detail .audio-button .ic-play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid var(--cream);border-radius:50%;font-size:10px;transition:.4s;}
.case-detail .audio-button:hover .ic-play{background:var(--cream);color:var(--bg);}

.case-detail .video-button{display:block;width:305px;max-width:100%;height:348px;padding:20px;border:1px solid rgba(202,197,189,.25);margin:0 0 40px;}
.case-detail .video-button .video-container{position:relative;width:100%;height:100%;overflow:hidden;background:#0b0b0b;}
.case-detail .video-button .video-container::after{content:"";position:absolute;inset:0;background:rgba(14,14,14,.45);}
.case-detail .video-button .play-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:66px;height:66px;border:1.5px solid var(--cream);border-radius:50%;font-size:20px;transition:.4s;}
.case-detail .video-button:hover .play-circle{background:var(--cream);color:var(--bg);}
.case-detail .down{font-size:60px;line-height:1;color:var(--cream);opacity:.8;}

.case-detail .detail-gallery .g-item{border:1px solid var(--muted);padding:22px;margin:0 0 52px;}
.case-detail .detail-gallery .g-item:last-child{margin:0;}
.case-detail .detail-gallery .g-frame{overflow:hidden;}
.case-detail .detail-gallery img{width:100%;display:block;filter:grayscale(.35) contrast(1.05) brightness(.92);}

.case-detail .detail-nav{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:88px 0 0;padding:50px 0 0;border-top:1px solid rgba(255,255,255,.2);}
.case-detail .nav-cost{display:flex;align-items:center;gap:24px;}
.case-detail .cost-title{font-family:var(--head);font-size:24px;font-weight:400;text-transform:uppercase;letter-spacing:-0.5px;}
.modal-btn{position:relative;overflow:hidden;display:inline-block;border-radius:40px;border:1px solid var(--cream);padding:12px 22px;color:var(--cream);font-family:var(--body);font-size:14px;text-transform:uppercase;letter-spacing:-0.14px;z-index:0;}
.modal-btn::before{content:"";position:absolute;top:100%;left:0;width:100%;height:100%;background:var(--cream);z-index:-1;transition:all .4s ease;}
.modal-btn:hover{color:var(--bg);}
.modal-btn:hover::before{top:0;}

.other-cases h2{text-align:left;margin:0 0 60px;}
.other-cases .cases-row{gap:0;}
.other-cases .cases-list .item.small{margin:0 15px;width:calc(33.333% - 30px);}

/* ---- media placeholder slots (chỗ dán link ảnh/video của bạn) ---- */
.media-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:140px;border:1px dashed rgba(225,217,193,.3);background:rgba(225,217,193,.025);color:var(--muted);text-align:center;padding:18px;transition:.4s;}
.media-slot:hover{border-color:var(--cream);background:rgba(225,217,193,.05);}
.media-slot .ms-plus{font-family:var(--head);font-size:30px;line-height:1;opacity:.5;margin:0 0 10px;}
.media-slot .ms-label{font-size:12px;letter-spacing:.5px;text-transform:uppercase;opacity:.85;line-height:1.5;}
.ph{color:rgba(202,197,189,.55);font-style:italic;}

/* ---- HOOK: thay nền/quả cầu bằng video hoặc ảnh của bạn ----
   Chỉ cần đặt <video class="hero-bg-media"> hoặc <img class="hero-bg-media"> vào .hero-media,
   hoặc đặt <img>/<video> vào trong .planet / .video-container — CSS dưới tự canh khung. */
.hero-bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
/* planets shown as their own PNG (no circle crop / gradient) */
.planet:has(img){background:none;overflow:visible;}
.planet:has(img)::before{display:none;}
.planet img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;}
.planet-video .video-container img,.planet-video .video-container video,
.cases-video .video-container img,.cases-video .video-container video,
.footer-portal img,.footer-portal video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
/* keep the dark wash above the real videos */
.planet-section .video-container::after{z-index:3;}
.cases-video .video-container::after{z-index:3;}

/* hero: main1.png (bottom) → portal.png → video2.mp4 (top) */
.main-hero .hero-image{position:absolute;inset:0;z-index:1;}
.main-hero .hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;}
.main-hero .hero-video2{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:2;width:400px;aspect-ratio:400/370;height:auto;max-width:80vw;border-radius:50%;overflow:hidden;}
.main-hero .hero-portal-img{position:absolute;inset:0;z-index:3;pointer-events:none;}
.main-hero .hero-portal-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.main-hero .hero-video2 video{width:100%;height:100%;object-fit:cover;}

/* ---- detail info blocks ---- */
.case-detail .detail-block{margin:0 0 36px;}
.case-detail .detail-block h4{margin:0 0 14px;font-family:var(--head);font-size:15px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--cream);opacity:.85;}
.case-detail .detail-block .detail-anons{margin:0;}
.proc-list{margin:0;padding:0 0 0 0;list-style:none;counter-reset:step;}
.proc-list>li{position:relative;padding:0 0 14px 38px;font-size:16px;line-height:150%;color:var(--muted);counter-increment:step;}
.proc-list>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--head);font-size:13px;color:var(--warm);letter-spacing:.5px;}
.proc-sub{margin:10px 0 2px;padding:0 0 0 4px;list-style:none;}
.proc-sub li{position:relative;padding:0 0 6px 18px;font-size:15px;line-height:145%;color:rgba(202,197,189,.8);}
.proc-sub li::before{content:"–";position:absolute;left:0;top:0;color:var(--warm);}

/* ---- PDF viewer frame ---- */
.pdf-frame{border:1px solid var(--muted);padding:14px;background:rgba(225,217,193,.02);}
.pdf-frame .pdf-bar{display:flex;align-items:center;gap:8px;padding:2px 6px 14px;}
.pdf-frame .pdf-bar .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--muted);opacity:.6;}
.pdf-frame .pdf-bar .pdf-name{margin-left:auto;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.pdf-frame .pdf-view{position:relative;width:100%;height:780px;background:#0b0b0b;border:1px solid rgba(225,217,193,.12);overflow:hidden;}
.pdf-frame .pdf-view iframe{width:100%;height:100%;border:0;display:block;background:#fff;}
.pdf-frame .pdf-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:24px;gap:8px;}
.pdf-frame .pdf-empty .ms-plus{font-family:var(--head);font-size:34px;opacity:.5;}
.pdf-frame .pdf-empty .ms-label{font-size:13px;letter-spacing:.4px;line-height:1.6;text-transform:uppercase;}

/* ============ RESPONSIVE ============ */
@media (max-width:1280px){
	.hero-info h1{font-size:120px;}
	h1,h2{font-size:52px;}
	.planet-section>.container>h2{font-size:44px;}
}
@media (max-width:1024px){
	.margin-bottom{margin-bottom:120px;}
	.header-menu{display:none;}
	.menu-button{display:block;}
	.header-link{display:none;}
	.hero-info h1{font-size:88px;}
	h1,h2{font-size:44px;letter-spacing:-1.6px;}
	h3{font-size:30px;}
	.hero-video2{width:min(340px,40vw);}
	.planet-section>.container>h2{font-size:38px;}
	.planet-section .video-container{width:400px;height:400px;}
	.planet-section .planet-video{min-height:400px;}
	.planet-section .planet-title-1,.planet-section .planet-title-2{max-width:185px;}
	.planet-title-1 h3,.planet-title-2 h3{font-size:20px;}
	.planet-1{width:130px;height:130px;}
	.planet-2{width:180px;height:180px;}
	.planet-3{width:108px;height:108px;}
	.planet-4{width:220px;height:220px;}
	.cases-list .item,.cases-list .item.small{width:calc(50% - 30px);}
	.cases-list .item .item-image{height:420px;}
	.about-flex{flex-direction:column;gap:36px;}
	.about-left{max-width:none;width:100%;}
	.main-about .about-info .anons{width:100%;max-width:none;}
	.about-frame .media-slot{min-height:340px;}
}
@media (max-width:768px){
	.container{padding:0 20px;}
	.margin-bottom{margin-bottom:90px;}
	.main-hero{min-height:580px;}
	.hero-info{bottom:50px;}
	.hero-info h1{font-size:52px;letter-spacing:-1px;}
	.hero-info h1 span{margin-top:6px;}
	.info-title{font-size:20px;}
	h1,h2{font-size:32px;letter-spacing:-1px;}
	h3{font-size:22px;}
	.section-anons{font-size:16px;}
	.hero-video2{width:46vw;top:34%;}
	.planet-section>.container>h2{font-size:27px;letter-spacing:-0.6px;}
	.planet-section .section-anons{margin-bottom:36px;}
	.planet-section .planet-video{min-height:auto;margin-bottom:48px;flex-direction:column;gap:26px;}
	.planet-section .video-container{width:72vw;height:72vw;max-width:300px;max-height:300px;}
	.planet-section .planet-title-1,.planet-section .planet-title-2{position:static;transform:none;left:auto;right:auto;max-width:none;text-align:center;}
	.planet-section .planet-title-2 h3{text-align:center;}
	.planet-items{flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;padding:0;}
	.planet{margin-top:0!important;}
	.planet-1{width:92px;height:92px;}
	.planet-2{width:120px;height:120px;}
	.planet-3{width:80px;height:80px;}
	.planet-4{width:138px;height:138px;}
	.cases-circle{width:122vw;height:122vw;max-width:none;padding:30px;}
	.cases-circle::after{inset:22px;}
	.cases-titles{height:78vh;}
	.cases-row{flex-direction:column;}
	.cases-list .item,.cases-list .item.small{width:100%;margin:0 0 46px!important;}
	.cases-row:nth-child(2) .item.small:nth-child(2){margin-top:0!important;}
	.cases-list .item .item-image,.cases-list .item.small .item-image{height:300px;padding:12px;}
	.item-name .number{width:64px;min-width:64px;}
	.subscribe-form{width:100%;}
	.input{padding-right:96px;}
	.footer-cols{flex-direction:column;gap:40px;}
	.footer-right{text-align:left;}
	.footer .socials{width:auto;margin-left:0;}
	.footer-bottom{flex-direction:column;gap:14px;text-align:center;}
	.footer-img{width:min(420px,86%);}
	.intro-meta{margin-bottom:64px;}
}
@media (max-width:480px){
	.hero-info h1{font-size:40px;}
	.info-title{font-size:18px;}
	.logo{min-width:0;}
	.logo-text{font-size:12.5px;}
	.planet-section .video-container{width:72vw;height:72vw;}
}

/* ---- case detail responsive ---- */
@media (max-width:1100px){
	.case-detail .detail-container{flex-direction:column;gap:0;}
	.case-detail .detail-container .detail-right{order:1;width:100%;min-width:0;margin:0 0 36px;}
	.case-detail .detail-container .detail-left{order:2;width:100%;}
	.case-detail .detail-sticky{position:static;}
	.other-cases .cases-list .item.small{width:calc(50% - 30px);}
}
@media (max-width:768px){
	.inner .content{padding-top:100px;}
	.case-detail h1{font-size:30px;letter-spacing:-0.8px;overflow-wrap:break-word;}
	.case-detail .detail-top{flex-direction:column;gap:14px;align-items:stretch;}
	.case-detail .detail-top .detail-left{width:100%;}
	.case-detail .detail-top .detail-right{padding-top:0;}
	.pdf-frame{padding:10px;}
	.pdf-frame .pdf-view{height:64vh;min-height:420px;}
	.case-detail .detail-nav{flex-direction:column;align-items:flex-start;gap:24px;}
	.case-detail .nav-cost{flex-direction:column;align-items:flex-start;gap:16px;}
	.other-cases h2{margin-bottom:36px;}
	.other-cases .cases-row{flex-direction:column;}
	.other-cases .cases-list .item.small{width:100%;margin:0 0 40px;}
}