/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 1
GLOBAL • RESET • VARIABLES • TYPOGRAPHY
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
ROOT VARIABLES
=========================================*/

:root{

--primary:#7c3aed;
--primary-dark:#6d28d9;
--secondary:#22c55e;

--bg:#f6f7fb;
--white:#ffffff;

--text:#111827;
--text-light:#6b7280;

--border:#e5e7eb;

--radius-sm:10px;
--radius:16px;
--radius-lg:22px;
--radius-xl:30px;

--shadow-sm:0 3px 10px rgba(0,0,0,.05);
--shadow:0 8px 25px rgba(0,0,0,.08);
--shadow-lg:0 15px 35px rgba(0,0,0,.12);

}

/*=========================================
RESET
=========================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
overflow-x:hidden;

}

body{

background:var(--bg);

font-family:
"Inter",
"Poppins",
system-ui,
sans-serif;

color:var(--text);

font-size:14px;

line-height:1.6;

overflow-x:hidden;

padding-bottom:82px;

}

/*=========================================
CONTAINER
=========================================*/

.container,
.container-fluid{

padding-left:16px;
padding-right:16px;

}

/*=========================================
SECTION
=========================================*/

section{

padding:24px 0;

}

/*=========================================
TYPOGRAPHY
=========================================*/

h1{

font-size:30px;
font-weight:800;
line-height:1.2;
margin-bottom:12px;

}

h2{

font-size:24px;
font-weight:800;
line-height:1.25;
margin-bottom:10px;

}

h3{

font-size:20px;
font-weight:700;
margin-bottom:8px;

}

h4{

font-size:18px;
font-weight:700;

}

h5{

font-size:16px;
font-weight:700;

}

h6{

font-size:15px;
font-weight:700;

}

p{

font-size:14px;

color:var(--text-light);

line-height:1.7;

margin-bottom:10px;

}

