@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap');

:root {
  --primary-500: #EE4D2D;
  --primary-600: #D73211;
  --primary-400: #F26848;
  --primary-50: #FFF0ED;
  --secondary-500: #6366F1;
  --secondary-600: #4F46E5;
  --secondary-50: #EEF2FF;
  --neutral-900: #111827;
  --neutral-700: #374151;
  --neutral-500: #6B7280;
  --neutral-300: #D1D5DB;
  --neutral-200: #E5E7EB;
  --neutral-100: #F3F4F6;
  --neutral-50: #F9FAFB;
  --white: #FFFFFF;
  --success-500: #10B981;
  --success-50: #ECFDF5;
  --warning-500: #F59E0B;
  --warning-50: #FFFBEB;
  --error-500: #EF4444;
  --error-50: #FEF2F2;
  --info-500: #3B82F6;
  --info-50: #EFF6FF;
  --gradient-primary: linear-gradient(135deg, #EE4D2D 0%, #FF6B35 100%);
  --gradient-hero: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --navbar-h: 56px;
  --sidebar-w: 240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;color:var(--neutral-700);background:var(--neutral-50);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── Layout ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.container{padding:0 16px}}

/* ── Navbar ── */
.navbar{position:sticky;top:0;z-index:50;height:var(--navbar-h);background:var(--white);border-bottom:1px solid var(--neutral-200);box-shadow:var(--shadow-sm);display:flex;align-items:center}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1200px;margin:0 auto;padding:0 24px;gap:12px}
.navbar__logo{font-size:1.375rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}
.navbar__actions{display:flex;align-items:center;gap:8px}
.navbar__user{font-size:.8125rem;color:var(--neutral-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
@media(max-width:480px){.navbar__user{display:none}}

/* Hamburger */
.navbar__hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);flex-shrink:0}
.navbar__hamburger span{display:block;height:2px;background:var(--neutral-700);border-radius:2px;transition:all .25s}
.navbar__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.navbar__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1024px){.navbar__hamburger{display:flex}}

