/*
Theme Name: 4One Theme Pro V4 Full Editable
Theme URI: https://4onevn.com/
Author: 4One Entertainment
Description: Block Theme 4One có chỉnh kích thước khối, font size, spacing, width và thêm mẫu trang Login, Thu Chi, Dashboard, Báo cáo.
Version: 4.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: fourone-pro-v4
*/

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

html{scroll-behavior:smooth}
body{
  margin:0;
  background:#050B1D;
  color:#fff;
  overflow-x:hidden;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
}

body .is-layout-constrained > * + *{
  margin-block-start:var(--wp--style--block-gap, 24px);
}

a{text-decoration:none}

.one-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%,rgba(0,229,255,.16),transparent 25%),
    radial-gradient(circle at 88% 6%,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;
}

.one-header{
  position:sticky;
  top:0;
  z-index:999;
  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{
  color:#ECF5FF!important;
  font-weight:800!important;
  font-size:13px!important;
  text-transform:uppercase;
}

.one-header .wp-block-navigation a:hover{
  color:var(--one-cyan)!important;
}

.one-section{
  padding-top:clamp(72px,8vw,112px)!important;
  padding-bottom:clamp(72px,8vw,112px)!important;
}

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

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

.one-kicker,.one-eyebrow{
  color:#8DE7FF!important;
  letter-spacing:4px;
  font-weight:900!important;
  text-transform:uppercase;
  font-size:14px!important;
}

.one-title{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:clamp(56px,7.2vw,122px)!important;
  line-height:.88!important;
  letter-spacing:-5px;
  font-weight:900!important;
  margin:18px 0!important;
  background:linear-gradient(90deg,#F2FFFF 0%,#75F3FF 42%,#FF75CA 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.one-subtitle{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:clamp(32px,3.5vw,58px)!important;
  line-height:1.08!important;
  letter-spacing:-2px;
  font-weight:900!important;
  color:#fff!important;
}

.one-section-title{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:clamp(34px,4vw,60px)!important;
  line-height:1.05!important;
  letter-spacing:-2px;
  font-weight:900!important;
}

.one-page-title{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:clamp(46px,5vw,82px)!important;
  line-height:1!important;
  letter-spacing:-3px;
  font-weight:900!important;
  background:linear-gradient(90deg,#fff,#73F4FF,#FF74C9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.one-desc,.one-muted{
  color:var(--one-muted)!important;
  line-height:1.8!important;
  font-weight:600;
}

.one-desc{
  font-size:19px!important;
}

.one-btn-primary .wp-block-button__link{
  background:linear-gradient(135deg,#625DFF,#FF4FCF)!important;
  color:#fff!important;
  border-radius:17px!important;
  padding:18px 36px!important;
  font-weight:900!important;
  box-shadow:0 18px 48px rgba(122,92,255,.32);
  border:0!important;
}

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

.one-card,.one-price,.one-stat,.one-contact-box,.one-panel,.one-table-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  padding:34px!important;
}

.one-card{
  min-height:285px;
  transition:.25s ease;
}

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

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

.one-live-card{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.15);
  border-radius:38px;
  padding:30px!important;
  box-shadow:0 28px 110px rgba(0,0,0,.38);
}

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

.one-live-dot{
  color:#FF6F8D!important;
  font-weight:900!important;
}

.one-live-banner{
  min-height:240px;
  border-radius:26px;
  background:radial-gradient(circle at 20% 20%,rgba(0,229,255,.55),transparent 38%),linear-gradient(135deg,#0B5DC9,#D742B0 58%,#4A1B9C);
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}

.one-stat-number{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:clamp(44px,4vw,66px)!important;
  font-weight:900!important;
  line-height:1!important;
  background:linear-gradient(90deg,#fff,#73F4FF,#FF74C9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.one-shot{
  min-height:310px;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(135deg,#132346,#122B54,#FF4FCF);
}

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

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

.one-money{
  font-family:"Montserrat",system-ui,sans-serif!important;
  font-size:44px!important;
  font-weight:900!important;
}

.one-cta{
  border-radius:42px;
  background:radial-gradient(circle at 18% 12%,rgba(0,229,255,.30),transparent 30%),linear-gradient(135deg,#0B1C3D,#17235B,#C734A5);
  padding:78px 42px!important;
  border:1px solid rgba(255,255,255,.13);
}

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

/* Business app blocks */
.one-login-box{
  max-width:520px!important;
  margin:auto!important;
}

.one-form-field{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:16px 18px;
  color:#B4C0D5!important;
}

.one-table-card table{
  width:100%;
  border-collapse:collapse;
  color:#fff;
}

.one-table-card th,.one-table-card td{
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
}

.one-table-card th{
  color:#8DE7FF;
}

.one-income{
  color:#35F2A0!important;
}

.one-expense{
  color:#FF6F8D!important;
}

.one-warning{
  color:#FFD166!important;
}

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

@media(max-width:600px){
  .one-title{letter-spacing:-2px}
  .one-live-card{padding:18px!important;border-radius:28px}
  .one-section{padding-top:72px!important;padding-bottom:72px!important}
}