small{

font-size:12px;

color:var(--text-light);

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.section-title h2{

margin:0;

font-size:22px;

}

.section-title a{

font-size:14px;

font-weight:700;

text-decoration:none;

color:var(--primary);

}

/*=========================================
LINK
=========================================*/

a{

text-decoration:none;

color:inherit;

transition:.25s;

-webkit-tap-highlight-color:transparent;

}

/*=========================================
IMAGE
=========================================*/

img{

display:block;

max-width:100%;

height:auto;

}

/*=========================================
BUTTONS
=========================================*/

.btn{

height:48px;

padding:0 20px;

border:none;

border-radius:16px;

font-size:14px;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

transition:.25s;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-success{

background:var(--secondary);

color:#fff;

}

.btn-outline{

background:#fff;

border:1px solid var(--border);

color:var(--text);

}

.btn:active{

transform:scale(.97);

}

/*=========================================
FORMS
=========================================*/

.form-control,
.form-select{

height:48px;

border-radius:14px;

border:1px solid var(--border);

background:#fff;

font-size:14px;

padding:0 15px;

box-shadow:none;

}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(124,58,237,.12);

}

textarea.form-control{

height:auto;

padding:14px;

}

/*=========================================
CARD
=========================================*/

.card{

background:#fff;

border:none;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

}

/*=========================================
BADGE
=========================================*/

.badge{

border-radius:999px;

padding:5px 10px;

font-size:11px;

font-weight:700;

}

/*=========================================
LIST
=========================================*/

ul{

list-style:none;

padding:0;

margin:0;

}

/*=========================================
UTILITY
=========================================*/

.rounded{

border-radius:16px !important;

}

.rounded-lg{

border-radius:22px !important;

}

.shadow-sm{

box-shadow:var(--shadow-sm) !important;

}

.shadow{

box-shadow:var(--shadow) !important;

}

.shadow-lg{

box-shadow:var(--shadow-lg) !important;

}

.text-primary{

color:var(--primary)!important;

}

.text-success{

color:var(--secondary)!important;

}

.bg-white{

background:#fff!important;

}

.bg-light{

background:var(--bg)!important;

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:5px;
height:5px;

}

::-webkit-scrollbar-thumb{

background:#d1d5db;

border-radius:20px;

}

/*=========================================
SELECTION
=========================================*/

::selection{

background:rgba(124,58,237,.2);

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 2
PREMIUM NAVBAR
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
NAVBAR
=========================================*/

.navbar{

position:sticky;

top:0;

z-index:1050;

height:72px;

background:#111118;

padding:0;

box-shadow:0 8px 25px rgba(0,0,0,.18);

}

.navbar .container{

height:100%;

display:flex;

align-items:center;

justify-content:space-between;

}

/*=========================================
LOGO
=========================================*/

.navbar-brand{

display:flex;

flex-direction:column;

justify-content:center;

margin:0;

padding:0;

line-height:1;

}

.navbar-brand strong{

font-size:22px;

font-weight:800;

letter-spacing:.5px;

color:#8b5cf6;

text-transform:uppercase;

}

.navbar-brand span{

font-size:10px;

font-weight:600;

letter-spacing:4px;

color:#fff;

opacity:.9;

margin-top:5px;

text-transform:uppercase;

}

/*=========================================
LEFT
=========================================*/

.navbar-left{

display:flex;

align-items:center;

gap:14px;

}

/*=========================================
RIGHT
=========================================*/

.navbar-right{

display:flex;

align-items:center;

gap:10px;

}

/*=========================================
MENU BUTTON
=========================================*/

.navbar-toggler{

width:42px;

height:42px;

border:none;

background:transparent;

display:flex;

align-items:center;

justify-content:center;

padding:0;

box-shadow:none;

}

.navbar-toggler:focus{

box-shadow:none;

}

.navbar-toggler i{

font-size:26px;

color:#fff;

}

/*=========================================
ICONS
=========================================*/

.nav-icon{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

position:relative;

transition:.25s;

}

.nav-icon:hover{

background:rgba(255,255,255,.08);

}

/*=========================================
CART BADGE
=========================================*/

.cart-count{

position:absolute;

top:2px;

right:0;

min-width:18px;

height:18px;

padding:0 5px;

border-radius:999px;

background:#8b5cf6;

color:#fff;

font-size:10px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

}

/*=========================================
SEARCH BAR
=========================================*/

.mobile-search{

padding:14px 16px;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.mobile-search .input-group{

overflow:hidden;

border-radius:18px;

background:#f5f6fb;

}

.mobile-search .form-control{

height:48px;

border:none;

background:transparent;

font-size:14px;

}

.mobile-search .btn{

width:52px;

height:48px;

padding:0;

border-radius:0;

background:transparent;

color:#7c3aed;

}

/*=========================================
OFFCANVAS
=========================================*/

.offcanvas{

width:290px;

border:none;

border-radius:0 22px 22px 0;

}

.offcanvas-header{

padding:22px;

border-bottom:1px solid #eee;

}

.offcanvas-title{

font-size:18px;

font-weight:800;

color:#7c3aed;

}

.offcanvas-body{

padding:18px;

}

/*=========================================
MENU
=========================================*/

.offcanvas .navbar-nav{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.offcanvas .nav-link{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

height:95px;

background:#fff;

border-radius:20px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

color:#111;

font-size:13px;

font-weight:700;

transition:.25s;

}

.offcanvas .nav-link i{

font-size:28px;

margin-bottom:10px;

color:#7c3aed;

}

.offcanvas .nav-link:hover{

transform:translateY(-4px);

background:#7c3aed;

color:#fff;

}

.offcanvas .nav-link:hover i{

color:#fff;

}

/*=========================================
PROFILE BOX
=========================================*/

.mobile-user{

display:flex;

align-items:center;

gap:12px;

padding:18px;

margin-bottom:18px;

background:#f8f8fc;

border-radius:20px;

}

.mobile-user img{

width:52px;

height:52px;

border-radius:50%;

object-fit:cover;

}

.mobile-user h6{

margin:0;

font-size:15px;

font-weight:700;

}

.mobile-user p{

margin:2px 0 0;

font-size:12px;

color:#777;

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 3
PREMIUM HERO
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
HERO SECTION
=========================================*/

.hero{

padding:18px 16px 10px;

background:var(--bg);

}

.hero .container{

padding:0;

}

/*=========================================
HERO BOX
=========================================*/

.hero-wrapper{

background:linear-gradient(135deg,#f5ecff,#fdfbff);

border-radius:26px;

padding:22px;

overflow:hidden;

position:relative;

box-shadow:var(--shadow);

}

/*=========================================
LAYOUT
=========================================*/

.hero .row{

display:flex;

flex-direction:column-reverse;

row-gap:20px;

}

/*=========================================
IMAGE
=========================================*/

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:250px;

}

.hero-main-image{

max-width:100%;

max-height:240px;

object-fit:contain;

position:relative;

z-index:3;

}

/*=========================================
BACKGROUND GLOW
=========================================*/

.hero-glow{

position:absolute;

width:260px;

height:260px;

background:rgba(124,58,237,.15);

border-radius:50%;

filter:blur(20px);

}

/*=========================================
SALE BADGE
=========================================*/

.hero-sale-badge{

position:absolute;

top:12px;

left:12px;

background:#fff;

padding:10px 14px;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

z-index:5;

}

.hero-sale-badge span{

display:block;

font-size:10px;

font-weight:600;

color:#666;

}

.hero-sale-badge strong{

display:block;

font-size:24px;

font-weight:800;

color:var(--primary);

line-height:1;

margin:4px 0;

}

.hero-sale-badge small{

font-size:11px;

font-weight:600;

}

/*=========================================
FLOATING CARDS
=========================================*/

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:8px;

background:#fff;

padding:10px 12px;

border-radius:16px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

font-size:12px;

font-weight:600;

z-index:4;

}

.floating-card i{

font-size:18px;

color:var(--primary);

}

.card1{

top:20px;

right:10px;

}

.card2{

left:10px;

bottom:70px;

}

.card3{

right:15px;

bottom:15px;

}

/*=========================================
CONTENT
=========================================*/

.hero-content{

position:relative;

z-index:2;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:8px;

background:#ede9fe;

color:var(--primary);

padding:8px 16px;

border-radius:999px;

font-size:12px;

font-weight:700;

margin-bottom:16px;

}

.hero-title{

font-size:30px;

font-weight:800;

line-height:1.2;

color:var(--text);

margin-bottom:14px;

}

.hero-title span{

display:block;

color:var(--primary);

}

.hero-text{

font-size:14px;

line-height:1.8;

color:var(--text-light);

margin-bottom:22px;

}

/*=========================================
BUTTONS
=========================================*/

.hero-buttons{

display:flex;

flex-direction:column;

gap:12px;

}

.hero-buttons .btn{

width:100%;

height:52px;

font-size:15px;

border-radius:18px;

}

/*=========================================
FEATURES
=========================================*/

.hero-features{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-top:22px;

}

.hero-feature{

display:flex;

align-items:center;

gap:14px;

padding:14px;

background:#fff;

border-radius:18px;

box-shadow:var(--shadow-sm);

}

.hero-feature i{

width:48px;

height:48px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

flex-shrink:0;

}

.hero-feature h6{

margin:0;

font-size:15px;

font-weight:700;

}

.hero-feature p{

margin:2px 0 0;

font-size:12px;

color:var(--text-light);

}

/*=========================================
SLIDER DOTS
=========================================*/

.hero-dots{

display:flex;

justify-content:center;

gap:8px;

margin-top:18px;

}

.hero-dots span{

width:8px;

height:8px;

border-radius:50%;

background:#d1d5db;

}

.hero-dots span.active{

width:24px;

border-radius:999px;

background:var(--primary);

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 4
PREMIUM CATEGORIES
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
CATEGORY SECTION
=========================================*/

.category-section{

padding:24px 16px;

background:var(--bg);

}

.category-section .container{

padding:0;

}

/*=========================================
HEADER
=========================================*/

.category-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:18px;

}

.category-header h2{

font-size:22px;

font-weight:800;

margin:0;

color:var(--text);

}

.category-header a{

font-size:14px;

font-weight:700;

color:var(--primary);

text-decoration:none;

}

/*=========================================
HORIZONTAL SCROLL
=========================================*/

.category-scroll{

display:flex;

gap:14px;

overflow-x:auto;

padding-bottom:6px;

scrollbar-width:none;

-webkit-overflow-scrolling:touch;

}

.category-scroll::-webkit-scrollbar{

display:none;

}

/*=========================================
CATEGORY CARD
=========================================*/

.category-card{

flex:0 0 90px;

background:#fff;

border-radius:22px;

padding:14px 10px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

box-shadow:var(--shadow-sm);

transition:.25s;

}

.category-card:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

/*=========================================
ICON WRAPPER
=========================================*/

.category-icon{

width:68px;

height:68px;

border-radius:50%;

background:#f4f5fb;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:12px;

transition:.25s;

}

.category-card:hover .category-icon{

background:rgba(124,58,237,.12);

}

/*=========================================
IMAGE
=========================================*/

.category-icon img{

width:42px;

height:42px;

object-fit:contain;

}

/*=========================================
TITLE
=========================================*/

.category-card h6{

font-size:13px;

font-weight:700;

line-height:1.35;

margin:0;

color:var(--text);

}

/*=========================================
PRODUCT COUNT
=========================================*/

.category-count{

margin-top:4px;

font-size:11px;

color:var(--text-light);

}

/*=========================================
ACTIVE CATEGORY
=========================================*/

.category-card.active{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));

}

.category-card.active h6,

.category-card.active .category-count{

color:#fff;

}

.category-card.active .category-icon{

background:rgba(255,255,255,.18);

}

/*=========================================
GRID VERSION
(For categories page)
=========================================*/

.category-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.category-grid .category-card{

width:100%;

flex:none;

padding:18px 12px;

}

/*=========================================
LIST VERSION
(For categories.php)
=========================================*/

.category-list{

display:flex;

flex-direction:column;

gap:14px;

}

.category-list .category-item{

display:flex;

align-items:center;

background:#fff;

padding:16px;

border-radius:20px;

box-shadow:var(--shadow-sm);

transition:.25s;

}

.category-list .category-item:hover{

transform:translateY(-3px);

}

.category-item .category-icon{

margin:0 16px 0 0;

width:58px;

height:58px;

}

.category-item .category-info{

flex:1;

}

.category-item h5{

margin:0;

font-size:15px;

font-weight:700;

}

.category-item p{

margin:4px 0 0;

font-size:12px;

color:var(--text-light);

}

.category-item i.bi-chevron-right{

font-size:18px;

color:#999;

}

/*=========================================
ANIMATION
=========================================*/

.category-card,

.category-item{

transition:all .25s ease;

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 5
PREMIUM PRODUCT CARDS
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
PRODUCT SECTION
=========================================*/

.product-section{

padding:24px 16px;

background:var(--bg);

}

.product-section .container{

padding:0;

}

/*=========================================
PRODUCT GRID
=========================================*/

.product-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

}

/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

position:relative;

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow-sm);

transition:all .3s ease;

height:100%;

display:flex;

flex-direction:column;

}