/* Sidebar overlay */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;backdrop-filter:blur(2px)}
@media(max-width:1024px){.sidebar-overlay.show{display:block}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:600;border:none;cursor:pointer;border-radius:var(--radius-md);transition:all .2s ease;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--gradient-primary);color:var(--white);padding:10px 20px;font-size:.9375rem}
.btn-primary:hover{opacity:.9;transform:scale(1.02);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:scale(.98)}
.btn-secondary{background:var(--white);color:var(--neutral-700);padding:10px 20px;font-size:.9375rem;border:1px solid var(--neutral-300)}
.btn-secondary:hover{background:var(--neutral-50);border-color:var(--neutral-400,#9CA3AF)}
.btn-ghost{background:transparent;color:var(--primary-500);padding:10px 20px;font-size:.9375rem}
.btn-ghost:hover{background:var(--primary-50)}
.btn-sm{padding:7px 14px;font-size:.8125rem}
.btn-lg{padding:14px 28px;font-size:1.0625rem}
.btn-danger{background:var(--error-500);color:var(--white);padding:7px 14px;font-size:.8125rem}
.btn-danger:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;font-size:1rem}

/* ── Form ── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.875rem;font-weight:500;color:var(--neutral-700)}
.form-input{background:var(--white);border:1px solid var(--neutral-300);border-radius:var(--radius-sm);padding:11px 14px;font-size:1rem;font-family:inherit;color:var(--neutral-900);transition:border .2s,box-shadow .2s;width:100%}
.form-input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-50)}
.form-input::placeholder{color:var(--neutral-500)}
.form-error{font-size:.875rem;color:var(--error-500)}

/* ── Cards ── */
.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.stat-card{padding:20px;border-left:4px solid var(--neutral-300)}
.stat-card--available{border-left-color:var(--success-500)}
.stat-card--pending{border-left-color:var(--warning-500)}
.stat-card--earned{border-left-color:var(--info-500)}
.stat-label{font-size:.8125rem;color:var(--neutral-500);margin-bottom:6px}
.stat-value{font-family:'JetBrains Mono',monospace;font-size:1.375rem;font-weight:700;color:var(--neutral-900)}
.stat-sub{font-size:.75rem;color:var(--neutral-500);margin-top:4px}

/* ── Status Badge ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:.75rem;font-weight:500}
.badge-pending{background:var(--warning-50);color:var(--warning-500)}
.badge-confirmed{background:var(--info-50);color:var(--info-500)}
.badge-completed{background:var(--success-50);color:var(--success-500)}
.badge-cancelled{background:var(--neutral-100);color:var(--neutral-500)}
.badge-rejected{background:var(--error-50);color:var(--error-500)}

/* ── Dashboard Layout ── */
.dashboard-layout{display:flex;min-height:calc(100vh - var(--navbar-h))}
.sidebar{width:var(--sidebar-w);background:var(--neutral-900);position:fixed;top:var(--navbar-h);left:0;height:calc(100vh - var(--navbar-h));overflow-y:auto;flex-shrink:0;z-index:40;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sidebar__logo{padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar__logo-text{font-size:1.125rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar__nav{padding:12px 0;display:flex;flex-direction:column;height:calc(100% - 65px)}
.sidebar__link{display:flex;align-items:center;gap:10px;padding:11px 16px;color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500;transition:all .15s}
.sidebar__link:hover{background:rgba(255,255,255,.06);color:var(--white)}
.sidebar__link.active{background:rgba(255,255,255,.1);border-left:3px solid var(--primary-500);color:var(--white)}
.sidebar__icon{font-size:1.05rem;width:18px;text-align:center;flex-shrink:0}
.sidebar__section-label{margin:12px 16px 4px;font-size:.625rem;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.3);text-transform:uppercase}
.sidebar__footer{margin-top:auto;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.dashboard-main{margin-left:var(--sidebar-w);flex:1;padding:28px}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.dashboard-title{font-size:1.5rem;font-weight:700;color:var(--neutral-900)}
.dashboard-greeting{font-size:.875rem;color:var(--neutral-500);margin-top:2px}

/* ── Stat Grid ── */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr;gap:12px}}

/* ── Table ── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--white)}
thead{background:var(--neutral-50)}
th{padding:11px 14px;text-align:left;font-size:.75rem;font-weight:600;color:var(--neutral-500);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--neutral-200);white-space:nowrap}
td{padding:14px;font-size:.9rem;border-bottom:1px solid var(--neutral-100);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--neutral-50)}
.money{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--neutral-900)}

/* ── Mobile card list (replaces table on small screens) ── */
.order-table-wrap{display:block}
.order-card-list{display:none;flex-direction:column;gap:10px}
.order-card{background:var(--white);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:8px}
.order-card__row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.order-card__label{font-size:.75rem;color:var(--neutral-500);flex-shrink:0}
.order-card__id{font-size:.875rem;font-weight:600;color:var(--neutral-900);word-break:break-all}
.order-card__divider{height:1px;background:var(--neutral-100);margin:2px 0}
@media(max-width:700px){
  .order-table-wrap{display:none}
  .order-card-list{display:flex}
}

/* ── Link List ── */
.link-list{display:flex;flex-direction:column;gap:10px}

/* ── Notice box ── */
.notice-box{background:#FFFBEB;border:1px solid #F59E0B;border-radius:var(--radius-md);padding:14px 16px;font-size:.875rem;color:#92400E;line-height:1.6}
.notice-box__title{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.notice-box ul{margin:0;padding-left:18px}
.notice-box li{margin-bottom:2px}

/* ── Link Card ── */
.link-card{background:var(--white);border:1px solid var(--neutral-200);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s}
.link-card:hover{box-shadow:var(--shadow-md)}
.link-original{font-size:.9rem;font-weight:500;color:var(--neutral-900);word-break:break-all}
.link-affiliate{font-size:.8rem;color:var(--secondary-500);word-break:break-all}
.link-meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px;gap:8px;flex-wrap:wrap}
.link-date{font-size:.75rem;color:var(--neutral-500)}
.link-actions{display:flex;gap:6px;flex-shrink:0}

/* ── Create Link Form ── */
.create-link-form{background:var(--white);border:1px solid var(--neutral-200);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}
.create-link-form .form-row{display:flex;gap:10px;align-items:flex-end}
.create-link-form .form-row .form-group{flex:1;min-width:0}
@media(max-width:560px){
  .create-link-form .form-row{flex-direction:column;gap:10px}
  .create-link-form .form-row .form-group{width:100%}
  .create-link-form .form-row .btn{width:100%;justify-content:center}
}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;transition:all .15s}
.pagination a{background:var(--white);border:1px solid var(--neutral-300);color:var(--neutral-700)}
.pagination a:hover{border-color:var(--primary-500);color:var(--primary-500)}
.pagination span.current{background:var(--gradient-primary);color:var(--white);border:none}

/* ── Toast ── */
.toast{position:fixed;top:16px;right:16px;left:16px;max-width:360px;margin:0 auto;z-index:999;padding:12px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:.9rem;font-weight:500;animation:slideIn .3s ease;display:flex;align-items:center;gap:8px}
@media(min-width:480px){.toast{left:auto;right:16px;max-width:340px}}
.toast-success{background:var(--success-50);color:var(--success-500);border:1px solid var(--success-500)}
.toast-error{background:var(--error-50);color:var(--error-500);border:1px solid var(--error-500)}
@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── Landing Page ── */
.hero{background:var(--gradient-hero);padding:72px 0 60px;color:var(--white);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero__content{position:relative;z-index:1;max-width:680px}
.hero__tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:5px 12px;border-radius:var(--radius-full);font-size:.8125rem;font-weight:500;margin-bottom:20px;backdrop-filter:blur(8px)}
.hero__title{font-size:2.75rem;font-weight:800;line-height:1.1;margin-bottom:16px}
.hero__title span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero__desc{font-size:1.0625rem;opacity:.85;margin-bottom:28px;line-height:1.7}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.hero__badges{display:flex;gap:16px;flex-wrap:wrap}
.hero__badge{display:flex;align-items:center;gap:5px;font-size:.8125rem;opacity:.8}

@media(max-width:640px){
  .hero{padding:48px 0 44px}
  .hero__title{font-size:1.875rem}
  .hero__desc{font-size:1rem;margin-bottom:24px}
  .hero__cta{flex-direction:column;gap:10px}
  .hero__cta .btn{width:100%;justify-content:center}
  .hero__badges{gap:10px}
}

.section{padding:64px 0}
@media(max-width:640px){.section{padding:44px 0}}
.section-title{font-size:1.625rem;font-weight:700;color:var(--neutral-900);margin-bottom:10px}
.section-sub{font-size:.9375rem;color:var(--neutral-500);margin-bottom:40px}
.text-center{text-align:center}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.steps{grid-template-columns:1fr;gap:16px}}
.step-card{text-align:center;padding:28px 20px}
.step-icon{font-size:2.5rem;margin-bottom:14px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--gradient-primary);color:var(--white);font-weight:700;font-size:.8125rem;border-radius:var(--radius-full);margin-bottom:14px}
.step-title{font-size:1.0625rem;font-weight:600;color:var(--neutral-900);margin-bottom:6px}
.step-desc{font-size:.9rem;color:var(--neutral-500)}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:560px){.features-grid{grid-template-columns:1fr;gap:14px}}
.feature-card{padding:24px;border-radius:var(--radius-lg);border:1px solid var(--neutral-200);background:var(--white);transition:box-shadow .2s,transform .2s}
.feature-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.feature-icon{font-size:1.875rem;margin-bottom:14px}
.feature-title{font-size:1rem;font-weight:600;color:var(--neutral-900);margin-bottom:6px}
.feature-desc{font-size:.9rem;color:var(--neutral-500)}

