/* Customer Modern FULL V5 - based on well-known (8) native frontend mechanics
   Frontend only. Keeps existing PHP/JS logic and page structure while upgrading the full customer UI. */
:root{
  --c-accent:var(--primary-color,#c6007e);
  --c-accent-2:var(--primary-hover,#e12498);
  --c-ink:#111827;
  --c-text:#293142;
  --c-muted:#727c8d;
  --c-line:#e3e8ef;
  --c-soft:#f7f9fc;
  --c-green:#149447;
  --c-blue:#2563eb;
  --c-violet:#7c3aed;
  --c-orange:#f59e0b;
  --c-red:#dc3545;
  --c-radius:18px;
  --c-shadow:0 16px 46px rgba(20,29,48,.085);
  --c-shadow-sm:0 8px 24px rgba(20,29,48,.07);
}
html{background:#f7f9fc}
body.customer-ui{
  color:var(--c-text)!important;
  font-family:"Roboto",Arial,sans-serif!important;
  font-weight:500!important;
  background:
    radial-gradient(circle at 4% 2%,rgba(var(--primary-rgb,198,0,126),.075),transparent 25rem),
    radial-gradient(circle at 96% 12%,rgba(99,102,241,.075),transparent 25rem),
    linear-gradient(180deg,#fff 0,#fbfcff 520px,#f8f9fc 100%)!important;
  overflow-x:hidden;
}
body.customer-ui:before,
body.customer-ui:after{
  content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.18
}
body.customer-ui:before{width:340px;height:340px;background:var(--c-accent);left:-180px;top:25vh;animation:cFloatGlow 13s ease-in-out infinite alternate}
body.customer-ui:after{width:300px;height:300px;background:#6366f1;right:-170px;top:52vh;animation:cFloatGlow 15s -4s ease-in-out infinite alternate-reverse}

/* HEADER / NAV */
.customer-ui .header-m1{
  min-height:76px!important;background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(224,228,236,.86)!important;
  box-shadow:0 8px 28px rgba(28,37,58,.065)!important;backdrop-filter:blur(18px) saturate(160%);
}
.customer-ui .header-m1>.container{min-height:76px!important}
.customer-ui .header-logo img{max-height:44px!important;transition:transform .25s ease,filter .25s ease}
.customer-ui .header-logo:hover img{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 7px 10px rgba(var(--primary-rgb,198,0,126),.16))}
.customer-ui .header-navigation>ul>li{position:relative}
.customer-ui .header-navigation>ul>li>a{
  min-height:44px!important;display:flex!important;align-items:center!important;padding:0 13px!important;
  color:#283142!important;font-size:14px!important;font-weight:800!important;border-radius:12px!important;
  transition:.2s ease!important;position:relative;overflow:hidden;
}
.customer-ui .header-navigation>ul>li>a:after{
  content:"";position:absolute;left:50%;right:50%;bottom:3px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-violet));transition:.2s ease
}
.customer-ui .header-navigation>ul>li>a:hover,
.customer-ui .header-navigation>ul>li>a.customer-nav-active{color:var(--c-accent)!important;background:rgba(var(--primary-rgb,198,0,126),.065)!important}
.customer-ui .header-navigation>ul>li>a:hover:after,
.customer-ui .header-navigation>ul>li>a.customer-nav-active:after{left:16px;right:16px}
.customer-ui .header-login>ul{display:flex!important;align-items:center!important;gap:8px!important}
.customer-ui .header-login>ul>li{
  padding:9px 12px!important;border:1px solid #e5e9ef;border-radius:12px;background:#fff;
  font-size:13px!important;font-weight:700!important;box-shadow:0 4px 13px rgba(24,32,48,.035)
}
.customer-ui .header-login>ul>li:first-child{background:linear-gradient(180deg,#f4fff7,#edfaf1);border-color:#d7eddd}
.customer-ui .header-login>ul>li:first-child i,.customer-ui .header-login b{color:var(--c-green)!important}
.customer-ui .header-login>ul>li>ul{
  top:calc(100% + 9px)!important;min-width:255px!important;padding:8px!important;border:1px solid var(--c-line)!important;
  border-radius:16px!important;background:#fff!important;box-shadow:0 22px 55px rgba(17,24,39,.17)!important;overflow:hidden
}
.customer-ui .header-login>ul>li>ul:before{content:"";position:absolute;right:27px;top:-7px;width:13px;height:13px;background:#fff;border-left:1px solid var(--c-line);border-top:1px solid var(--c-line);transform:rotate(45deg)}
.customer-ui .header-login>ul>li>ul li a{padding:9px 10px!important;border-radius:9px!important;font-weight:700!important;color:#384152!important;transition:.16s ease!important}
.customer-ui .header-login>ul>li>ul li a:hover{padding-left:14px!important;color:var(--c-accent)!important;background:#fff2f9!important}
.customer-ui .header-hamburger{border-radius:11px!important}

/* PAGE BREADCRUMB AS VISUAL BAND */
.customer-ui .section-breadcrumb{
  position:relative;overflow:hidden;padding:13px 0!important;
  background:
    radial-gradient(circle at 88% 50%,rgba(var(--primary-rgb,198,0,126),.08),transparent 180px),
    linear-gradient(110deg,#fbfcff,#f7f6ff 55%,#fff8fc)!important;
  border-bottom:1px solid #edf0f4!important;
}
.customer-ui .section-breadcrumb:before{
  content:"";position:absolute;right:7%;top:-34px;width:140px;height:140px;border-radius:36px;
  border:1px solid rgba(var(--primary-rgb,198,0,126),.10);transform:rotate(27deg);
  box-shadow:0 0 0 22px rgba(124,58,237,.018),0 0 0 45px rgba(var(--primary-rgb,198,0,126),.012)
}
.customer-ui .section-breadcrumb .breadcrumb{position:relative;z-index:1;font-size:12px!important;font-weight:700!important}
.customer-ui .section-breadcrumb .breadcrumb-item a{color:#586274!important}.customer-ui .section-breadcrumb .breadcrumb-item:last-child{color:var(--c-accent)!important;font-weight:800!important}
.customer-ui .section-gap{padding-top:30px!important;padding-bottom:30px!important}
.customer-ui .container{position:relative}

/* PAGE TITLES */
.customer-ui .description{position:relative}
.customer-ui .description .title,.customer-ui .description .sub-title,.customer-ui .heading-m1 .title{
  color:var(--c-ink)!important;font-weight:900!important;letter-spacing:-.45px!important;line-height:1.2!important
}
.customer-ui .description .title{font-size:27px!important}.customer-ui .description .sub-title{font-size:21px!important}.customer-ui .heading-m1 .title{font-size:21px!important}
.customer-ui .description .title:not(.text-center):before,.customer-ui .description .sub-title:before,.customer-ui .heading-m1 .title:before{
  content:"";display:inline-block;width:8px;height:24px;margin-right:10px;border-radius:10px;vertical-align:-4px;
  background:linear-gradient(180deg,var(--c-accent),var(--c-violet));box-shadow:0 5px 12px rgba(var(--primary-rgb,198,0,126),.17)
}
.customer-ui .description .title.text-center:after{
  content:"";display:block;width:72px;height:4px;margin:10px auto 0;border-radius:999px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-violet),#3b82f6);box-shadow:0 4px 12px rgba(var(--primary-rgb,198,0,126),.15)
}
.customer-ui .text-muted{color:var(--c-muted)!important}

/* COMMON CARDS / FORMS */
.customer-ui .form-m1,
.customer-ui .information-inner>.card,
.customer-ui .card.rounded-sm,
.customer-ui .section-sidebar,
.customer-ui .tabs-m1{
  border:1px solid rgba(225,230,238,.96)!important;border-radius:var(--c-radius)!important;
  background:rgba(255,255,255,.97)!important;box-shadow:var(--c-shadow)!important;
}
.customer-ui .form-m1{position:relative;padding:22px!important;overflow:hidden}
.customer-ui .form-m1:before,
.customer-ui .information-inner>.card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-violet),#3b82f6,#22c55e,var(--c-accent));background-size:230% 100%;animation:cGradient 8s linear infinite
}
.customer-ui .card{border-color:var(--c-line)!important;border-radius:15px!important;box-shadow:var(--c-shadow-sm);transition:.2s ease}
.customer-ui .card:hover{box-shadow:0 14px 34px rgba(20,29,48,.10)}
.customer-ui .card-header{padding:18px 20px!important}.customer-ui .card-body{padding:20px!important}
.customer-ui label,.customer-ui .font-weight-bold,.customer-ui strong{font-weight:800!important}
.customer-ui .col-form-label{color:#303949!important;font-weight:800!important}
.customer-ui .form-control,
.customer-ui .select2-container--default .select2-selection--single{
  min-height:46px!important;border:1px solid #d7dee8!important;border-radius:11px!important;background:#fff!important;
  color:#1e2633!important;font-size:14px!important;font-weight:650!important;box-shadow:0 2px 5px rgba(17,24,39,.018)!important;transition:.18s ease!important
}
.customer-ui textarea.form-control{padding-top:11px!important;padding-bottom:11px!important}
.customer-ui .form-control::placeholder{color:#98a3b4!important;font-weight:500!important}
.customer-ui .form-control:hover{border-color:#bec8d7!important;box-shadow:0 4px 12px rgba(31,41,55,.04)!important}
.customer-ui .form-control:focus{
  border-color:var(--c-accent)!important;box-shadow:0 0 0 4px rgba(var(--primary-rgb,198,0,126),.085),0 7px 16px rgba(31,41,55,.045)!important;transform:translateY(-1px)
}
.customer-ui .form-group{margin-bottom:16px!important}

/* BUTTONS */
.customer-ui .btn{
  min-height:40px;border-radius:10px!important;font-weight:850!important;letter-spacing:.05px;transition:.18s ease!important;position:relative;overflow:hidden
}
.customer-ui .btn:hover{transform:translateY(-2px);filter:saturate(1.04)}.customer-ui .btn:active{transform:translateY(0)}
.customer-ui .btn-theme_secondary,
.customer-ui .btn-primary{
  color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,var(--c-accent),var(--c-violet))!important;
  box-shadow:0 10px 24px rgba(var(--primary-rgb,198,0,126),.20)!important
}
.customer-ui .btn-success{border-color:transparent!important;background:linear-gradient(135deg,#159a43,#29bd59)!important;box-shadow:0 9px 22px rgba(21,154,67,.17)!important}
.customer-ui .btn-warning{border-color:transparent!important;background:linear-gradient(135deg,#f59e0b,#fb923c)!important;color:#fff!important;box-shadow:0 9px 22px rgba(245,158,11,.17)!important}
.customer-ui .btn-info{border-color:transparent!important;background:linear-gradient(135deg,#258bd2,#27b0d3)!important;color:#fff!important}
.customer-ui .btn-danger{border-color:transparent!important;background:linear-gradient(135deg,#dc3545,#ef5b67)!important}
.customer-ui .btn-theme_secondary:after,.customer-ui .btn-success:after,.customer-ui .btn-primary:after,.customer-ui .btn-warning:after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,20%) var(--my,0%),rgba(255,255,255,.35),transparent 35%);opacity:0;transition:.18s ease;pointer-events:none
}
.customer-ui .btn-theme_secondary:hover:after,.customer-ui .btn-success:hover:after,.customer-ui .btn-primary:hover:after,.customer-ui .btn-warning:hover:after{opacity:1}
.customer-ui .btn-outline-primary,.customer-ui .btn-outline-success,.customer-ui .btn-outline-danger,.customer-ui .btn-outline-secondary{background:#fff!important}

/* ALERTS */
.customer-ui .alert,.customer-ui .alert-custom{
  border-radius:13px!important;border-width:1px!important;font-weight:600!important;line-height:1.55!important;box-shadow:0 5px 15px rgba(31,41,55,.035)
}
.customer-ui .alert-warning{background:linear-gradient(180deg,#fffaf0,#fff6e3)!important;border-color:#f3dfab!important;color:#825d13!important}
.customer-ui .alert-info{background:linear-gradient(180deg,#f2f8ff,#edf6ff)!important;border-color:#d6e6f7!important}
.customer-ui .alert-danger{background:linear-gradient(180deg,#fff5f5,#fff0f1)!important;border-color:#f0d0d3!important}
.customer-ui .alert-success{background:linear-gradient(180deg,#f3fcf5,#edf9f0)!important;border-color:#d4ead9!important}

/* TABLES */
.customer-ui .table-responsive{
  border:1px solid var(--c-line);border-radius:15px!important;background:#fff;box-shadow:0 7px 22px rgba(20,29,48,.045);overflow:auto
}
.customer-ui .table{margin-bottom:0!important;color:#344052!important}
.customer-ui .table th{
  border-color:#dde3eb!important;background:linear-gradient(180deg,#fbfcfe,#f5f7fa)!important;color:#202938!important;
  font-weight:900!important;padding:12px 10px!important;vertical-align:middle!important
}
.customer-ui .table td{border-color:#e2e7ee!important;padding:11px 10px!important;font-weight:600!important;vertical-align:middle!important}
.customer-ui .table-striped tbody tr:nth-of-type(odd){background:#fbfcfd!important}
.customer-ui .table-hover tbody tr{transition:.15s ease}.customer-ui .table-hover tbody tr:hover{background:#f9f7ff!important;box-shadow:inset 3px 0 0 var(--c-accent)}
.customer-ui .table .text-success{color:var(--c-green)!important;font-weight:850!important}
.customer-ui .badge,.customer-ui .badge-module{padding:6px 9px!important;border-radius:999px!important;font-weight:850!important}

/* HOME / SLIDER */
.customer-ui.customer-page-home .section-banner{padding-top:20px!important}
.customer-ui .section-banner .swiper{border-radius:24px!important;overflow:hidden!important;box-shadow:0 19px 52px rgba(20,29,48,.13)!important}
.customer-ui .section-banner .swiper-slide{position:relative;overflow:hidden}
.customer-ui .section-banner .swiper-slide:after{content:"";position:absolute;width:310px;height:310px;right:-80px;top:-150px;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 0 44px rgba(255,255,255,.06),0 0 0 88px rgba(255,255,255,.03)}
.customer-ui .section-banner_title{font-size:38px!important;font-weight:900!important;letter-spacing:-.8px!important;text-shadow:0 3px 18px rgba(0,0,0,.08)}
.customer-ui .section-banner_desc{font-size:16px!important;font-weight:600!important;line-height:1.65!important}
.customer-ui .section-banner_image img{filter:drop-shadow(0 18px 26px rgba(0,0,0,.16));animation:cFloat 5s ease-in-out infinite}
.customer-ui .slide-button-prev,.customer-ui .slide-button-next{border-radius:50%!important;backdrop-filter:blur(10px);box-shadow:0 7px 20px rgba(0,0,0,.12)}

/* CHARGING FULL */
.customer-ui .charging-hero{border-radius:24px!important;box-shadow:0 20px 54px rgba(21,30,48,.10)!important}
.customer-ui .charging-hero-title{font-weight:950!important;letter-spacing:-.8px!important}
.customer-ui .charging-main-form{border-radius:20px!important;box-shadow:0 18px 46px rgba(20,29,48,.09)!important}
.customer-ui .charging-entry-row .form-control{min-height:49px!important}
.customer-ui .charging-row-button{min-height:49px!important}
.customer-ui #NapTheAuto{min-height:50px!important;font-size:16px!important;padding-left:25px!important;padding-right:25px!important}
.customer-ui .tabs-m1{border-radius:20px!important;padding:20px!important}
.customer-ui .tabs-m1 .nav-tabs .nav-link{min-height:39px!important;border-radius:10px!important;font-weight:800!important;box-shadow:0 4px 10px rgba(31,41,55,.035)}

/* USER PROFILE */
.customer-ui .information-inner>.card{position:relative;overflow:hidden}
.customer-ui .information-list>.row{
  margin-left:0!important;margin-right:0!important;padding:13px 14px!important;border:1px solid #edf0f4!important;border-radius:11px!important;background:#fbfcfe!important;transition:.16s ease
}
.customer-ui .information-list>.row:hover{background:#fff8fc!important;border-color:#f0d4e5!important;transform:translateX(2px)}
.customer-ui .information-list>.row+ .row{margin-top:8px!important}
.customer-ui .information-list b{color:#202938!important;font-weight:850!important}
.customer-ui .information-inner .mt-5.pt-4.border-top{border-top:1px solid #e7ebf1!important;margin-top:22px!important;padding-top:17px!important}

/* SECURITY */
.customer-ui.customer-page-twofactor .table td,
.customer-ui[class*="customer-page-twofactor"] .table td,
.customer-ui[class*="customer-page-security"] .table td{padding-top:16px!important;padding-bottom:16px!important}
.customer-ui .table td>img{filter:drop-shadow(0 7px 12px rgba(31,41,55,.11))}
.customer-ui .qrcode img{border-radius:15px;box-shadow:0 10px 25px rgba(31,41,55,.10);border:8px solid #fff}

/* BANK / WALLET / MERCHANT */
.customer-ui[class*="customer-page-wallet"] .form-m1,
.customer-ui[class*="customer-page-localbank"] .form-m1,
.customer-ui[class*="customer-page-merchant"] .form-m1{background:linear-gradient(180deg,#fff,#fcfdff)!important}
.customer-ui[class*="customer-page-wallet"] .text-success b{font-size:16px!important}
.customer-ui[class*="customer-page-merchant"] .heading-m1{margin-top:8px}
.customer-ui[class*="customer-page-merchant"] .form-m1 .row{align-items:center}
.customer-ui .codebox, .customer-ui pre{border-radius:12px!important;background:#111827!important;color:#e5eefb!important;border:1px solid #263247!important;padding:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* SOFTCARD STORE */
.customer-ui .card-product{
  min-height:104px!important;border:1px solid #e3e7ed!important;border-radius:15px!important;background:#fff!important;
  box-shadow:0 8px 20px rgba(20,29,48,.06)!important;transition:.2s ease!important;overflow:hidden!important
}
.customer-ui .card-product:hover,.customer-ui .card-product.active{transform:translateY(-4px)!important;border-color:rgba(var(--primary-rgb,198,0,126),.35)!important;box-shadow:0 15px 32px rgba(var(--primary-rgb,198,0,126),.13)!important}
.customer-ui .card-product .card-image{padding:14px!important}
.customer-ui .card-product .card-image img{max-height:58px;transition:.2s ease;filter:drop-shadow(0 7px 10px rgba(0,0,0,.07))}
.customer-ui .card-product:hover img{transform:scale(1.06)}
.customer-ui .card-price{
  min-height:105px!important;border-radius:15px!important;border:1px solid #e3e7ed!important;background:linear-gradient(145deg,#fff,#f8f9fc)!important;
  box-shadow:0 7px 19px rgba(20,29,48,.055)!important;transition:.2s ease!important;color:#263042!important
}
.customer-ui .card-price:hover,.customer-ui .card-price.active{transform:translateY(-3px);border-color:transparent!important;background:linear-gradient(135deg,var(--c-accent),var(--c-violet))!important;color:#fff!important;box-shadow:0 14px 30px rgba(var(--primary-rgb,198,0,126),.20)!important}
.customer-ui .card-price .text{font-weight:850!important}.customer-ui .card-price-value{font-weight:900!important;color:var(--c-green)!important}
.customer-ui .card-price:hover .card-price-value,.customer-ui .card-price.active .card-price-value{color:#fff!important}

/* RECHARGE / TOPUP */
.customer-ui[class*="customer-page-recharge"] .select-recharge{min-height:48px!important}
.customer-ui[class*="customer-page-recharge"] #form-expandCard_TopUp>.row>div{margin-bottom:10px}
.customer-ui[class*="customer-page-recharge"] #thanhtoan{min-height:48px!important;font-size:15px!important}

/* ARTICLES */
.customer-ui .article-item{
  height:100%;border:1px solid #e4e8ee!important;border-radius:17px!important;background:#fff!important;overflow:hidden!important;
  box-shadow:0 9px 26px rgba(20,29,48,.065)!important;transition:.22s ease!important
}
.customer-ui .article-item:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(20,29,48,.11)!important}
.customer-ui .article-item_header{overflow:hidden}.customer-ui .article-item_header img{transition:.35s ease!important}.customer-ui .article-item:hover .article-item_header img{transform:scale(1.055)}
.customer-ui .article-item_body{padding:15px!important}.customer-ui .article-item_title,.customer-ui .article-item_title a{font-weight:850!important;color:#1c2432!important}
.customer-ui .article-inner_title h1{font-size:32px!important;font-weight:950!important;letter-spacing:-.7px;color:var(--c-ink)!important}
.customer-ui .article-inner_desc{font-size:15px!important;line-height:1.8!important;color:#394355!important}
.customer-ui .section-sidebar{padding:16px!important}.customer-ui .section-sidebar_title{font-weight:900!important;color:#1c2432!important}
.customer-ui .section-sidebar_list__item{padding:10px 0!important;border-bottom:1px solid #edf0f4!important}
.customer-ui .section-sidebar_list__item img{border-radius:10px!important}

/* LOGIN / REGISTER / PASSWORD */
.customer-ui[class*="customer-page-account-login"] .section-gap>.container,
.customer-ui[class*="customer-page-account-register"] .section-gap>.container,
.customer-ui[class*="customer-page-account-reset-password"] .section-gap>.container{
  position:relative
}
.customer-ui[class*="customer-page-account-login"] .section-gap>.container:after,
.customer-ui[class*="customer-page-account-register"] .section-gap>.container:after{
  content:"\f2bd";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:6%;top:25px;
  width:180px;height:180px;border-radius:50%;display:grid;place-items:center;font-size:82px;color:rgba(var(--primary-rgb,198,0,126),.10);
  background:radial-gradient(circle,rgba(var(--primary-rgb,198,0,126),.06),transparent 70%);pointer-events:none
}
.customer-ui[class*="customer-page-account-login"] .form-m1,
.customer-ui[class*="customer-page-account-register"] .form-m1{max-width:680px;min-height:270px}
.customer-ui[class*="customer-page-account-login"] .form-check-label{font-weight:650!important}

/* AFFILIATE */
.customer-ui[class*="customer-page-affiliate"] .table-module:first-of-type td,
.customer-ui[class*="customer-page-affiliate"] .table-module:first-of-type th{font-size:14px!important}
.customer-ui[class*="customer-page-affiliate"] a[href*="register?ref"]{color:var(--c-blue)!important;font-weight:800!important}

/* FOOTER */
.customer-ui .footer-m1,
.customer-ui footer{
  position:relative;background:
    radial-gradient(circle at 10% 0,rgba(var(--primary-rgb,198,0,126),.085),transparent 250px),
    linear-gradient(180deg,#fff,#f8f9fc)!important;border-top:1px solid #e6e9ef!important
}
.customer-ui .footer-item_title{font-weight:900!important;color:#202938!important;letter-spacing:-.2px}
.customer-ui .footer-item_list a,.customer-ui .footer-item_info{font-weight:600!important;color:#667080!important}
.customer-ui .footer-item_list a:hover{color:var(--c-accent)!important}
.customer-ui .footer-item_info__social a{width:36px!important;height:36px!important;border-radius:10px!important;background:#fff!important;border:1px solid #e2e7ed!important;box-shadow:0 5px 13px rgba(31,41,55,.05)!important;transition:.18s ease!important}
.customer-ui .footer-item_info__social a:hover{transform:translateY(-3px);color:var(--c-accent)!important;border-color:#f0cada!important}
.customer-ui .footer-bottom{background:rgba(248,249,252,.94)!important;border-top:1px solid #e5e9ef!important}

/* MOBILE BOTTOM NAV */
@media(max-width:768px),(max-width:1024px) and (orientation:portrait){
  .customer-ui .mobile-bottom-nav{min-height:68px!important;border-top:1px solid #e0e5eb!important;box-shadow:0 -8px 24px rgba(25,33,49,.09)!important;backdrop-filter:blur(14px)}
  .customer-ui .mobile-bottom-nav a{font-weight:750!important;transition:.16s ease!important}
  .customer-ui .mobile-bottom-nav a i{font-size:21px!important;padding:5px 9px;border-radius:10px;transition:.16s ease!important}
  .customer-ui .mobile-bottom-nav a.active i{background:rgba(var(--primary-rgb,198,0,126),.085)!important;transform:translateY(-2px)}
}

/* MOTION */
.customer-reveal{opacity:0;transform:translateY(12px);transition:opacity .46s ease var(--reveal-delay,0ms),transform .46s ease var(--reveal-delay,0ms)}
.customer-reveal.is-visible{opacity:1;transform:none}
@keyframes cGradient{to{background-position:230% 0}}
@keyframes cFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes cFloatGlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(42px,-28px,0) scale(1.14)}}

/* RESPONSIVE */
@media(max-width:991.98px){
  .customer-ui .header-m1{min-height:66px!important}.customer-ui .header-m1>.container{min-height:66px!important}
  .customer-ui .description .title{font-size:24px!important}.customer-ui .description .sub-title{font-size:20px!important}
  .customer-ui .section-banner_title{font-size:30px!important}
  .customer-ui .form-m1{padding:17px!important}
}
@media(max-width:767.98px){
  body.customer-ui{font-weight:500!important}
  .customer-ui .section-breadcrumb{padding:10px 0!important}
  .customer-ui .section-gap{padding-top:21px!important;padding-bottom:21px!important}
  .customer-ui .description .title{font-size:21px!important}.customer-ui .description .sub-title{font-size:18px!important}
  .customer-ui .description .title:not(.text-center):before,.customer-ui .description .sub-title:before,.customer-ui .heading-m1 .title:before{height:20px;width:6px;margin-right:7px;vertical-align:-3px}
  .customer-ui .form-m1{padding:14px!important;border-radius:14px!important}
  .customer-ui .form-control{min-height:44px!important}
  .customer-ui .table th,.customer-ui .table td{padding:10px 8px!important}
  .customer-ui .article-inner_title h1{font-size:25px!important}
  .customer-ui[class*="customer-page-account-login"] .section-gap>.container:after,.customer-ui[class*="customer-page-account-register"] .section-gap>.container:after{display:none}
  .customer-ui .section-banner .swiper{border-radius:16px!important}
}
@media(prefers-reduced-motion:reduce){
  /* Chỉ tắt hiệu ứng reveal do giao diện V5+ tự thêm.
     KHÔNG can thiệp animation/keyframes trong HTML thông báo do Admin nhập. */
  .customer-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* Route visual identities: decorative icon art without changing page controls/positions */
.customer-ui{--page-icon:"\f015";--page-tint:99,102,241}
.customer-ui.customer-page-doithecao{--page-icon:"\f362";--page-tint:198,0,126}
.customer-ui.customer-page-card,
.customer-ui[class*="customer-page-card-"]{--page-icon:"\f09d";--page-tint:124,58,237}
.customer-ui[class*="customer-page-recharge"]{--page-icon:"\f3cd";--page-tint:37,99,235}
.customer-ui[class*="customer-page-wallet-deposit"]{--page-icon:"\f0d6";--page-tint:21,154,67}
.customer-ui[class*="customer-page-wallet-withdraw"]{--page-icon:"\f53a";--page-tint:245,158,11}
.customer-ui[class*="customer-page-wallet-transfer"]{--page-icon:"\f1d8";--page-tint:99,102,241}
.customer-ui[class*="customer-page-wallet-list"],
.customer-ui[class*="customer-page-wallet-history"]{--page-icon:"\f555";--page-tint:16,185,129}
.customer-ui[class*="customer-page-account"]{--page-icon:"\f2bd";--page-tint:124,58,237}
.customer-ui[class*="customer-page-localbank"]{--page-icon:"\f19c";--page-tint:37,99,235}
.customer-ui[class*="customer-page-twofactor"],
.customer-ui[class*="customer-page-security"]{--page-icon:"\f3ed";--page-tint:139,92,246}
.customer-ui[class*="customer-page-merchant"]{--page-icon:"\f1e6";--page-tint:14,165,233}
.customer-ui[class*="customer-page-affiliate"]{--page-icon:"\f4d3";--page-tint:236,72,153}
.customer-ui[class*="customer-page-news"]{--page-icon:"\f1ea";--page-tint:245,158,11}
.customer-ui[class*="customer-page-bio"]{--page-icon:"\f2bb";--page-tint:168,85,247}
.customer-ui .section-breadcrumb:after{
  content:var(--page-icon);font-family:"Font Awesome 5 Free";font-weight:900;
  position:absolute;right:max(6%,20px);top:50%;transform:translateY(-50%) rotate(-8deg);
  width:68px;height:68px;display:grid;place-items:center;border-radius:20px;
  color:rgba(var(--page-tint),.24);font-size:32px;
  background:linear-gradient(145deg,rgba(var(--page-tint),.10),rgba(255,255,255,.72));
  border:1px solid rgba(var(--page-tint),.12);box-shadow:0 13px 30px rgba(var(--page-tint),.08);
  animation:cPageIcon 4.5s ease-in-out infinite
}
@keyframes cPageIcon{0%,100%{transform:translateY(-50%) rotate(-8deg)}50%{transform:translateY(calc(-50% - 5px)) rotate(-4deg)}}
@media(max-width:767.98px){.customer-ui .section-breadcrumb:after{width:46px;height:46px;right:10px;font-size:22px;border-radius:14px;opacity:.75}}


/* CUSTOMER UI V5 HOTFIX - preserve native menu/mobile/softcard/security mechanics - mobile balance, account menu, charging hero, softcard images, outline hover */

/* Desktop account dropdown: keep it attached to the account button, and support click-to-pin. */
@media (min-width:1025px){
  .customer-ui .header-login>ul>li{position:relative!important}
  .customer-ui .header-login>ul>li>ul{
    top:100%!important;
    margin-top:0!important;
    overflow:visible!important;
  }
  .customer-ui .header-login>ul>li>ul:after{
    content:"";
    position:absolute;
    left:0;right:0;top:-10px;height:10px;
    background:transparent;
  }
  .customer-ui .header-login>ul>li.customer-menu-open>ul{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
}

/* Mobile account drawer: restore the original solid drawer behaviour. */
@media screen and (max-width:1024px){
  .customer-ui .header-usermb .header-usermb_list{
    width:min(300px,86vw)!important;
    height:100%!important;
    background:#fff!important;
    box-shadow:10px 0 34px rgba(15,23,42,.18)!important;
    z-index:1000000!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .customer-ui .header-usermb .header-usermb_list>ul{
    min-height:100%!important;
    background:#fff!important;
  }
  .customer-ui .header-usermb .header-usermb_list>ul>li{
    background:#fff!important;
  }
  .customer-ui .header-usermb .header-usermb_list>ul>li.header-usermb_list__logo{
    padding:13px 10px!important;
    background:#fff!important;
    border-bottom:1px solid #e8ebf0!important;
  }
  .customer-ui .header-usermb .header-usermb_list>ul>li.header-usermb_list__title{
    background:linear-gradient(180deg,#f4fff7,#effaf2)!important;
    color:var(--c-green)!important;
    font-weight:850!important;
  }
  .customer-ui .header-usermb .header-usermb_list>ul>li>a{
    color:#202938!important;
    background:#fff!important;
    border-bottom:1px solid #edf0f4!important;
    padding:11px 12px!important;
    font-size:13px!important;
    font-weight:800!important;
  }
  .customer-ui .header-usermb .header-usermb_list>ul>li>a:active,
  .customer-ui .header-usermb .header-usermb_list>ul>li>a:hover{
    color:var(--c-accent)!important;
    background:#fff4fa!important;
  }
  .customer-ui .header-overlay{z-index:999999!important}
}

/* Restore the floating balance pill on phone / portrait tablet. */
@media screen and (max-width:768px), screen and (max-width:1024px) and (orientation:portrait){
  body.customer-ui .mobile-balance-box{
    position:fixed!important;
    left:12px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
    z-index:1000002!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:126px!important;
    max-width:178px!important;
    min-height:48px!important;
    padding:7px 13px!important;
    border-radius:999px!important;
    border:1px solid rgba(20,148,71,.19)!important;
    background:rgba(255,255,255,.97)!important;
    color:var(--c-green)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.17)!important;
    backdrop-filter:blur(10px)!important;
    text-decoration:none!important;
  }
  body.customer-ui .mobile-balance-box__label{
    color:var(--c-green)!important;
    font-size:11px!important;
    font-weight:850!important;
  }
  body.customer-ui .mobile-balance-box__money{
    color:var(--c-accent)!important;
    font-size:14px!important;
    font-weight:950!important;
    margin-top:2px!important;
    max-width:155px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* Charging intro: simpler visual so configured title/notice can never collide with decorative labels. */
.customer-ui .charging-hero{
  min-height:150px!important;
  padding:24px 28px!important;
}
.customer-ui .charging-hero-copy{max-width:760px!important}
.customer-ui .charging-hero-art-simple{
  width:190px!important;
  height:110px!important;
  flex:0 0 190px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.customer-ui .charging-hero-icon-ring{
  position:relative;
  width:92px;height:92px;border-radius:28px;
  display:grid;place-items:center;
  color:#fff;font-size:36px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-violet));
  box-shadow:0 18px 38px rgba(var(--primary-rgb,198,0,126),.22),inset 0 1px 0 rgba(255,255,255,.35);
  animation:cChargingIconFloat 4s ease-in-out infinite;
}
.customer-ui .charging-hero-icon-ring:before,
.customer-ui .charging-hero-icon-ring:after{
  content:"";position:absolute;border-radius:32px;inset:-11px;border:1px solid rgba(var(--primary-rgb,198,0,126),.16)
}
.customer-ui .charging-hero-icon-ring:after{inset:-23px;border-color:rgba(124,58,237,.09)}
.customer-ui .charging-hero-dot{position:absolute;width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,#d946ef,#7c3aed);box-shadow:0 7px 16px rgba(124,58,237,.18)}
.customer-ui .charging-hero-dot-a{right:16px;top:18px;transform:rotate(28deg)}
.customer-ui .charging-hero-dot-b{left:17px;bottom:15px;width:9px;height:9px;transform:rotate(45deg)}
.customer-ui .charging-hero-dot-c{right:30px;bottom:5px;width:7px;height:7px;background:#22c55e}
@keyframes cChargingIconFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(max-width:767.98px){
  .customer-ui .charging-hero{min-height:0!important;padding:18px!important}
  .customer-ui .charging-hero-art-simple{display:none!important}
  .customer-ui .charging-hero-title{font-size:22px!important;line-height:1.25!important}
  .customer-ui .charging-kicker{font-size:11px!important}
}

/* Softcard logos: show the whole logo instead of cropping half of it. */
.customer-ui .card-product .card-image{
  min-height:86px!important;
  background:#fff!important;
  display:block!important;
}
.customer-ui .card-product .card-image:before{
  padding-top:52%!important;
}
.customer-ui .card-product .card-image>img{
  object-fit:contain!important;
  object-position:center!important;
  padding:9px 10px!important;
  max-height:none!important;
  width:100%!important;
  height:100%!important;
}
.customer-ui .card-product:hover .card-image>img{transform:scale(1.035)!important}

/* Outline buttons: prevent white text on white background on hover (security activation included). */
.customer-ui .btn-outline-success{color:#159a43!important;border-color:#65c987!important;background:#fff!important}
.customer-ui .btn-outline-success:hover,.customer-ui .btn-outline-success:focus{
  color:#fff!important;background:linear-gradient(135deg,#159a43,#29bd59)!important;border-color:transparent!important;
}
.customer-ui .btn-outline-danger{color:#dc3545!important;border-color:#e59aa2!important;background:#fff!important}
.customer-ui .btn-outline-danger:hover,.customer-ui .btn-outline-danger:focus{
  color:#fff!important;background:linear-gradient(135deg,#dc3545,#ef5b67)!important;border-color:transparent!important;
}
.customer-ui .btn-outline-primary{color:#2563eb!important;border-color:#9dbcf5!important;background:#fff!important}
.customer-ui .btn-outline-primary:hover,.customer-ui .btn-outline-primary:focus{
  color:#fff!important;background:linear-gradient(135deg,#2563eb,#3b82f6)!important;border-color:transparent!important;
}
.customer-ui .btn-outline-secondary{color:#596273!important;border-color:#c6ccd5!important;background:#fff!important}
.customer-ui .btn-outline-secondary:hover,.customer-ui .btn-outline-secondary:focus{
  color:#fff!important;background:#677080!important;border-color:#677080!important;
}


/* V5 readability + interaction refinements */
.customer-ui .header-navigation>ul>li>a,
.customer-ui .header-login>ul>li,
.customer-ui .header-login>ul>li>a{font-weight:850!important}
.customer-ui .table-module th{font-weight:900!important}
.customer-ui .table-module td{font-weight:650!important}
.customer-ui .charging-field-label{letter-spacing:.01em}
.customer-ui .mobile-bottom-nav a{font-weight:800!important}
.customer-ui .mobile-bottom-nav a i{transition:transform .18s ease,color .18s ease}
.customer-ui .mobile-bottom-nav a:active i{transform:scale(.92)}
.customer-ui .header-usermb_account_btn{font-weight:850!important}
.customer-ui .header-usermb_list__title b{font-weight:950!important}
.customer-ui .btn-outline-success:hover *,
.customer-ui .btn-outline-danger:hover *,
.customer-ui .btn-outline-primary:hover *,
.customer-ui .btn-outline-secondary:hover *{color:inherit!important}


/* CUSTOMER UI FULL V6 - mobile header/drawers, compact charging intro, auth layout */

/* Desktop account menu: no hover gap + click pin stays available. */
@media (min-width:1025px){
  .customer-ui .header-user .header-login>ul>li:last-child{position:relative!important}
  .customer-ui .header-user .header-login>ul>li:last-child>ul{
    top:100%!important;margin-top:0!important;transform:translateY(0)!important;
    transition:opacity .16s ease,visibility .16s ease!important;
  }
  .customer-ui .header-user .header-login>ul>li:last-child>ul:after{
    content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:transparent;
  }
  .customer-ui .header-user .header-login>ul>li:last-child:hover>ul,
  .customer-ui .header-user .header-login>ul>li:last-child.customer-menu-open>ul{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
  }
}

/* Mobile: restore original floating balance on every phone/tablet width, not portrait-only. */
@media screen and (max-width:1024px){
  body.customer-ui .mobile-balance-box{
    position:fixed!important;left:10px!important;right:auto!important;top:auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;z-index:999997!important;
    display:flex!important;visibility:visible!important;opacity:1!important;
    min-width:122px!important;max-width:172px!important;min-height:47px!important;padding:7px 12px!important;
    border-radius:999px!important;background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(20,148,71,.18)!important;box-shadow:0 7px 22px rgba(15,23,42,.16)!important;
    align-items:center!important;justify-content:center!important;flex-direction:column!important;text-align:center!important;
  }
  body.customer-ui .mobile-balance-box__label{font-size:11px!important;font-weight:850!important;color:var(--c-green)!important;line-height:1.05!important}
  body.customer-ui .mobile-balance-box__money{font-size:14px!important;font-weight:950!important;color:var(--c-accent)!important;line-height:1.08!important;margin-top:3px!important}
  #header-m1.is-navigation .mobile-balance-box,#header-m1.is-usermb .mobile-balance-box{opacity:0!important;pointer-events:none!important}
}

/* Mobile hamburger navigation: solid readable drawer, never transparent over slider. */
@media screen and (max-width:1024px){
  .customer-ui #header-m1 .header-navigation{
    position:fixed!important;top:0!important;bottom:0!important;left:-310px!important;
    width:min(292px,86vw)!important;height:100dvh!important;background:#fff!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    z-index:1000002!important;overflow-y:auto!important;overflow-x:hidden!important;
    box-shadow:14px 0 38px rgba(15,23,42,.19)!important;transition:left .24s ease,opacity .2s ease,visibility .2s ease!important;
  }
  .customer-ui #header-m1.is-navigation .header-navigation{left:0!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .customer-ui #header-m1 .header-navigation>ul{display:flex!important;flex-direction:column!important;min-height:100%!important;background:#fff!important;padding:0 0 24px!important}
  .customer-ui #header-m1 .header-navigation>ul>li{display:block!important;width:100%!important;background:#fff!important;margin:0!important}
  .customer-ui #header-m1 .header-navigation>ul>li.navigation-logo{
    display:block!important;padding:15px 12px!important;text-align:center!important;border-bottom:1px solid #e9edf2!important;background:#fff!important
  }
  .customer-ui #header-m1 .header-navigation>ul>li.navigation-logo img{max-width:150px!important;max-height:48px!important;object-fit:contain!important}
  .customer-ui #header-m1 .header-navigation>ul>li>a{
    width:100%!important;min-height:46px!important;padding:0 16px!important;border-radius:0!important;
    border-bottom:1px solid #edf0f4!important;background:#fff!important;color:#202938!important;
    display:flex!important;align-items:center!important;text-transform:uppercase!important;font-size:13px!important;font-weight:850!important;
  }
  .customer-ui #header-m1 .header-navigation>ul>li>a:hover,
  .customer-ui #header-m1 .header-navigation>ul>li>a:active,
  .customer-ui #header-m1 .header-navigation>ul>li>a.customer-nav-active{
    color:var(--c-accent)!important;background:#fff3fa!important;transform:none!important;
  }
  .customer-ui #header-m1 .header-navigation>ul>li>a:after{display:none!important}
  .customer-ui #header-m1 .header-navigation>ul>li>span.sub-icon{
    top:0!important;right:0!important;width:44px!important;height:46px!important;padding:13px 0!important;text-align:center!important;
    color:#394253!important;background:#fff!important;border-left:1px solid #edf0f4!important;border-bottom:1px solid #edf0f4!important;z-index:2
  }
  .customer-ui #header-m1 .header-navigation>ul>li>ul{background:#fafbfc!important}
  .customer-ui #header-m1 .header-navigation>ul>li>ul>li>a{padding:11px 18px 11px 27px!important;background:#fafbfc!important;color:#485162!important;border-bottom:1px solid #edf0f4!important}
  .customer-ui #header-m1 .header-hamburger{z-index:1000004!important}
  .customer-ui #header-m1.is-navigation .header-hamburger{left:min(250px,calc(86vw - 42px))!important}
  .customer-ui #header-m1 .header-overlay{z-index:1000000!important;background:rgba(15,23,42,.42)!important;backdrop-filter:blur(2px)!important}
}

/* Mobile user-account drawer: same readable white treatment as original mechanics. */
@media screen and (max-width:1024px){
  .customer-ui #header-m1 .header-usermb .header-usermb_list{
    position:fixed!important;top:0!important;bottom:0!important;left:-310px!important;
    width:min(292px,86vw)!important;height:100dvh!important;background:#fff!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:1000002!important;
    overflow-y:auto!important;overflow-x:hidden!important;box-shadow:14px 0 38px rgba(15,23,42,.19)!important;
    transition:left .24s ease,opacity .2s ease,visibility .2s ease!important;
  }
  .customer-ui #header-m1.is-usermb .header-usermb .header-usermb_list{left:0!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list>ul{min-height:100%!important;background:#fff!important;padding-bottom:22px!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list>ul>li{display:block!important;width:100%!important;background:#fff!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list__logo{padding:14px 10px!important;background:#fff!important;border-bottom:1px solid #e8ecf1!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list__logo img{max-width:150px!important;max-height:48px!important;object-fit:contain!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list__title{padding:11px 13px!important;background:#f1fbf4!important;color:var(--c-green)!important;border-bottom:1px solid #dceee2!important}
  .customer-ui #header-m1 .header-usermb .header-usermb_list>ul>li>a{
    min-height:45px!important;padding:0 14px!important;display:flex!important;align-items:center!important;
    color:#202938!important;background:#fff!important;border-bottom:1px solid #edf0f4!important;
    font-size:13px!important;font-weight:800!important;text-transform:none!important;
  }
  .customer-ui #header-m1 .header-usermb .header-usermb_list>ul>li>a:hover,
  .customer-ui #header-m1 .header-usermb .header-usermb_list>ul>li>a:active{color:var(--c-accent)!important;background:#fff3fa!important}
  .customer-ui #header-m1 .header-usermb_account_btn{
    max-width:min(205px,47vw)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    background:#fff!important;border:2px solid var(--c-accent)!important;color:var(--c-accent)!important
  }
}

/* Compact, balanced charging intro: no giant empty artwork. */
.customer-ui .charging-page-intro{max-width:100%!important;margin-bottom:16px!important}
.customer-ui .charging-hero.charging-hero-compact{
  min-height:0!important;width:100%!important;padding:17px 20px!important;display:flex!important;align-items:center!important;
  justify-content:flex-start!important;gap:14px!important;border-radius:17px!important;background:linear-gradient(115deg,#fff,#fbf9ff 62%,#fff8fc)!important;
}
.customer-ui .charging-hero-compact:after{width:118px!important;height:118px!important;right:-44px!important;top:-56px!important}
.customer-ui .charging-hero-compact .charging-hero-mark{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:20px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-violet));box-shadow:0 10px 22px rgba(var(--primary-rgb,198,0,126),.18)
}
.customer-ui .charging-hero-compact .charging-hero-copy{max-width:none!important;min-width:0!important}
.customer-ui .charging-hero-compact .charging-kicker{margin:0 0 3px!important;padding:0!important;background:transparent!important;color:#4b5565!important;font-size:11px!important}
.customer-ui .charging-hero-compact .charging-hero-title{font-size:25px!important;line-height:1.18!important;margin:0!important;text-align:left!important}
.customer-ui .charging-hero-compact .charging-hero-subtitle{margin-top:5px!important;font-size:13px!important;line-height:1.45!important;max-width:900px!important}
@media(max-width:767.98px){
  .customer-ui .charging-hero.charging-hero-compact{padding:14px!important;gap:11px!important;border-radius:14px!important}
  .customer-ui .charging-hero-compact .charging-hero-mark{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:17px}
  .customer-ui .charging-hero-compact .charging-hero-title{font-size:19px!important;letter-spacing:-.35px!important}
  .customer-ui .charging-hero-compact .charging-hero-subtitle{font-size:12px!important;line-height:1.4!important}
  .customer-ui .charging-hero-compact .charging-kicker{font-size:10.5px!important}
}

/* Soft-card artwork should always be completely visible. */
.customer-ui .card-product .card-image{position:relative!important;overflow:hidden!important;background:#fff!important}
.customer-ui .card-product .card-image>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:8px 10px!important}

/* Auth pages: keep submit + Google inside card, move content slightly down, use modern Google icon. */
.customer-ui.customer-page-account-register .section-gap,
.customer-ui.customer-page-account-login .section-gap{padding-top:22px!important}
.customer-ui.customer-page-account-register .py-4,
.customer-ui.customer-page-account-login .py-4{padding-top:10px!important}
.customer-ui.customer-page-account-register .header-logo,
.customer-ui.customer-page-account-login .header-logo{transform:translateY(3px)}
.customer-ui.customer-page-account-register .form-m1,
.customer-ui.customer-page-account-login .form-m1{overflow:visible!important}
.customer-ui .account-auth-actions{margin-top:4px!important}
.customer-ui .google-g-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;background:#fff;border-radius:50%}
.customer-ui .google-g-icon svg{display:block;width:20px;height:20px}
.customer-ui[class*="customer-page-account"] a.btn-light.border[href*="account/google"]{
  min-height:43px!important;border-radius:10px!important;background:#fff!important;color:#2f3744!important;border:1px solid #dce1e8!important;
  box-shadow:0 5px 14px rgba(24,32,48,.06)!important;font-weight:800!important
}
.customer-ui[class*="customer-page-account"] a.btn-light.border[href*="account/google"]:hover{background:#f8f9fb!important;color:#202938!important;border-color:#cbd2dc!important;transform:translateY(-1px)!important}
@media(max-width:767.98px){
  .customer-ui.customer-page-account-register .section-gap,
  .customer-ui.customer-page-account-login .section-gap{padding-top:15px!important}
  .customer-ui.customer-page-account-register .py-4,
  .customer-ui.customer-page-account-login .py-4{padding-top:5px!important}
}

/* V6 auth finishing + header image sizing */
.customer-ui .header-logo img{object-fit:contain!important;object-position:center!important}
.customer-ui .account-login-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.customer-ui .account-forgot-link{font-size:12px;font-weight:750;color:#5f6b7b}
.customer-ui .account-forgot-link:hover{color:var(--c-accent)}
.customer-ui .account-google-button{justify-content:center!important;min-width:220px}
.customer-ui.customer-page-account-login .section-gap>.container:after,
.customer-ui.customer-page-account-register .section-gap>.container:after{
  width:118px!important;height:118px!important;font-size:54px!important;right:11%!important;top:42px!important;opacity:.8!important
}
@media(max-width:767.98px){
  .customer-ui .account-login-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .customer-ui .account-login-actions .btn{width:100%!important;margin:0!important}
  .customer-ui .account-google-button{width:100%!important;min-width:0!important}
}


/* CUSTOMER UI FULL V7 - viewport-level mobile balance */
.mobile-balance-viewport{display:none!important}
@media screen and (max-width:1024px){
  body.customer-ui .mobile-balance-viewport{
    display:flex!important;
    position:fixed!important;
    left:12px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
    z-index:1000001!important;
    min-width:122px!important;
    max-width:170px!important;
    min-height:47px!important;
    padding:7px 12px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.985)!important;
    border:1px solid rgba(20,148,71,.20)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.18)!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    text-decoration:none!important;
    line-height:1.05!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateZ(0)!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  body.customer-ui .mobile-balance-viewport .mobile-balance-box__label{
    display:block!important;margin:0!important;color:var(--c-green)!important;
    font-size:11px!important;line-height:1.05!important;font-weight:850!important;
  }
  body.customer-ui .mobile-balance-viewport .mobile-balance-box__money{
    display:block!important;margin:3px 0 0!important;max-width:150px!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    color:var(--c-accent)!important;font-size:14px!important;line-height:1.08!important;font-weight:950!important;
  }
  body.customer-ui .mobile-balance-viewport.mobile-balance-hidden-by-drawer{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(7px)!important;
  }

  /* Keep support/Telegram above the bottom nav and away from the balance pill. */
  body.customer-ui .gt24s-livechat-widget,
  body.customer-ui .support-contact-widget,
  body.customer-ui .floating-support,
  body.customer-ui .zalo-chat-widget{
    bottom:calc(94px + env(safe-area-inset-bottom))!important;
  }
}
@media screen and (max-width:420px){
  body.customer-ui .mobile-balance-viewport{
    left:8px!important;min-width:114px!important;max-width:150px!important;padding-left:10px!important;padding-right:10px!important;
  }
}

/* =========================================================
   V8 - Desktop header breathing room
   Keep mobile mechanics unchanged. Add balanced vertical
   space so logo/account buttons do not stick to viewport top.
   ========================================================= */
@media screen and (min-width:1025px){
  body.customer-ui #header-m1{
    padding-top:10px!important;
    padding-bottom:6px!important;
  }
  body.customer-ui #header-m1>.container{
    min-height:76px!important;
    align-items:center!important;
  }
  body.customer-ui #header-m1 .header-logo,
  body.customer-ui #header-m1 .header-user{
    align-self:center!important;
  }
  body.customer-ui #header-m1.is-scroll{
    padding-top:7px!important;
    padding-bottom:5px!important;
  }
}

/* V9: restore original centered charging title only */
.customer-ui .charging-page-intro .charging-original-title{
  text-align:center!important;
  font-weight:900!important;
  font-size:24px!important;
  line-height:1.25!important;
  letter-spacing:-.35px!important;
  margin:0!important;
}
@media(max-width:767px){
  .customer-ui .charging-page-intro .charging-original-title{font-size:20px!important;line-height:1.3!important}
}

/* =========================================================
   V11 - Charging telco logos configured from Admin
   ========================================================= */
.customer-ui .charging-telco-tab{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    padding-left:12px!important;
    padding-right:14px!important;
    white-space:nowrap!important;
}
.customer-ui .charging-telco-tab_logo{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:7px;
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    padding:3px;
    box-shadow:0 3px 8px rgba(15,23,42,.055);
}
.customer-ui .charging-telco-tab_logo img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:4px!important;
}
.customer-ui .charging-telco-tab_name{
    font-weight:850!important;
    line-height:1.1!important;
}
.customer-ui .charging-telco-tab.active .charging-telco-tab_logo{
    background:#fff!important;
    border-color:rgba(255,255,255,.75)!important;
}
@media(max-width:767.98px){
    .customer-ui .charging-telco-tab{gap:6px!important;padding-left:9px!important;padding-right:10px!important}
    .customer-ui .charging-telco-tab_logo{width:25px;height:25px;flex-basis:25px;padding:2px}
}


/* V13 - make uploaded telco images easier to see on customer fee tabs */
.customer-ui .charging-telco-tab_logo{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    padding:3px !important;
}
.customer-ui .charging-telco-tab_logo img{
    object-fit:contain !important;
    object-position:center !important;
}
@media(max-width:767.98px){
    .customer-ui .charging-telco-tab_logo{
        width:28px !important;
        height:28px !important;
        flex-basis:28px !important;
        padding:2px !important;
    }
}


/* V14 - homepage telco logo showcase, modern theme */
body.customer-ui .home-telco-showcase{
    margin-top:14px !important;
}
body.customer-ui .home-telco-showcase__head{
    margin-bottom:9px !important;
}
body.customer-ui .home-telco-showcase__eyebrow{
    color:#222936 !important;
    font-weight:900 !important;
}
body.customer-ui .home-telco-showcase__all{
    color:#c90083 !important;
}
body.customer-ui .home-telco-showcase__card{
    position:relative !important;
    overflow:hidden !important;
    min-width:118px !important;
    border-color:#e9e5ee !important;
    background:linear-gradient(180deg,#fff,#fcfbfd) !important;
    box-shadow:0 8px 22px rgba(29,34,47,.065) !important;
}
body.customer-ui .home-telco-showcase__card::after{
    content:"" !important;
    position:absolute !important;
    left:-55% !important;
    top:-60% !important;
    width:38% !important;
    height:220% !important;
    transform:rotate(22deg) !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent) !important;
    transition:left .55s ease !important;
    pointer-events:none !important;
}
body.customer-ui .home-telco-showcase__card:hover::after{
    left:135% !important;
}
body.customer-ui .home-telco-showcase__card:hover{
    transform:translateY(-3px) scale(1.015) !important;
    border-color:rgba(201,0,131,.24) !important;
    box-shadow:0 13px 28px rgba(29,34,47,.11),0 0 0 3px rgba(201,0,131,.035) !important;
}
body.customer-ui .home-telco-showcase__logo{
    width:46px !important;
    height:46px !important;
}
body.customer-ui .charging-telco-tab-home__logo{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
}
@media(max-width:767.98px){
    body.customer-ui .home-telco-showcase__card{min-width:100px !important}
    body.customer-ui .home-telco-showcase__logo{width:39px !important;height:39px !important}
    body.customer-ui .charging-telco-tab-home__logo{width:27px !important;height:27px !important;flex-basis:27px !important}
}


/* =========================================================
   V16 HOTFIX - UPLOAD ẢNH THẺ KHÔNG ĐƯỢC PHÓNG TO Ở TRANG CHỦ
   Self-contained: không phụ thuộc cache của style.css cũ.
   ========================================================= */

/* Dải thẻ ngay dưới slider */
body.customer-ui .home-telco-showcase__scroller{
    display:flex !important;
    align-items:stretch !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 2px 8px !important;
    -webkit-overflow-scrolling:touch !important;
}
body.customer-ui .home-telco-showcase__card{
    flex:0 0 112px !important;
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
    min-height:66px !important;
    max-height:78px !important;
    padding:7px 8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    overflow:hidden !important;
}
body.customer-ui .home-telco-showcase__logo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 32px !important;
    width:58px !important;
    height:32px !important;
    min-width:58px !important;
    min-height:32px !important;
    max-width:58px !important;
    max-height:32px !important;
    padding:1px !important;
    overflow:hidden !important;
    border-radius:6px !important;
    background:#fff !important;
}
body.customer-ui .home-telco-showcase__logo img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    scale:1 !important;
}
body.customer-ui .home-telco-showcase__name{
    display:block !important;
    width:100% !important;
    max-width:96px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
    line-height:1.15 !important;
    font-size:10.5px !important;
}

/* Ảnh trong tab Bảng phí đổi thẻ ở trang chủ */
body.customer-ui .tabs-m1 .nav-tabs .charging-telco-tab-home{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-height:38px !important;
    padding:5px 11px !important;
    overflow:hidden !important;
}
body.customer-ui .tabs-m1 .nav-tabs .charging-telco-tab-home__logo{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    max-width:28px !important;
    max-height:28px !important;
    padding:2px !important;
    overflow:hidden !important;
    border-radius:7px !important;
    background:#fff !important;
}
body.customer-ui .tabs-m1 .nav-tabs .charging-telco-tab-home__logo img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    scale:1 !important;
}

/* Ảnh trong tab Bảng phí ở trang Đổi thẻ */
body.customer-ui .charging-telco-tab_logo{
    overflow:hidden !important;
}
body.customer-ui .charging-telco-tab_logo img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    scale:1 !important;
}

@media(max-width:767.98px){
    body.customer-ui .home-telco-showcase__card{
        flex-basis:96px !important;
        width:96px !important;
        min-width:96px !important;
        max-width:96px !important;
        min-height:62px !important;
        max-height:70px !important;
    }
    body.customer-ui .home-telco-showcase__logo{
        width:52px !important;
        height:28px !important;
        min-width:52px !important;
        min-height:28px !important;
        max-width:52px !important;
        max-height:28px !important;
        flex-basis:28px !important;
    }
    body.customer-ui .tabs-m1 .nav-tabs .charging-telco-tab-home__logo{
        width:25px !important;
        height:25px !important;
        min-width:25px !important;
        min-height:25px !important;
        max-width:25px !important;
        max-height:25px !important;
        flex-basis:25px !important;
    }
}


/* V17 - modern theme polish for infinite telco marquee */
body.customer-ui .home-telco-showcase__scroller{
    border-radius:14px !important;
}
body.customer-ui .home-telco-showcase__track{
    padding:1px 0 !important;
}
body.customer-ui .home-telco-showcase__card{
    transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease !important;
}
body.customer-ui .home-telco-showcase__scroller:hover .home-telco-showcase__card{
    will-change:transform !important;
}


/* =========================================================
   V18 - FORCE RUN MARQUEE
   V16 từng đặt scroller display:flex với selector body.customer-ui.
   Ghi đè rõ ràng để track là phần tử overflow duy nhất.
   ========================================================= */
body.customer-ui .home-telco-showcase__scroller{
    display:block !important;
    align-items:initial !important;
    gap:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-behavior:auto !important;
    scrollbar-width:none !important;
}
body.customer-ui .home-telco-showcase__scroller::-webkit-scrollbar{
    display:none !important;
}
body.customer-ui .home-telco-showcase__track{
    display:flex !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    flex:none !important;
}
body.customer-ui .home-telco-showcase__group{
    display:flex !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    flex:0 0 auto !important;
}


/* =========================================================
   V20 - CUSTOM NOTICE HTML EFFECTS
   Không ép animation/transition của nội dung HTML Admin nhập.
   ========================================================= */
body.customer-ui .customer-custom-html-effects,
body.customer-ui .customer-custom-html-effects *,
body.customer-ui .customer-custom-html-effects *::before,
body.customer-ui .customer-custom-html-effects *::after{
    animation-play-state:running;
}