.product-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

/*=========================================
DISCOUNT BADGE
=========================================*/

.product-discount{

position:absolute;

top:12px;

left:12px;

background:#ef4444;

color:#fff;

padding:5px 10px;

border-radius:50px;

font-size:11px;

font-weight:700;

z-index:5;

}

/*=========================================
WISHLIST BUTTON
=========================================*/

.wishlist-btn{

position:absolute;

top:12px;

right:12px;

width:38px;

height:38px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 5px 18px rgba(0,0,0,.12);

color:#666;

font-size:18px;

transition:.25s;

z-index:5;

}

.wishlist-btn:hover{

background:var(--primary);

color:#fff;

}

/*=========================================
IMAGE AREA
=========================================*/

.product-image{

height:170px;

display:flex;

align-items:center;

justify-content:center;

background:#fafafa;

padding:18px;

}

.product-image img{

max-width:100%;

max-height:130px;

object-fit:contain;

transition:.3s;

}

.product-card:hover .product-image img{

transform:scale(1.06);

}

/*=========================================
BODY
=========================================*/

.product-body{

padding:15px;

display:flex;

flex-direction:column;

flex:1;

}

/*=========================================
CATEGORY
=========================================*/

.product-category{

font-size:11px;

font-weight:600;

color:var(--primary);

margin-bottom:6px;

text-transform:uppercase;

letter-spacing:.5px;

}