/* Tiers table */
.tiers{width:100%;max-width:560px;margin:0 auto;border-collapse:collapse}
.tiers tr{border-bottom:1px solid var(--neutral-200)}
.tiers td{padding:14px 16px;font-size:.9375rem}
.tiers .tier-rate{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.0625rem;color:var(--primary-500)}

/* FAQ */
.faq{max-width:720px;margin:0 auto}
.faq-item{border:1px solid var(--neutral-200);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden}
.faq-q{padding:16px 18px;font-weight:600;color:var(--neutral-900);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9375rem}
.faq-q:hover{background:var(--neutral-50)}
.faq-a{padding:0 18px 16px;color:var(--neutral-500);font-size:.9rem;line-height:1.7}

/* CTA Banner */
.cta-banner{background:var(--gradient-primary);padding:64px 0;text-align:center;color:var(--white)}
.cta-banner h2{font-size:1.75rem;font-weight:700;margin-bottom:12px}
.cta-banner p{font-size:1rem;opacity:.9;margin-bottom:28px}
.btn-white{background:var(--white);color:var(--primary-500);padding:14px 36px;font-size:1rem;border-radius:var(--radius-md);font-weight:700;display:inline-block;transition:all .2s}
.btn-white:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
@media(max-width:480px){
  .cta-banner{padding:44px 0}
  .cta-banner h2{font-size:1.375rem}
  .btn-white{width:100%;max-width:280px;display:block;margin:0 auto;text-align:center}
}

