/*
Theme Name: 4One Editable Blocks
Theme URI: https://4onevn.com/
Author: 4One Entertainment
Description: Theme block dễ chỉnh sửa cho 4One Entertainment. Mỗi phần là block riêng: Header, Hero, Dịch vụ, Portfolio, Bảng giá, CTA, Footer.
Version: 3.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: fourone-blocks
*/

:root{
  --one-bg:#050B1D;
  --one-bg2:#081327;
  --one-cyan:#00E5FF;
  --one-pink:#FF4FCF;
  --one-purple:#7A5CFF;
  --one-muted:#B4C0D5;
  --one-border:rgba(255,255,255,.12);
}

html{scroll-behavior:smooth}
body{
  background:#050B1D;
  overflow-x:hidden;
}

.one-shell{
  background:
    radial-gradient(circle at 10% 12%,rgba(0,229,255,.18),transparent 26%),
    radial-gradient(circle at 88% 8%,rgba(255,79,207,.18),transparent 28%),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    #050B1D;
  background-size:auto,auto,80px 80px,80px 80px,auto;
  min-height:100vh;
}

.one-header{
  position:sticky;
  top:0;
  z-index:99;
  background:rgba(5,11,29,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.one-header .wp-block-navigation a{
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.one-brand-wrap{
  gap:14px!important;
}

.one-hero{
  min-height:820px;
  display:flex;
  align-items:center;
  padding-top:90px!important;
  padding-bottom:90px!important;
}

.one-eyebrow{
  letter-spacing:4px;
  font-weight:900;
  color:#8de7ff!important;
}

.one-title{
  font-size:clamp(58px,7vw,116px)!important;
  line-height:.9!important;
  letter-spacing:-4px;
  font-weight:900!important;
  background:linear-gradient(90deg,#efffff 0%,#6ff3ff 42%,#ff73c9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.one-subtitle{
  font-size:clamp(32px,3.4vw,56px)!important;
  line-height:1.1!important;
  letter-spacing:-1.5px;
  font-weight:900!important;
}

.one-desc{
  color:#B4C0D5!important;
  font-size:19px!important;
  line-height:1.8!important;
  font-weight:600;
}

.one-btn-primary .wp-block-button__link{
  background:linear-gradient(135deg,#7A5CFF,#FF4FCF)!important;
  color:#fff!important;
  border-radius:16px!important;
  padding:18px 34px!important;
  font-weight:900!important;
  box-shadow:0 18px 45px rgba(122,92,255,.28);
}

.one-btn-ghost .wp-block-button__link{
  background:rgba(255,255,255,.04)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:16px!important;
  padding:18px 34px!important;
  font-weight:900!important;
}

.one-live-card{
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.14);
  border-radius:36px;
  padding:28px!important;
  box-shadow:0 28px 100px rgba(0,0,0,.35);
}

.one-logo-screen{
  height:160px;
  border-radius:24px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.one-logo-screen img{
  max-width:250px!important;
  width:60%!important;
  object-fit:contain;
}

.one-live-dot{
  color:#ff6f8d!important;
  font-weight:900!important;
  font-size:18px!important;
}

.one-live-banner{
  min-height:240px;
  border-radius:26px;
  background:linear-gradient(135deg,#0B5DC9,#FF4FCF 70%,#4A1B9C);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
}

.one-mini-card{
  min-height:96px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.one-section-dark{
  background:linear-gradient(180deg,#081327,#050B1D);
}

.one-kicker{
  color:#8de7ff!important;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:900!important;
}

.one-section-title{
  font-size:clamp(36px,4vw,58px)!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:-2px;
}

.one-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  padding:34px!important;
  min-height:285px;
  transition:.25s ease;
}

.one-card:hover{
  transform:translateY(-8px);
  border-color:rgba(0,229,255,.55);
  box-shadow:0 0 45px rgba(0,229,255,.16);
}

.one-icon{
  width:62px;
  height:62px;
  border-radius:20px;
  background:linear-gradient(135deg,#00E5FF,#FF4FCF);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
}

.one-muted{
  color:#B4C0D5!important;
}

.one-stat{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  padding:36px!important;
}

.one-stat-number{
  font-size:clamp(42px,4vw,64px)!important;
  font-weight:900!important;
  background:linear-gradient(90deg,#fff,#73f4ff,#ff74c9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.one-shot{
  min-height:300px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,#132346,#122b54,#ff4fcf);
}

.one-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.9;
}

.one-price{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  padding:38px!important;
}

.one-price-featured{
  border-color:#FF4FCF;
  box-shadow:0 0 55px rgba(255,79,207,.16);
  transform:scale(1.04);
}

.one-money{
  font-size:44px!important;
  font-weight:900!important;
}

.one-cta{
  border-radius:40px;
  background:linear-gradient(135deg,#0b1c3d,#17235b,#c734a5);
  padding:76px 42px!important;
  overflow:hidden;
}

.one-footer{
  background:#030714;
  border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:900px){
  .one-hero{
    min-height:auto;
    padding-top:70px!important;
    padding-bottom:70px!important;
  }
  .one-price-featured{
    transform:none;
  }
}

@media(max-width:600px){
  .one-title{
    letter-spacing:-2px;
  }
  .one-live-card{
    padding:18px!important;
    border-radius:26px;
  }
  .one-live-banner{
    min-height:180px;
  }
}