/*=========================================
TITLE
=========================================*/

.product-title{

font-size:14px;

font-weight:700;

line-height:1.45;

height:42px;

overflow:hidden;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

margin-bottom:10px;

}

.product-title a{

color:var(--text);

text-decoration:none;

}

/*=========================================
RATING
=========================================*/

.product-rating{

display:flex;

align-items:center;

gap:2px;

margin-bottom:10px;

}

.product-rating i{

font-size:12px;

color:#fbbf24;

}

.product-rating span{

margin-left:6px;

font-size:12px;

color:var(--text-light);

}

/*=========================================
PRICE
=========================================*/

.price-box{

margin-bottom:12px;

}

.sale-price{

font-size:20px;

font-weight:800;

color:var(--secondary);

}

.old-price{

margin-left:8px;

font-size:13px;

color:#999;

text-decoration:line-through;

}

/*=========================================
STOCK
=========================================*/

.stock{

display:inline-flex;

align-items:center;

gap:6px;

font-size:12px;

font-weight:600;

color:#16a34a;

margin-bottom:14px;

}

.stock i{

font-size:12px;

}

/*=========================================
BUTTONS
=========================================*/

.product-buttons{

display:flex;

gap:8px;

margin-top:auto;

}

.product-buttons .btn{

flex:1;

height:44px;

border-radius:14px;

font-size:13px;

font-weight:700;

padding:0;

}