/* Footer */
.footer{background:var(--neutral-900);color:rgba(255,255,255,.6);padding:32px 0;text-align:center;font-size:.875rem}

/* Auth page */
.auth-page{min-height:calc(100vh - var(--navbar-h));display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--neutral-50)}
.auth-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl,0 20px 25px -5px rgba(0,0,0,.1));padding:32px 28px;width:100%;max-width:420px}
.auth-logo{text-align:center;margin-bottom:8px;font-size:1.875rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-title{text-align:center;font-size:1.25rem;font-weight:700;color:var(--neutral-900);margin-bottom:6px}
.auth-sub{text-align:center;font-size:.9rem;color:var(--neutral-500);margin-bottom:28px}
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-footer{text-align:center;margin-top:20px;font-size:.9rem;color:var(--neutral-500)}
.auth-link{color:var(--primary-500);font-weight:500}
.auth-link:hover{text-decoration:underline}

/* Alert */
.alert{padding:11px 14px;border-radius:var(--radius-md);font-size:.9rem;margin-bottom:14px}
.alert-error{background:var(--error-50);color:var(--error-500);border:1px solid #FCA5A5}
.alert-success{background:var(--success-50);color:var(--success-500);border:1px solid #6EE7B7}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-up{animation:fadeUp .3s ease forwards}
.stagger-1{animation-delay:.05s}
.stagger-2{animation-delay:.1s}
.stagger-3{animation-delay:.15s}

/* ── Mobile: collapse sidebar ── */
@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .dashboard-main{margin-left:0;padding:16px}
  .dashboard-title{font-size:1.25rem}
  .dashboard-header{margin-bottom:16px}
}
@media(min-width:1025px){
  .navbar__hamburger{display:none!important}
  .sidebar-overlay{display:none!important}
}

/* ── Admin table ↔ card toggle ── */
/* Desktop: show table, hide cards */
.cfg-table-wrap{display:block}
.cfg-card-list{display:none}
/* Mobile: hide table, show cards */
@media(max-width:700px){
  .cfg-table-wrap{display:none}
  .cfg-card-list{display:flex;flex-direction:column;gap:10px}
}

/* ── Order filter ── */
/* Mobile: select dropdown */
.filter-select{display:none;width:100%;padding:10px 14px;font-size:.9375rem;font-family:inherit;border:1px solid var(--neutral-300);border-radius:var(--radius-md);background:var(--white);color:var(--neutral-900);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.filter-select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-50)}
/* Desktop: chip row */
.filter-chips-desktop{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){
  .filter-select{display:block}
  .filter-chips-desktop{display:none}
}

/* mobile-nav removed */

/* ── Empty state ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--neutral-500)}
.empty-state__icon{font-size:2.5rem;margin-bottom:14px}
.empty-state__title{font-size:1rem;font-weight:600;color:var(--neutral-700);margin-bottom:6px}
.empty-state__desc{font-size:.9rem;margin-bottom:20px}

/* ── Promo card mobile ── */
@media(max-width:560px){
  .promo-occasions{grid-template-columns:1fr!important}
  .promo-main{padding:32px 20px!important}
  .promo-main .promo-pct{font-size:3rem!important}
}

/* ── Hero Banner Right Side Style ── */
.hero__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.hero__image-wrap {
  flex: 1;
  max-width: 480px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.15);
  transform: rotate(1deg);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hero__image:hover {
  transform: rotate(0deg) scale(1.02);
  border-color: rgba(255, 255, 255, 0.3);
}
@media(max-width: 1024px) {
  .hero__wrapper {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .hero__content {
    max-width: 100%;
  }
  .hero__cta {
    justify-content: center;
  }
  .hero__badges {
    justify-content: center;
  }
  .hero__image-wrap {
    max-width: min(380px, 100%);
    margin: 0 auto;
  }
  .hero__image {
    transform: none !important; /* Tắt xoay trên mobile/tablet để tránh lỗi tràn ngang */
  }
}
@media(max-width: 640px) {
  .hero__image-wrap {
    max-width: min(280px, 100%); /* Thu gọn ảnh trên mobile nhỏ cho cân đối */
  }
}