*,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Inter', sans-serif;
     background: #f0f2f5;
     color: #1e293b;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased
 }

 a {
     text-decoration: none;
     color: inherit
 }

 img {
     display: block;
     max-width: 100%
 }

 ul {
     list-style: none
 }

 button {
     border: none;
     background: none;
     cursor: pointer;
     font-family: inherit
 }

 :root {
     --dk-900: #060b18;
     --dk-800: #0a1022;
     --dk-700: #111b33;
     --dk-600: #1a2540;
     --green: #22c55e;
     --green-dark: #16a34a;
     --orange: #f97316;
     --yellow: #fbbf24;
     --gold: #f59e0b;
     --white: #ffffff;
     --gray-50: #f8fafc;
     --gray-100: #f1f5f9;
     --gray-200: #e2e8f0;
     --gray-300: #cbd5e1;
     --gray-400: #94a3b8;
     --gray-500: #64748b;
     --gray-600: #475569;
     --sidebar-w: 280px;
     --header-h: 56px;
     --marquee-h: 30px;
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 12px
 }

 @media(min-width:640px) {
     .container {
         padding: 0 16px
     }
 }

 /* ===== HEADER ===== */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     background: var(--dk-900);
     transition: box-shadow .3s
 }

 .header.scrolled {
     box-shadow: 0 4px 24px rgba(0, 0, 0, .4)
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: var(--header-h)
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0
 }

 .logo-icon {
     width: 32px;
     height: 32px;
     border-radius: 6px;
     background: var(--green);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 18px
 }

 .logo-text {
     font-size: 18px;
     font-weight: 800;
     color: #fff;
     letter-spacing: -.02em
 }

 .logo-text span {
     color: var(--green)
 }

 .desktop-nav {
     display: none;
     align-items: center;
     gap: 2px
 }

 @media(min-width:1024px) {
     .desktop-nav {
         display: flex
     }
 }

 .desktop-nav a {
     padding: 6px 10px;
     font-size: 13px;
     font-weight: 500;
     color: #d1d5db;
     transition: color .2s;
     white-space: nowrap
 }

 .desktop-nav a:hover {
     color: var(--green)
 }

 .header-cta {
     display: none;
     align-items: center;
     gap: 6px
 }

 @media(min-width:1024px) {
     .header-cta {
         display: flex
     }
 }

 .btn-login {
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     color: #e5e7eb;
     border: 1px solid #4b5563;
     border-radius: 6px;
     transition: all .2s
 }

 .btn-login:hover {
     border-color: #fff;
     color: #fff
 }

 .btn-register {
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     color: var(--dk-900);
     background: var(--yellow);
     border-radius: 6px;
     transition: background .2s
 }

 .btn-register:hover {
     background: #fde047
 }

 .btn-deposit {
     padding: 6px 14px;
     font-size: 13px;
     font-weight: 600;
     color: #fff;
     background: var(--green);
     border-radius: 6px;
     transition: background .2s
 }

 .btn-deposit:hover {
     background: var(--green-dark)
 }

 .menu-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     padding: 6px;
     font-size: 22px
 }

 @media(min-width:1024px) {
     .menu-toggle {
         display: none
     }
 }

 .mobile-menu {
     display: none;
     background: var(--dk-800);
     border-top: 1px solid rgba(55, 65, 81, .5);
     padding: 0 12px 12px
 }

 .mobile-menu.open {
     display: block
 }

 .mobile-menu a {
     display: block;
     padding: 10px 0;
     font-size: 13px;
     font-weight: 500;
     color: #d1d5db;
     border-bottom: 1px solid rgba(55, 65, 81, .3)
 }

 .mobile-menu a:last-of-type {
     border-bottom: none
 }

 .mobile-cta {
     display: flex;
     gap: 6px;
     margin-top: 12px
 }

 .mobile-cta .btn-login {
     flex: 1;
     text-align: center
 }

 .mobile-cta .btn-register {
     flex: 1;
     text-align: center
 }

 .mobile-deposit {
     display: block;
     margin-top: 6px;
     text-align: center;
     padding: 8px;
     font-size: 13px;
     font-weight: 600;
     color: #fff;
     background: var(--green);
     border-radius: 6px
 }

 .marquee-bar {
     background: var(--dk-800);
     border-top: 1px solid rgba(55, 65, 81, .3);
     overflow: hidden;
     height: var(--marquee-h);
     display: flex;
     align-items: center
 }

 .marquee-track {
     display: flex;
     animation: marquee 20s linear infinite;
     white-space: nowrap
 }

 .marquee-track:hover {
     animation-play-state: paused
 }

 .marquee-track span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 0 28px;
     font-size: 11px;
     color: var(--gray-400)
 }

 @keyframes marquee {
     0% {
         transform: translateX(0)
     }

     100% {
         transform: translateX(-50%)
     }
 }

 .header-spacer {
     height: calc(var(--header-h) + var(--marquee-h))
 }

 /* ===== HERO SLIDER ===== */
 .hero {
     position: relative;
     width: 100%;
     aspect-ratio: 1695 / 398;
     /* height: 300px; */
     overflow: hidden;
     background: var(--dk-900)
 }

 .slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transform: translateX(100%);
 }

 .slide.active {
     opacity: 1;
     transform: translateX(0);
     z-index: 2;
 }

 .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .slide-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(6, 11, 24, .9) 0%, rgba(6, 11, 24, .5) 50%, transparent 100%)
 }

 .slide-content {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center
 }

 .slide-content .container {
     width: 100%
 }

 .slide-badge {
     display: inline-block;
     padding: 4px 10px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .05em;
     border-radius: 4px;
     margin-bottom: 12px;
     color: #fff
 }

 .badge-live {
     background: var(--orange)
 }

 .badge-new {
     background: var(--gold);
     color: var(--dk-900)
 }

 .badge-fast {
     background: var(--green)
 }

 .slide-title {
     font-size: 28px;
     font-weight: 800;
     color: #fff;
     line-height: 1.1;
     max-width: 480px;
     margin-bottom: 12px
 }

 /* @media(min-width:640px) {
     .hero {
         height: 400px
     }
 }

 @media(min-width:768px) {
     .hero {
         height: 460px
     }
 } */

 @media(min-width:640px) {
     .slide-title {
         font-size: 42px
     }
 }

 @media(min-width:768px) {
     .slide-title {
         font-size: 52px
     }
 }

 .slide-title .hl-y {
     color: var(--yellow)
 }

 .slide-title .hl-g {
     color: var(--green)
 }

 .slide-desc {
     font-size: 13px;
     color: #d1d5db;
     max-width: 400px;
     line-height: 1.7;
     margin-bottom: 20px
 }

 @media(min-width:640px) {
     .slide-desc {
         font-size: 15px
     }
 }

 .slide-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 10px 20px;
     font-size: 13px;
     font-weight: 600;
     border-radius: 8px;
     transition: all .2s;
     color: #fff
 }

 .slide-btn.green {
     background: var(--green)
 }

 .slide-btn.green:hover {
     background: var(--green-dark)
 }

 .slide-btn.yellow {
     background: var(--yellow);
     color: var(--dk-900)
 }

 .slide-btn.yellow:hover {
     background: #fde047
 }

 .slider-dots {
     position: absolute;
     bottom: 16px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 6px;
     z-index: 10
 }

 .slider-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .3);
     transition: background .3s;
     cursor: pointer
 }

 .slider-dot.active {
     background: rgba(255, 255, 255, .85)
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 36px;
     height: 36px;
     background: rgba(0, 0, 0, .4);
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: background .2s;
     z-index: 10;
     cursor: pointer
 }

 .slider-arrow:hover {
     background: rgba(0, 0, 0, .6)
 }

 .slider-arrow.prev {
     left: 12px
 }

 .slider-arrow.next {
     right: 12px
 }

 /* ===== MAIN 2-COLUMN LAYOUT ===== */
 .main-content {
     padding: 16px 0 32px;
     background: #f0f2f5
 }

 .main-2col {
     padding: 0 16px
 }

 @media(min-width:640px) {
     .main-content {
         padding: 20px 0 40px
     }
 }

 .content-layout {
     display: flex;
     gap: 12px
 }

 @media(min-width:640px) {
     .content-layout {
         gap: 16px
     }
 }

 /* -- LEFT SIDEBAR -- */
 .sidebar {
     width: 100%;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     gap: 12px
 }

 @media(min-width:768px) {
     .sidebar {
         width: var(--sidebar-w);
         /* position:sticky;
                max-height:calc(100vh - var(--header-h) - var(--marquee-h) - 32px); */
         top: calc(var(--header-h) + var(--marquee-h) + 16px);
         ;
         overflow-y: auto;
         scrollbar-width: thin;
         scrollbar-color: rgba(255, 255, 255, .15) transparent
     }

     .sidebar::-webkit-scrollbar {
         width: 4px
     }

     .sidebar::-webkit-scrollbar-track {
         background: transparent
     }

     .sidebar::-webkit-scrollbar-thumb {
         background: rgba(255, 255, 255, .15);
         border-radius: 4px
     }
 }

 @media(min-width:768px) {
     .sidebar .sidebar-module:nth-child(n+4) {
         display: block
     }
 }

 .sidebar-module {
     background: #fff;
     border-radius: 10px;
     overflow: hidden
 }

 .sidebar-module-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 12px;
     background: var(--dk-800);
     cursor: default
 }

 .sidebar-module-header h3 {
     font-size: 13px;
     font-weight: 700;
     color: #fff;
     display: flex;
     align-items: center;
     gap: 6px
 }

 .sidebar-module-header h3 .iconify {
     font-size: 16px;
     color: var(--yellow)
 }

 .sidebar-module-body {
     padding: 8px
 }

 /* Sports List */
 .sports-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 4px
 }

 @media(min-width:768px) {
     .sports-list {
         grid-template-columns: 1fr
     }
 }

 .sport-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     border-radius: 6px;
     transition: background .2s;
     cursor: pointer
 }

 .sport-item:hover {
     background: #f0fdf4
 }

 .sport-item .iconify {
     font-size: 20px;
     flex-shrink: 0
 }

 .sport-item span {
     font-size: 12px;
     font-weight: 600;
     color: var(--gray-600)
 }

 .sport-item:hover span {
     color: var(--dk-800)
 }

 /* Mini Carousel (sidebar) */
 .mini-carousel {
     position: relative
 }

 .mini-carousel-track {
     display: flex;
     gap: 6px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
     padding: 2px
 }

 .mini-carousel-track::-webkit-scrollbar {
     display: none
 }

 .mini-carousel-item {
     flex-shrink: 0;
     width: 80px;
     border-radius: 6px;
     overflow: hidden;
     cursor: pointer;
     transition: transform .2s;
     position: relative
 }

 .mini-carousel-item:hover {
     transform: scale(1.05)
 }

 @media(min-width:768px) {
     .mini-carousel-item {
         width: 90px
     }
 }

 .mini-carousel-item img {
     width: 100%;
     aspect-ratio: 3/4;
     object-fit: cover
 }

 .mini-carousel-item .mc-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 3px 4px;
     background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
     font-size: 9px;
     font-weight: 600;
     color: #fff;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }

 .mini-carousel-item .mc-tag {
     position: absolute;
     top: 4px;
     left: 4px;
     padding: 1px 5px;
     font-size: 8px;
     font-weight: 700;
     border-radius: 3px;
     color: #fff;
     text-transform: uppercase
 }

 .mc-tag.new {
     background: var(--orange)
 }

 .mc-tag.hot {
     background: var(--green)
 }

 .mc-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 22px;
     height: 22px;
     background: rgba(0, 0, 0, .6);
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     z-index: 3;
     cursor: pointer;
     transition: background .2s;
     opacity: 0
 }

 .mini-carousel:hover .mc-arrow {
     opacity: 1
 }

 .mc-arrow:hover {
     background: rgba(0, 0, 0, .8)
 }

 .mc-arrow.left {
     left: 2px
 }

 .mc-arrow.right {
     right: 2px
 }

 /* ===== MINI CAROUSEL DOTS ===== */
 .mc-dots {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 4px;
     padding: 6px 0 0;
 }

 .mc-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--gray-300);
     border: none;
     padding: 0;
     cursor: pointer;
     transition: all 0.3s ease;
     flex-shrink: 0;
 }

 .mc-dot:hover {
     background: var(--gray-400);
 }

 .mc-dot.active {
     width: 18px;
     border-radius: 3px;
     background: var(--green);
 }

 /* Drag cursor for mini carousel track */
 .mini-carousel-track {
     cursor: grab;
     -webkit-user-select: none;
     user-select: none;
 }

 .mini-carousel-track.dragging {
     cursor: grabbing;
     scroll-behavior: auto;
 }

 /* Hide default scrollbar more aggressively */
 .mini-carousel-track::-webkit-scrollbar {
     display: none;
 }

 .mini-carousel-track {
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 /* New Launched Grid (sidebar) */
 .new-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 6px
 }

 .new-grid-item {
     border-radius: 6px;
     overflow: hidden;
     cursor: pointer;
     transition: transform .2s;
     position: relative
 }

 .new-grid-item:hover {
     transform: scale(1.04)
 }

 .new-grid-item img {
     width: 100%;
     aspect-ratio: 2/1;
     object-fit: cover
 }

 .new-grid-item .ng-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 2px 4px;
     background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
     font-size: 9px;
     font-weight: 600;
     color: #fff;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }

 /* -- RIGHT MAIN AREA -- */
 .main-area {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 12px
 }

 @media(min-width:640px) {
     .main-area {
         gap: 16px
     }
 }

 /* Content Banner */
 .content-banner {
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer
 }

 .content-banner img {
     width: 100%;
     aspect-ratio: 939/245;
     object-fit: cover;
     transition: transform .3s
 }

 /* @media(min-width:640px) {
     .content-banner img {
         aspect-ratio: 16/6
     }
 }

 @media(min-width:1024px) {
     .content-banner img {
         aspect-ratio: 16/7
     }
 } */

 .content-banner:hover img {
     transform: scale(1.02)
 }

 /* Section header */
 .area-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px
 }

 .area-header h3 {
     font-size: 15px;
     font-weight: 700;
     color: var(--dk-800);
     display: flex;
     align-items: center;
     gap: 6px
 }

 .area-header h3 .bar {
     width: 3px;
     height: 18px;
     border-radius: 99px;
     background: var(--green)
 }

 .area-header .view-all {
     font-size: 12px;
     font-weight: 600;
     color: var(--green);
     transition: color .2s
 }

 .area-header .view-all:hover {
     text-decoration: underline
 }

 /* Casino Grid 196x105 */
 .casino-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 5px
 }

 @media(min-width:480px) {
     .casino-grid {
         grid-template-columns: repeat(4, 1fr)
     }
 }

 @media(min-width:768px) {
     .casino-grid {
         grid-template-columns: repeat(5, 1fr)
     }
 }

 @media(min-width:1024px) {
     .casino-grid {
         grid-template-columns: repeat(6, 1fr)
     }
 }

 .casino-card {
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     transition: transform .2s, box-shadow .2s;
     position: relative
 }

 .casino-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .15)
 }

 .casino-card img {
     width: 100%;
     aspect-ratio: 153/81;
     object-fit: cover
 }

 .casino-card .cc-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 6px 8px;
     background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
     display: flex;
     align-items: flex-end;
     justify-content: space-between
 }

 .casino-card .cc-name {
     font-size: 11px;
     font-weight: 600;
     color: #fff
 }

 .casino-card .cc-live {
     font-size: 9px;
     font-weight: 700;
     color: var(--green);
     display: flex;
     align-items: center;
     gap: 3px
 }

 .casino-card .cc-live::before {
     content: '';
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--green);
     animation: blink 1.5s infinite
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .3
     }
 }

 /* Category Grid (icon + name) */
 .cat-section-game {
     background: var(--dk-700);
     padding: 10px;
     border-radius: 10px;
 }

 .cat-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px
 }

 .cat-bar {
     width: 3px;
     height: 18px;
     border-radius: 99px;
     background: var(--orange)
 }

 .area-header h3.cat-title {
     color: #fff;
 }

 @media(min-width:480px) {
     .cat-grid {
         grid-template-columns: repeat(4, 1fr)
     }
 }

 @media(min-width:768px) {
     .cat-grid {
         grid-template-columns: repeat(5, 1fr)
     }
 }

 @media(min-width:1024px) {
     .cat-grid {
         grid-template-columns: repeat(6, 1fr)
     }
 }

 .cat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     padding: 12px 8px;
     background: var(--dk-600);
     border-radius: 10px;
     cursor: pointer;
     transition: all .3s;
     border: 1px solid transparent
 }

 .cat-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
     border-color: rgba(34, 197, 94, .3);
     background: var(--orange);
 }

 .cat-item .cat-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px
 }

 .cat-item span:last-child {
     font-size: 11px;
     font-weight: 600;
     color: var(--white);
     text-align: center;
     line-height: 1.3
 }

 .cat-item:hover span:last-child {}

 /* ===== WHATSAPP CTA ===== */
 .whatsapp-cta {
     padding: 48px 0;
     background: linear-gradient(135deg, #16a34a, #22c55e, #059669);
     position: relative;
     overflow: hidden
 }

 @media(min-width:768px) {
     .whatsapp-cta {
         padding: 64px 0
     }
 }

 .whatsapp-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 384px;
     height: 384px;
     background: #fff;
     border-radius: 50%;
     opacity: .1;
     transform: translate(-50%, -50%)
 }

 .whatsapp-cta::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 320px;
     height: 320px;
     background: #fff;
     border-radius: 50%;
     opacity: .1;
     transform: translate(33%, 33%)
 }

 .wa-inner {
     position: relative;
     z-index: 2
 }

 .wa-banner {
     text-align: center;
     margin-bottom: 48px
 }

 .wa-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     background: rgba(255, 255, 255, .2);
     border-radius: 999px;
     margin-bottom: 16px;
     color: #fff;
     font-size: 14px;
     font-weight: 600
 }

 .wa-banner h2 {
     font-size: 28px;
     font-weight: 800;
     color: #fff;
     margin-bottom: 12px
 }

 @media(min-width:640px) {
     .wa-banner h2 {
         font-size: 36px
     }
 }

 .wa-banner p {
     font-size: 14px;
     color: #bbf7d0;
     max-width: 512px;
     margin: 0 auto 24px;
     line-height: 1.7
 }

 @media(min-width:640px) {
     .wa-banner p {
         font-size: 16px
     }
 }

 .wa-main-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 16px 32px;
     background: #fff;
     color: #16a34a;
     font-size: 18px;
     font-weight: 700;
     border-radius: 12px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
     transition: background .2s
 }

 .wa-main-btn:hover {
     background: #f0fdf4
 }

 .wa-main-btn .iconify {
     font-size: 24px
 }

 .wa-phone {
     margin-top: 12px;
     font-size: 14px;
     color: #bbf7d0
 }

 .steps-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     max-width: 896px;
     margin: 0 auto
 }

 @media(min-width:768px) {
     .steps-grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 24px
     }
 }

 .step-card {
     background: rgba(255, 255, 255, .15);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     transition: transform .3s
 }

 .step-card:hover {
     transform: translateY(-4px)
 }

 .step-icon {
     width: 56px;
     height: 56px;
     background: #fff;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
 }

 .step-icon .iconify {
     font-size: 28px;
     color: #16a34a
 }

 .step-label {
     font-size: 11px;
     font-weight: 700;
     color: #bbf7d0;
     margin-bottom: 4px
 }

 .step-text {
     font-size: 14px;
     font-weight: 600;
     color: #fff
 }

 /* ===== CELEBRITY ===== */
 .celeb-section {
     padding: 48px 0;
     background: var(--dk-900)
 }

 @media(min-width:768px) {
     .celeb-section {
         padding: 64px 0
     }
 }

 .section-center {
     text-align: center;
     margin-bottom: 32px
 }

 .section-badge {
     display: inline-block;
     padding: 4px 12px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .05em;
     border-radius: 4px;
     margin-bottom: 12px
 }

 .section-badge.yellow {
     background: rgba(251, 191, 36, .2);
     color: var(--yellow)
 }

 .section-badge.green {
     background: rgba(34, 197, 94, .1);
     color: var(--green)
 }

 .section-badge.orange {
     background: rgba(249, 115, 22, .1);
     color: var(--orange)
 }

 .section-badge.purple {
     background: rgba(168, 85, 247, .1);
     color: #a855f7
 }

 .section-center h2 {
     font-size: 24px;
     font-weight: 700;
     color: #fff
 }

 @media(min-width:640px) {
     .section-center h2 {
         font-size: 30px
     }
 }

 .section-center p {
     font-size: 14px;
     color: var(--gray-400);
     margin-top: 8px
 }

 .celeb-carousel-wrapper {
     position: relative;
     overflow: hidden;
     padding: 10px 0;
 }

 .celeb-grid {
     display: flex;
     overflow-x: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
     gap: 12px;
     cursor: grab;
 }

 .celeb-grid::-webkit-scrollbar {
     display: none;
 }

 .celeb-grid.dragging {
     cursor: grabbing;
     scroll-behavior: auto;
 }

 .celeb-card {
     flex: 0 0 calc(50% - 6px);
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     aspect-ratio: 3/4;
     cursor: pointer;
     flex-shrink: 0;
 }

 @media(min-width:640px) {
     .celeb-card {
         flex: 0 0 calc(33.333% - 8px);
     }
 }

 @media(min-width:768px) {
     .celeb-card {
         flex: 0 0 calc(20% - 9.6px);
     }
 }

 .celeb-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     z-index: 3;
     cursor: pointer;
     transition: background 0.3s;
     opacity: 0;
     border: none;
 }

 .celeb-carousel-wrapper:hover .celeb-arrow {
     opacity: 1;
 }

 .celeb-arrow:hover {
     background: rgba(0, 0, 0, 0.9);
 }

 .celeb-arrow.left {
     left: 10px;
 }

 .celeb-arrow.right {
     right: 10px;
 }

 /* Video Modal CSS */
 .video-modal {
     display: none;
     position: fixed;
     z-index: 9999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     align-items: center;
     justify-content: center;
 }

 .video-modal.show {
     display: flex;
 }

 .video-modal-content {
     position: relative;
     width: 90%;
     max-width: 800px;
     background: #000;
     border-radius: 12px;
     padding: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .close-video {
     position: absolute;
     top: -15px;
     right: -15px;
     background: var(--green);
     color: #fff;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     cursor: pointer;
     z-index: 10;
     font-weight: bold;
     transition: background 0.3s;
 }

 .close-video:hover {
     background: var(--green-dark);
 }

 .celeb-card img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .celeb-card .c-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .4);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .3s
 }

 .celeb-card:hover .c-overlay {
     background: rgba(0, 0, 0, .6)
 }

 .play-circle {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, .9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform .3s, background .3s
 }

 .celeb-card:hover .play-circle {
     transform: scale(1.15);
     background: rgba(34, 197, 94, .95)
 }

 .play-circle .iconify {
     font-size: 22px;
     color: var(--dk-900);
     margin-left: 2px
 }

 .celeb-info {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 10px;
     background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent)
 }

 .celeb-name {
     font-size: 13px;
     font-weight: 600;
     color: #fff
 }

 .celeb-role {
     font-size: 11px;
     color: #d1d5db
 }

 /* ===== FEATURES ===== */
 .features-section {
     padding: 48px 0;
     background: #fff
 }

 @media(min-width:768px) {
     .features-section {
         padding: 64px 0
     }
 }

 .features-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px
 }

 @media(min-width:640px) {
     .features-grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media(min-width:1024px) {
     .features-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 .feat-card {
     background: var(--gray-50);
     border: 1px solid var(--gray-100);
     border-radius: 14px;
     padding: 20px;
     transition: transform .3s, box-shadow .3s
 }

 .feat-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 32px rgba(0, 0, 0, .08)
 }

 .feat-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 14px
 }

 .feat-icon .iconify {
     font-size: 24px
 }

 .feat-icon.blue {
     background: #eff6ff
 }

 .feat-icon.blue .iconify {
     color: #3b82f6
 }

 .feat-icon.green {
     background: #f0fdf4
 }

 .feat-icon.green .iconify {
     color: #22c55e
 }

 .feat-icon.purple {
     background: #faf5ff
 }

 .feat-icon.purple .iconify {
     color: #a855f7
 }

 .feat-icon.orange {
     background: #fff7ed
 }

 .feat-icon.orange .iconify {
     color: #f97316
 }

 .feat-icon.teal {
     background: #f0fdfa
 }

 .feat-icon.teal .iconify {
     color: #14b8a6
 }

 .feat-icon.red {
     background: #fef2f2
 }

 .feat-icon.red .iconify {
     color: #ef4444
 }

 .feat-card h3 {
     font-size: 14px;
     font-weight: 700;
     color: var(--dk-800);
     margin-bottom: 6px
 }

 .feat-card p {
     font-size: 13px;
     color: var(--gray-500);
     line-height: 1.7
 }

 /* ===== SEO ===== */
 .seo-section {
     padding: 48px 0;
     background: var(--gray-50)
 }

 @media(min-width:768px) {
     .seo-section {
         padding: 64px 0
     }
 }

 .seo-block {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     align-items: center;
     margin-bottom: 48px
 }

 @media(min-width:768px) {
     .seo-block {
         grid-template-columns: 1fr 1fr;
         gap: 40px
     }
 }

 .seo-block:last-of-type {
     margin-bottom: 0
 }

 .seo-block.reverse .seo-text {
     order: 1
 }

 .seo-block.reverse .seo-img {
     order: 0
 }

 @media(min-width:768px) {
     .seo-block.reverse .seo-text {
         order: 2
     }

     .seo-block.reverse .seo-img {
         order: 1
     }
 }

 .seo-text h2 {
     font-size: 22px;
     font-weight: 700;
     color: var(--dk-800);
     line-height: 1.3;
     margin-bottom: 14px
 }

 @media(min-width:640px) {
     .seo-text h2 {
         font-size: 28px
     }
 }

 .seo-text p {
     font-size: 13px;
     color: var(--gray-500);
     line-height: 1.7;
     margin-bottom: 10px
 }

 .btn-getmore {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 10px 20px;
     font-size: 13px;
     font-weight: 600;
     color: #fff;
     border-radius: 8px;
     transition: all .2s;
     position: relative;
     overflow: hidden;
     margin-top: 12px
 }

 .btn-getmore::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
     transform: translateX(-100%);
     transition: transform .5s
 }

 .btn-getmore:hover::after {
     transform: translateX(100%)
 }

 .btn-getmore.green {
     background: var(--green)
 }

 .btn-getmore.green:hover {
     background: var(--green-dark)
 }

 .btn-getmore.orange {
     background: var(--orange)
 }

 .btn-getmore.orange:hover {
     background: #ea580c
 }

 .btn-getmore.purple {
     background: #9333ea
 }

 .btn-getmore.purple:hover {
     background: #7e22ce
 }

 .seo-img {
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 16px 40px rgba(0, 0, 0, .1)
 }

 .seo-img img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .expert-tips {
     background: linear-gradient(135deg, var(--dk-800), var(--dk-900));
     border-radius: 14px;
     padding: 20px;
     margin-bottom: 48px
 }

 @media(min-width:640px) {
     .expert-tips {
         padding: 28px
     }
 }

 @media(min-width:768px) {
     .expert-tips {
         padding: 36px
     }
 }

 .tips-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px
 }

 .tips-icon {
     width: 36px;
     height: 36px;
     background: var(--yellow);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .tips-icon .iconify {
     font-size: 18px;
     color: var(--dk-900)
 }

 .tips-header h3 {
     font-size: 18px;
     font-weight: 700;
     color: #fff
 }

 .tips-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px
 }

 @media(min-width:640px) {
     .tips-grid {
         grid-template-columns: 1fr 1fr
     }
 }

 .tip-item {
     display: flex;
     gap: 10px
 }

 .tip-item .iconify {
     font-size: 18px;
     color: var(--green);
     flex-shrink: 0;
     margin-top: 2px
 }

 .tip-item p {
     font-size: 13px;
     color: #d1d5db;
     line-height: 1.7
 }

 .tip-item p strong {
     color: #fff
 }

 /* ===== SEO ARTICLE ===== */
 .seo-article {
     padding: 48px 0;
     background: var(--gray-100)
 }

 @media(min-width:768px) {
     .seo-article {
         padding: 64px 0
     }
 }

 .article-block {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     align-items: center;
     margin-bottom: 40px
 }

 @media(min-width:768px) {
     .article-block {
         grid-template-columns: 1fr 1fr;
         gap: 32px
     }
 }

 .article-block.reverse .article-text {
     order: 1
 }

 .article-block.reverse .article-img {
     order: 0
 }

 @media(min-width:768px) {
     .article-block.reverse .article-text {
         order: 2
     }

     .article-block.reverse .article-img {
         order: 1
     }
 }

 .article-text h2 {
     font-size: 20px;
     font-weight: 700;
     color: var(--dk-800);
     line-height: 1.35;
     margin-bottom: 14px
 }

 @media(min-width:640px) {
     .article-text h2 {
         font-size: 24px
     }
 }

 .article-text h3 {
     font-size: 17px;
     font-weight: 700;
     color: var(--dk-800);
     line-height: 1.35;
     margin-bottom: 10px
 }

 .article-text p {
     font-size: 14px;
     color: var(--gray-500);
     line-height: 1.8;
     margin-bottom: 10px
 }

 .article-text p:last-child {
     margin-bottom: 0
 }

 .article-img {
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 8px 30px rgba(0, 0, 0, .08)
 }

 .article-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .4s
 }

 .article-img:hover img {
     transform: scale(1.03)
 }

 .article-divider {
     border: none;
     border-top: 1px solid var(--gray-200);
     margin: 36px 0
 }

 .tips-box {
     background: linear-gradient(135deg, var(--dk-800), var(--dk-900));
     border-radius: 14px;
     padding: 24px;
     margin: 24px 0
 }

 @media(min-width:640px) {
     .tips-box {
         padding: 32px
     }
 }

 .tips-box h3 {
     font-size: 17px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 8px
 }

 .tips-box h3 .iconify {
     color: var(--yellow);
     font-size: 20px
 }

 .tips-box p {
     font-size: 13px;
     color: #d1d5db;
     line-height: 1.8;
     margin-bottom: 8px
 }

 .tips-box p:last-child {
     margin-bottom: 0
 }

 .tips-box p strong {
     color: #fff
 }

 .game-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
     margin: 12px 0
 }

 @media(min-width:480px) {
     .game-list {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px
     }
 }

 @media(min-width:768px) {
     .game-list {
         grid-template-columns: repeat(4, 1fr);
         gap: 12px
     }
 }

 .game-list-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     background: var(--gray-50);
     border: 1px solid var(--gray-100);
     border-radius: 8px;
     font-size: 13px;
     font-weight: 600;
     color: var(--dk-800);
     transition: all .2s
 }

 .game-list-item:hover {
     border-color: var(--green);
     background: #f0fdf4
 }

 .game-list-item .iconify {
     color: var(--green);
     font-size: 18px;
     flex-shrink: 0
 }

 .reason-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 10px;
     margin: 14px 0
 }

 @media(min-width:640px) {
     .reason-list {
         grid-template-columns: 1fr 1fr
     }
 }

 .reason-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 12px;
     background: var(--gray-50);
     border-radius: 10px
 }

 .reason-item .iconify {
     color: var(--green);
     font-size: 18px;
     flex-shrink: 0;
     margin-top: 1px
 }

 .reason-item span {
     font-size: 13px;
     color: var(--gray-600);
     line-height: 1.6
 }

 /* ===== GUIDES ===== */
 .guides-section {
     padding: 48px 0;
     background: #fff
 }

 @media(min-width:768px) {
     .guides-section {
         padding: 64px 0
     }
 }

 .guides-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px
 }

 @media(min-width:768px) {
     .guides-grid {
         grid-template-columns: 1fr 1fr;
         gap: 24px
     }
 }

 .guide-card {
     background: var(--gray-50);
     border: 1px solid var(--gray-100);
     border-radius: 14px;
     padding: 20px
 }

 @media(min-width:640px) {
     .guide-card {
         padding: 28px
     }
 }

 .guide-card-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px
 }

 .guide-card-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .guide-card-icon.green {
     background: rgba(34, 197, 94, .1)
 }

 .guide-card-icon.green .iconify {
     color: var(--green);
     font-size: 18px
 }

 .guide-card-icon.orange {
     background: rgba(249, 115, 22, .1)
 }

 .guide-card-icon.orange .iconify {
     color: var(--orange);
     font-size: 18px
 }

 .guide-card h3 {
     font-size: 16px;
     font-weight: 700;
     color: var(--dk-800)
 }

 .guide-steps {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .guide-step {
     display: flex;
     align-items: flex-start;
     gap: 10px
 }

 .guide-num {
     width: 32px;
     height: 32px;
     min-width: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 13px;
     color: #fff
 }

 .guide-num.green {
     background: var(--green)
 }

 .guide-num.orange {
     background: var(--orange)
 }

 .guide-step p {
     font-size: 13px;
     color: var(--gray-600);
     padding-top: 5px;
     line-height: 1.6
 }

 .guide-step p strong {
     color: var(--dk-800)
 }

 /* ===== FAQ ===== */
 .faq-section {
     padding: 48px 0;
     background: var(--gray-50)
 }

 @media(min-width:768px) {
     .faq-section {
         padding: 64px 0
     }
 }

 .faq-wrapper {
     max-width: 768px;
     margin: 0 auto
 }

 .faq-list {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .faq-item {
     background: #fff;
     border: 1px solid var(--gray-200);
     border-radius: 10px;
     overflow: hidden
 }

 .faq-toggle {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px;
     text-align: left;
     transition: background .2s;
     cursor: pointer
 }

 .faq-toggle:hover {
     background: var(--gray-50)
 }

 .faq-toggle span:first-child {
     font-size: 13px;
     font-weight: 600;
     color: var(--dk-800);
     padding-right: 16px
 }

 .faq-icon {
     font-size: 20px;
     color: var(--gray-400);
     flex-shrink: 0;
     transition: transform .3s
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease, padding .3s ease;
     padding: 0 16px;
     font-size: 13px;
     color: var(--gray-500);
     line-height: 1.7
 }

 .faq-answer.open {
     max-height: 300px;
     padding-bottom: 16px
 }

 /* ===== FOOTER ===== */
 .footer {
     background: var(--dk-900);
     padding-top: 40px;
     padding-bottom: 20px
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
     margin-bottom: 32px
 }

 @media(min-width:640px) {
     .footer-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(min-width:1024px) {
     .footer-grid {
         grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr
     }
 }

 .footer-brand {
     grid-column: 1/-1;
     margin-bottom: 8px
 }

 @media(min-width:1024px) {
     .footer-brand {
         grid-column: 1;
         margin-bottom: 0
     }
 }

 .footer-brand .logo {
     margin-bottom: 12px
 }

 .footer-brand p {
     font-size: 13px;
     color: var(--gray-400);
     line-height: 1.7;
     margin-bottom: 12px
 }

 .footer-social {
     display: flex;
     gap: 10px
 }

 .footer-social a {
     width: 34px;
     height: 34px;
     background: var(--dk-700);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 16px;
     transition: background .2s
 }

 .footer-social a.fb:hover {
     background: #2563eb
 }

 .footer-social a.tg:hover {
     background: #0ea5e9
 }

 .footer-social a.ig:hover {
     background: #db2777
 }

 .footer-col h4 {
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: .05em;
     margin-bottom: 14px
 }

 .footer-col ul {
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .footer-col a {
     font-size: 13px;
     color: var(--gray-400);
     transition: color .2s
 }

 .footer-col a:hover {
     color: var(--green)
 }

 .footer-contact li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: var(--gray-400)
 }

 .footer-contact .iconify {
     color: var(--green);
     font-size: 15px;
     flex-shrink: 0
 }

 .footer-divider {
     border: none;
     border-top: 1px solid rgba(55, 65, 81, .5);
     margin: 0
 }

 .payment-section {
     padding-top: 28px;
     padding-bottom: 28px;
     text-align: center
 }

 .payment-label {
     font-size: 10px;
     font-weight: 600;
     color: var(--gray-500);
     text-transform: uppercase;
     letter-spacing: .05em;
     margin-bottom: 12px
 }

 .payment-badges {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px
 }

 .pay-badge {
     background: #fff;
     border: 1px solid var(--gray-200);
     border-radius: 6px;
     padding: 6px 12px;
     display: flex;
     align-items: center;
     gap: 5px;
     font-weight: 600;
     font-size: 11px;
     color: #334155;
     transition: border-color .2s
 }

 .pay-badge:hover {
     border-color: var(--green)
 }

 .pay-badge .iconify {
     font-size: 16px
 }

 .cert-section {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 12px;
     padding-bottom: 28px
 }

 .cert-badge {
     padding: 6px 14px;
     background: var(--dk-700);
     border: 1px solid var(--gray-700);
     border-radius: 6px;
     color: var(--gray-400);
     font-size: 11px;
     font-weight: 700
 }

 .cert-badge.age18 {
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     font-size: 11px;
     font-weight: 800;
     color: #ef4444;
     line-height: 1.1
 }

 .copyright {
     text-align: center;
     padding-top: 20px
 }

 .copyright p {
     font-size: 11px;
     color: var(--gray-500)
 }

 .copyright .disclaimer {
     font-size: 10px;
     color: var(--gray-600);
     max-width: 640px;
     margin: 6px auto 0;
     line-height: 1.6
 }

 /* ===== FLOATING WA ===== */
 .wa-float {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 200;
     width: 52px;
     height: 52px;
     background: #22c55e;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(34, 197, 94, .4);
     transition: background .2s;
     animation: pulse-green 2s infinite
 }

 .wa-float:hover {
     background: #16a34a
 }

 .wa-float .iconify {
     font-size: 26px;
     color: #fff
 }

 @keyframes pulse-green {
     0% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, .5)
     }

     70% {
         box-shadow: 0 0 0 14px rgba(34, 197, 94, 0)
     }

     100% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, 0)
     }
 }

 /* Mobile layout: sidebar modules horizontal */
 @media(max-width:767px) {
     .content-layout {
         flex-direction: column
     }

     .sidebar {
         width: 100%
     }

     .sidebar .sidebar-module:nth-child(1) .sports-list {
         grid-template-columns: repeat(5, 1fr);
         gap: 2px
     }

     .sidebar .sidebar-module:nth-child(1) .sport-item {
         flex-direction: column;
         gap: 3px;
         padding: 8px 4px;
         text-align: center
     }

     .sidebar .sidebar-module:nth-child(1) .sport-item span {
         font-size: 10px
     }
 }