.details-btn{

background:#fff;

border:1px solid var(--border);

color:var(--text);

}

.details-btn:hover{

background:#f5f5f5;

}

.cart-btn{

background:var(--primary);

color:#fff;

}

.cart-btn:hover{

background:var(--primary-dark);

}

/*=========================================
OUT OF STOCK
=========================================*/

.product-card.out-of-stock{

opacity:.75;

}

.product-card.out-of-stock .cart-btn{

background:#d1d5db;

color:#666;

pointer-events:none;

}

/*=========================================
NEW BADGE
=========================================*/

.product-new{

position:absolute;

bottom:12px;

left:12px;

background:#22c55e;

color:#fff;

padding:4px 10px;

border-radius:50px;

font-size:10px;

font-weight:700;

}

/*=========================================
HOT BADGE
=========================================*/

.product-hot{

position:absolute;

bottom:12px;

right:12px;

background:#f59e0b;

color:#fff;

padding:4px 10px;

border-radius:50px;

font-size:10px;

font-weight:700;

}

/*=========================================
SKELETON LOADING
=========================================*/

.product-skeleton{

background:#fff;

border-radius:22px;

padding:15px;

}

.product-skeleton .image{

height:170px;

border-radius:18px;

background:#ececec;

margin-bottom:15px;

}

.product-skeleton .line{

height:12px;

border-radius:50px;

background:#ececec;

margin-bottom:10px;

}

.product-skeleton .line.small{

width:60%;

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 6
FEATURED • LATEST • FLASH SALE
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
SECTION SPACING
=========================================*/

.featured-section,
.latest-section,
.flash-sale-section{

padding:24px 16px;

background:var(--bg);

}

.featured-section .container,
.latest-section .container,
.flash-sale-section .container{

padding:0;

}

/*=========================================
SECTION HEADER
=========================================*/

.section-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:18px;

}

.section-header .left{

display:flex;

align-items:center;

gap:10px;

}

.section-header h2{

margin:0;

font-size:22px;

font-weight:800;

color:var(--text);

}

.section-header p{

margin:4px 0 0;

font-size:12px;

color:var(--text-light);

}

.section-header .view-all{

font-size:13px;

font-weight:700;

color:var(--primary);

}

/*=========================================
FEATURED ICON
=========================================*/

.section-icon{

width:44px;

height:44px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(124,58,237,.12);

color:var(--primary);

font-size:20px;

}

/*=========================================
HORIZONTAL PRODUCT SLIDER
=========================================*/

.product-slider{

display:flex;

gap:16px;

overflow-x:auto;

padding-bottom:8px;

scrollbar-width:none;

scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;

}

.product-slider::-webkit-scrollbar{

display:none;

}

.product-slider .product-card{

min-width:185px;

max-width:185px;

scroll-snap-align:start;

}

/*=========================================
FLASH SALE BOX
=========================================*/

.flash-banner{

background:linear-gradient(135deg,#7c3aed,#5b21b6);

border-radius:24px;

padding:18px;

margin-bottom:18px;

color:#fff;

box-shadow:var(--shadow);

}

.flash-banner-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px;

}

.flash-banner h3{

margin:0;

font-size:22px;

font-weight:800;

color:#fff;

}

.flash-banner p{

margin:6px 0 0;

font-size:13px;

color:rgba(255,255,255,.85);

}

/*=========================================
COUNTDOWN
=========================================*/

.flash-countdown{

display:flex;

gap:8px;

}

.flash-time{

width:46px;

height:52px;

background:rgba(255,255,255,.18);

border-radius:14px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

backdrop-filter:blur(8px);

}

.flash-time strong{

font-size:17px;

font-weight:800;

line-height:1;

color:#fff;

}

.flash-time span{

margin-top:4px;

font-size:10px;

text-transform:uppercase;

color:rgba(255,255,255,.9);

}

/*=========================================
FLASH TAG
=========================================*/

.flash-tag{

display:inline-flex;

align-items:center;

gap:6px;

padding:8px 14px;

border-radius:999px;

background:rgba(255,255,255,.16);

font-size:12px;

font-weight:700;

}

.flash-tag i{

font-size:13px;

}

/*=========================================
LATEST GRID
=========================================*/

.latest-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

}

/*=========================================
FEATURED BADGE
=========================================*/

.featured-badge{

position:absolute;

top:12px;

left:12px;

background:linear-gradient(135deg,#f59e0b,#ea580c);

color:#fff;

padding:5px 12px;

border-radius:999px;

font-size:10px;

font-weight:700;

z-index:10;

}

/*=========================================
SALE BADGE
=========================================*/

.flash-badge{

position:absolute;

top:12px;

left:12px;

background:#ef4444;

color:#fff;

padding:5px 12px;

border-radius:999px;

font-size:10px;

font-weight:700;

z-index:10;

}

/*=========================================
PRODUCT RIBBON
=========================================*/

.product-ribbon{

position:absolute;

top:16px;

right:-34px;

width:120px;

background:#16a34a;

color:#fff;

font-size:10px;

font-weight:700;

text-align:center;

padding:5px 0;

transform:rotate(45deg);

z-index:8;

}

/*=========================================
VIEW MORE BUTTON
=========================================*/

.view-more{

margin-top:20px;

display:flex;

justify-content:center;

}

.view-more .btn{

width:100%;

height:50px;

border-radius:18px;

font-size:15px;

}

/*=========================================
EMPTY STATE
=========================================*/

.empty-products{

background:#fff;

border-radius:22px;

padding:35px 20px;

text-align:center;

box-shadow:var(--shadow-sm);

}

.empty-products img{

width:90px;

margin:0 auto 16px;

opacity:.75;

}

.empty-products h5{

margin-bottom:8px;

font-weight:700;

}

.empty-products p{

margin:0;

font-size:13px;

}

/*=========================================
LOADING PLACEHOLDER
=========================================*/

.product-loading{

display:flex;

gap:16px;

overflow:hidden;

}

.product-loading .loading-card{

min-width:180px;

height:285px;

border-radius:22px;

background:#fff;

padding:14px;

}

.product-loading .loading-image{

height:150px;

border-radius:16px;

background:#ececec;

margin-bottom:15px;

}

.product-loading .loading-line{

height:12px;

border-radius:50px;

background:#ececec;

margin-bottom:10px;

}

.product-loading .loading-line.short{

width:60%;

}

/*=========================================
SLIDER INDICATOR
=========================================*/

.slider-indicator{

display:flex;

justify-content:center;

gap:8px;

margin-top:18px;

}

.slider-indicator span{

width:8px;

height:8px;

border-radius:50%;

background:#d1d5db;

transition:.3s;

}

.slider-indicator span.active{

width:24px;

border-radius:999px;

background:var(--primary);

}

}
/*==========================================================
CHONGTHAM ENTERPRISES
PREMIUM MOBILE CSS V3.0
PART 7
PRODUCT DETAILS PAGE
==========================================================*/

@media only screen and (max-width:768px){

/*=========================================
PRODUCT PAGE
=========================================*/

.product-details{

padding:18px 16px 100px;

background:var(--bg);

}

.product-details .container{

padding:0;

}

/*=========================================
IMAGE GALLERY
=========================================*/

.product-gallery{

background:#fff;

border-radius:24px;

padding:18px;

box-shadow:var(--shadow);

margin-bottom:18px;

}

.product-main-image{

height:280px;

display:flex;

align-items:center;

justify-content:center;

background:#fafafa;

border-radius:20px;

overflow:hidden;

}

.product-main-image img{

max-width:100%;

max-height:240px;

object-fit:contain;

transition:.3s;

}

/*=========================================
THUMBNAILS
=========================================*/

.product-thumbnails{

display:flex;

gap:10px;

margin-top:15px;

overflow-x:auto;

scrollbar-width:none;

}

.product-thumbnails::-webkit-scrollbar{

display:none;

}

.product-thumb{

width:70px;

height:70px;

border-radius:16px;

background:#f7f7f7;

border:2px solid transparent;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

flex-shrink:0;

transition:.25s;

}

.product-thumb.active{

border-color:var(--primary);

}

.product-thumb img{

width:55px;

height:55px;

object-fit:contain;

}

/*=========================================
PRODUCT INFO
=========================================*/

.product-info{

background:#fff;

padding:20px;

border-radius:24px;

box-shadow:var(--shadow);

margin-bottom:18px;

}

.product-category{

font-size:12px;

font-weight:700;

color:var(--primary);

text-transform:uppercase;

letter-spacing:.5px;

margin-bottom:8px;

}

.product-name{

font-size:24px;

font-weight:800;

line-height:1.3;

margin-bottom:12px;

color:var(--text);

}

.product-rating{

display:flex;

align-items:center;

gap:4px;

margin-bottom:14px;

}

.product-rating i{

color:#fbbf24;

font-size:14px;

}

.product-rating span{

font-size:13px;

color:var(--text-light);

margin-left:6px;

}

/*=========================================
PRICE
=========================================*/

.product-price{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:18px;

}

.current-price{

font-size:30px;

font-weight:800;

color:var(--secondary);

}

.old-price{

font-size:17px;

text-decoration:line-through;

color:#9ca3af;

}

.discount{

background:#ef4444;

color:#fff;

padding:4px 10px;

border-radius:999px;

font-size:11px;

font-weight:700;

}

/*=========================================
SHORT DESCRIPTION
=========================================*/

.product-short-description{

font-size:14px;

line-height:1.8;

color:var(--text-light);

margin-bottom:20px;

}

/*=========================================
QUANTITY
=========================================*/

.quantity-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:20px;

}

.quantity-label{

font-size:15px;

font-weight:700;

}

.quantity-box{

display:flex;

align-items:center;

border:1px solid var(--border);

border-radius:16px;

overflow:hidden;

background:#fff;

}

.quantity-box button{

width:44px;

height:44px;

border:none;

background:#f5f5f5;

font-size:20px;

font-weight:700;

}

.quantity-box input{

width:55px;

height:44px;

border:none;

text-align:center;

font-size:15px;

font-weight:700;

background:#fff;

}

/*=========================================
FEATURES
=========================================*/

.product-features{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-bottom:18px;

}

.product-feature{

display:flex;

align-items:center;

gap:12px;

background:#f8f8fc;

padding:14px;

border-radius:16px;

}

.product-feature i{

width:42px;

height:42px;

border-radius:50%;

background:rgba(124,58,237,.12);

color:var(--primary);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

flex-shrink:0;

}

.product-feature h6{

margin:0;

font-size:14px;

font-weight:700;

}

.product-feature p{

margin:2px 0 0;

font-size:12px;

}

/*=========================================
TABS
=========================================*/

.product-tabs{

display:flex;

gap:10px;

overflow-x:auto;

margin-bottom:18px;

scrollbar-width:none;

}

.product-tabs::-webkit-scrollbar{

display:none;

}

.product-tab{

padding:10px 18px;

border-radius:999px;

background:#fff;

font-size:13px;

font-weight:700;

white-space:nowrap;

box-shadow:var(--shadow-sm);

}

.product-tab.active{

background:var(--primary);

color:#fff;

}

/*=========================================
TAB CONTENT
=========================================*/

.tab-content-box{

background:#fff;

padding:18px;

border-radius:22px;

box-shadow:var(--shadow-sm);

margin-bottom:18px;

}

.tab-content-box h5{

margin-bottom:12px;

font-size:17px;

font-weight:700;

}

.tab-content-box p{

font-size:14px;

line-height:1.8;

}

/*=========================================
SPECIFICATIONS
=========================================*/

.specification-table{

display:flex;

flex-direction:column;

gap:12px;

}

.spec-row{

display:flex;

justify-content:space-between;

padding-bottom:10px;

border-bottom:1px solid #eee;

}

.spec-row:last-child{

border:none;

padding-bottom:0;

}

.spec-name{

font-weight:700;

font-size:13px;

color:var(--text);

}

.spec-value{

font-size:13px;

color:var(--text-light);

text-align:right;

}

/*=========================================
REVIEWS
=========================================*/

.review-card{

background:#fff;

padding:16px;

border-radius:20px;

box-shadow:var(--shadow-sm);

margin-bottom:14px;

}

.review-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:10px;

}

.review-user{

display:flex;

align-items:center;

gap:10px;

}

.review-user img{

width:46px;

height:46px;

border-radius:50%;

object-fit:cover;

}

.review-user h6{

margin:0;

font-size:14px;

font-weight:700;

}

.review-stars{

color:#fbbf24;

font-size:13px;

}

.review-text{

font-size:13px;

line-height:1.8;

}

/*=========================================
RELATED PRODUCTS
=========================================*/

.related-products{

margin-top:26px;

}

/*=========================================
BOTTOM BAR
=========================================*/

.product-bottom-bar{

position:fixed;

left:0;

right:0;

bottom:0;

background:#fff;

padding:14px 16px;

display:flex;

gap:12px;

box-shadow:0 -8px 30px rgba(0,0,0,.10);

z-index:1050;

}

.product-bottom-bar .btn{

flex:1;

height:54px;

border-radius:18px;

font-size:15px;

font-weight:700;

}

.buy-now{

background:var(--secondary);

color:#fff;

}

.add-cart{

background:var(--primary);

color:#fff;

}

/*=========================================
SHARE BUTTON
=========================================*/

.share-product{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow-sm);

font-size:18px;

color:var(--primary);

}

/*=========================================
ZOOM EFFECT
=========================================*/

.product-main-image img:active{

transform:scale(1.15);

}

}
.hero-slider{

position:relative;

overflow:hidden;

margin:15px;

border-radius:22px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.hero-track{

display:flex;

transition:transform .6s ease;

}

.hero-slide{

min-width:100%;

}

.hero-slide img{

width:100%;

height:190px;

object-fit:cover;

display:block;

}

.hero-dots{

position:absolute;

bottom:12px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:8px;

}

.hero-dots span{

width:10px;

height:10px;

background:#ffffff90;

border-radius:50%;

cursor:pointer;

}

.hero-dots span.active{

background:#fff;

width:28px;

border-radius:20px;

}
/*==========================
Back To Top
==========================*/

.back-to-top{

opacity:0;

visibility:hidden;

transition:.3s;

transform:translateY(20px);

}

.back-to-top.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

/*==========================
Navbar Scroll Effect
==========================*/

.navbar.navbar-scrolled{

box-shadow:0 8px 25px rgba(0,0,0,.18);

transition:.3s;

}