/* Định nghĩa các biến màu sắc và kích thước để tiện sử dụng sau này*/
:root{
--primary: #2196f3;
--primary-dark: #1565c0; /*màu dùng khi hover*/
--primary-light: #bbdefb; /*làm nền cho các phần tử hoạt động*/
--primary-mid:#90caf9;
--accent: #ff5722;/* màu dùng cho các phần tử nổi bật như nút bấm, liên kết, v.v. */
--accent2: #f44336; /* màu dùng cho các phần tử nổi bật như nút báo lỗi hoặc xóa */
--text:black; /* màu chữ chính */
--text-sub: gray; /* màu chữ phụ */
--white: #ffffff; /* màu trắng thuần */
--bg: #f4f8ff; /* màu nền chính */
--card-bg: #ffffff; /* màu nền cho các thẻ */
--border: #dce8fa; /* màu dùng cho các đường viền, phân cách */
--shadow: 0 4px 24px rgba(33,150,243,0.10); /* màu và độ mờ cho bóng đổ */
--radius: 14px; /* độ bo góc lớn */
--radius-sm: 8px; /* độ bo góc nhỏ */
}

/*Universal Selector: áp dụng cho tất cả các phần tử trên trang, 
giúp đảm bảo rằng tất cả các phần tử đều có cùng một điểm xuất phát về margin, padding và box-sizing.
Điều này giúp tránh các vấn đề về khoảng cách và kích thước không mong muốn giữa các phần tử. */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{ scroll-behavior: smooth;}/* hiệu ứng thanh cuộn mượt mà khi người dùng nhấp vào liên kết nội bộ trên trang. */

body{
    font-family: 'Times New Roman', Times, serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
}
a{
    text-decoration: none;
    color: var(--text);
}

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

ul{
    list-style: none;
}

/*TOPBAR*/
.topbar{
    background: var(--primary-dark);
    color: var(--white);
    font-size: 12px;
    padding: 6px 0;
}
/* .topbar-inner: tạo một lớp con bên trong topbar để chứa nội dung của thanh,
giúp căn chỉnh và tạo khoảng cách giữa các phần tử bên trong. */
.topbar-inner{
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;/* tạo khoảng cách giữa các phần tử con trong topbar-inner */
}
.topbar a{
    color: rgba(255,255,255,0.85);
}
.topbar a:hover{
    color: var(--white);
}
.topbar-left{
    display: flex;
    align-items: center;
    gap: 18px;
}
.topbar-right{
    display: flex;
    align-items: center;
    gap: 18px;
}
/* .topbar i: áp dụng cho các phần tử <i> bên trong topbar,
thường được sử dụng để hiển thị icon.*/
.topbar i{
    margin-right: 5px;
}

/*HEADER*/
header{
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 16px rgba(33,150,243,0.25);
}
.header-inner{
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 64px;
}

/*logo*/
.logo{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.logo-icon{
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-icon i{
    color: var(--primary);
    font-size: 20px;
}
.logo-text{
    font-size: 20px;
    color: var(--white);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
}
.logo-text span{
    color:  #ffe082; /* màu vàng nhạt cho phần "Shop" trong logo */
}

/*search*/
.search-bar{
    flex: 1;
    display: flex;
    background: white;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border:  2px solid var(--primary-mid);
    transition: border 0.2s;
}
.search-bar:focus-within{
    border-color: var(--white);
}
.search-bar input{
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}
.search-bar button{
    background: var(--accent);
    border: none;
    padding:  0 20px;
    cursor: pointer;
    color: var(--white);
    font-size: 16px;
    transition: background 0.2s;
}
.search-bar button:hover{
    background: var(--accent2);
}

/*header actions*/
.header-actions{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.hdr-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
    position: relative;
    cursor: pointer;
}
.hdr-btn:hover{
    background: var(--primary-light);
}
.hdr-btn i{
    font-size: 18px;
}
/* .cart-badge: tạo một phần tử nhỏ hiển thị số lượng sản phẩm trong giỏ hàng, thường được đặt ở góc trên bên phải của biểu tượng giỏ hàng để người dùng dễ dàng nhận biết.
Dịch ra là huy hiệu giỏ hàng */
.cart-badge{
    position: absolute;
    top: 2px; right: 8px;
    background: var(--accent);
    color: var(--white);
    font-size: 10px;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;    
    align-items: center;
}

/*NAVIGATION*/
nav{
    background: var(--primary-dark);
}
.nav-inner{
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-item{
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--white);
    padding: 10px 16px;
    font-size: 13px; font-weight: 500;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-item:hover, .nav-item.active{
    background: var(--primary);
    color: var(--white);
}
.nav-item i{
    font-size: 14px;
}

/* WRAPPER */
/* .wrapper: tạo một lớp chứa chính cho nội dung của trang, 
giúp căn chỉnh và giới hạn chiều rộng của nội dung để đảm bảo rằng nó hiển thị tốt trên các thiết bị khác nhau.
có thể coi như thẻ bao ngoài */
.wrapper {
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
}

/*HERO SECTION*/
.hero{
    padding: 20px 0 0;
}
.hero-grid{
    display: grid;
    grid-template-columns:220px 1fr 200px;
    gap: 14px;
    align-items: start;
}
    /*category sidebar*/
.cat-sidebar{
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.cat-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
    cursor: pointer;
}
.cat-item:last-child{
    border-bottom: none;
}
.cat-item:hover{
    background: var(--primary-light);
    color: var(--primary-dark);
    padding-left: 20px;
}
.cat-item i{
    width: 22px;;
    font-size: 15px;
    color: var(--primary);
}

/*banner slider*/
.banner-slider{
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow);
    background: #cfe8fc;
    min-height: 320px;
}

.slide{
    display: none;
    width: 100%;
    height: 320px;
    position: relative;
    background: linear-gradient(135deg, #1565c0 0%, #2196f3 60%, #64b5f6 100%);
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
    gap: 20px;
}


.slide.active{
    display: flex;
    width: 100%;
    height: 370px;
    position: relative;
    background: linear-gradient(135deg, #1565c0 0%, #2196f3 60%, #64b5f6 100%);
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
    gap: 20px;
}
.slide-content{
    color: var(--white);
    flex: 1;
}
.slide-tag{
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.slide-title{
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}
.slide-sub{
    font-size: 14px;
    color: var(--primary-light);
    opacity: 0.85;
    margin-bottom: 20px;
}
.slide-price{
    font-size: 26px;
    font-weight: 800;
    color: #ffe082;
    margin-bottom: 18px;
}
.btn-buy{
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
}
.btn-buy:hover{
    background: var(--accent2);
    transform: translateY(-2px);
}
.slide-img{
    flex: 1;
    width: auto;
    height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
.slide-dots{
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.dot {
      width: 8px; height: 8px;
      background: rgba(255,255,255,0.45);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s;
    }
.dot.active { background: white; width: 22px; border-radius: 4px; }

/*mini banners*/
.mini-banners {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
.mini-banner {
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.mini-banner-1 {
    background: linear-gradient(135deg, #e91e63, #ff6090);
}
.mini-banner-2 {
    background: linear-gradient(135deg, #ff6d00, #ffa040);
}
.mini-banner-text {
    color: white;
    text-align: right;
}
.mini-banner-text .label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.85;
    letter-spacing: 1px;
}
.mini-banner-text .title {
    font-size: 17px;
    font-weight:800;
    line-height: 1.2;
}
.mini-banner-text .discount {
    font-size: 22px;
    font-weight: 800;
    color: #ffe082;
}
.mini-banner-icon {
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: 50px;
    opacity: 0.25;
    color: white;
}
/*promo bar*/
.promo-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}
.promo-item {
    background: white;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.promo-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.promo-icon i { color: var(--primary); font-size: 18px; }
.promo-text strong { font-size: 13px; font-weight: 700; display: block; }
.promo-text span { font-size: 11.5px; color: var(--text-sub); }

/*Flash Sale*/
.flash-sale-section {
    background: linear-gradient(135deg, #1565c0 0%, #2196f3 100%);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 28px;
}
.flash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.flash-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}
.flash-title i { font-size: 22px; color: #ffe082; }
.flash-title strong { font-size: 20px; font-weight: 800; }
.countdown {
    display: flex;
    align-items: center;
    gap: 6px;
}
.count-box {
    background: var(--text);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 800;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.count-sep { color: white; font-size: 20px; font-weight: 800; }
.flash-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.flash-card {
    background: white;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}
.flash-card:hover { transform: translateY(-4px); }
.flash-card img {
    height: 100px;
    object-fit: contain;
    margin: 0 auto 8px;
}
.flash-card .f-name {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.flash-card .f-price { font-size: 15px; font-weight: 800; color: #e53935; }
.flash-card .f-old { font-size: 11px; color: #aaa; text-decoration: line-through; }
.flash-progress {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.flash-bar {
    height: 100%;
    background: linear-gradient(90deg, #e53935, #ff6d00);
    border-radius: 2px;
}

/*section*/
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: '';
    display: block;
    width: 5px;
    height: 22px;
    background: var(--primary);
    border-radius: 3px;
}
.see-all {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.see-all:hover { color: var(--primary-dark); }

/*Brands*/
.brands-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.brand-chip{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}
.brand-chip:hover, .brand-chip.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* ===== FILTER TABS ===== */
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.filter-tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}
.filter-tab:hover, .filter-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/*Product Grid*/
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
/* .product-card: tạo một thẻ sản phẩm, thường được sử dụng để hiển thị thông tin về một sản phẩm cụ thể, bao gồm hình ảnh, tên, giá cả và các chi tiết khác. */
.product-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--border);
    transition: all 0.22s;
    cursor: pointer;
    position: relative;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(33,150,243,0.18);
    border-color: var(--primary-mid);
}

.card-badges {
    position: absolute;
    top: 10px; left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}
.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-sale { background: #f44336; color: white; }
.badge-new { background: #4caf50; color: white; }
.badge-hot { background: #ff6d00; color: white; }

.card-img-wrap {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    background: #f8fbff;
}
.card-img-wrap img {
    max-height: 138px;
    object-fit: contain;
    transition: transform 0.25s;
}
.product-card:hover .card-img-wrap img { transform: scale(1.06); }

.card-body { padding: 12px 14px 14px; }
.card-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-prices { margin-bottom: 8px; }
.price-new {
    font-size: 16px;
    font-weight: 800;
    color: #e53935;
    display: block;
}
.price-old {
    font-size: 12px;
    color: #aaa;
    text-decoration: line-through;
}
.price-discount {
    font-size: 11px;
    font-weight: 700;
    color: #e53935;
    background: #ffeaea;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.card-stars { color: #ffc107; font-size: 11px; }
.card-stars span { color: var(--text-sub); margin-left: 4px; }
.card-add-btn {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1.5px solid var(--primary-mid);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.card-add-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ===== FOOTER ===== */
footer {
    background: var(--primary-dark);
    color: rgba(255,255,255,0.85);
    padding: 40px 0 20px;
    margin-top: 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}
.footer-brand .logo-text { font-size: 26px; margin-bottom: 12px; display: block; }
.footer-brand p { font-size: 13px; line-height: 1.7; opacity: 0.75; }
.footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.social-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 15px;
    transition: background 0.2s;
    cursor: pointer;
}
.social-btn:hover { background: var(--primary); }
.footer-col h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col ul li {
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.2s;
}
.footer-col ul li:hover { opacity: 1; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    opacity: 0.65;
}

/* ===== CART SIDEBAR ===== */
.cart-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-panel {
    position: fixed;
    top: 0; right: -420px;
    width: 420px; height: 100%;
    background: white;
    z-index: 2001;
    box-shadow: -4px 0 30px rgba(0,0,0,0.12);
    transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
}
.cart-overlay.open .cart-panel { right: 0; }
.cart-head {
    background: var(--primary);
    color: white;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cart-head h3 { font-size: 17px; font-weight: 700; }
.cart-close {
    background: none; border: none;
    color: white; font-size: 22px; cursor: pointer;
}
.cart-body { flex: 1; overflow-y: auto; padding: 16px; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--text-sub); }
.cart-empty i { font-size: 50px; opacity: 0.3; margin-bottom: 12px; }
.cart-item {
    display: flex; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background: #f8fbff; }
.ci-info { flex: 1; }
.ci-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ci-price { font-size: 15px; font-weight: 800; color: #e53935; }
.ci-qty {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
}
.qty-btn {
    width: 26px; height: 26px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: white;
    cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.qty-num { font-weight: 700; font-size: 14px; min-width: 20px; text-align: center; }
.ci-del { color: #ccc; cursor: pointer; font-size: 16px; transition: color 0.2s; }
.ci-del:hover { color: #e53935; }
.cart-foot {
    padding: 16px;
    border-top: 1px solid var(--border);
}
.cart-total {
    display: flex; justify-content: space-between;
    font-size: 16px; font-weight: 700;
    margin-bottom: 14px;
}
.cart-total span:last-child { color: #e53935; font-size: 20px; }
.btn-checkout {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.btn-checkout:hover { background: var(--primary-dark); }

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 3000;
    transition: transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: #2e7d32; }

/* ===== SCROLL TOP ===== */
.scroll-top {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 44px; height: 44px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(33,150,243,0.4);
    opacity: 0; pointer-events: none;
    transition: all 0.25s;
    z-index: 900;
}
.scroll-top.show { opacity: 1; pointer-events: all; }
.scroll-top:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .flash-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-grid { grid-template-columns: 1fr; }
    .cat-sidebar, .mini-banners { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .promo-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .flash-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .promo-bar { grid-template-columns: 1fr 1fr; }
    .header-inner { gap: 10px; }
    .hdr-btn span { display: none; }
    .topbar-left { display: none; }
}/* ===== STORES PAGE ===== */
.stores-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1.5px solid var(--border);
}

.stores-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px; /* Chừa chỗ cho thanh cuộn */
}

/* Tùy chỉnh thanh cuộn cho danh sách mượt hơn */
.stores-list::-webkit-scrollbar { width: 6px; }
.stores-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.stores-list::-webkit-scrollbar-thumb:hover { background: var(--primary-mid); }

.store-item {
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg);
}

.store-item:hover, .store-item.active {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateX(4px);
}

.store-item h4 {
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
}

.store-item p {
    font-size: 13.5px;
    color: var(--text-sub);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.store-item p i {
    width: 16px;
    text-align: center;
    color: var(--primary);
}

.store-map {
    flex: 2;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 500px;
    border: 1.5px solid var(--border);
}

@media (max-width: 900px) {
    .stores-layout { flex-direction: column; }
    .store-map { min-height: 400px; }
    .stores-list { max-height: 350px; }
}/* ===== LOGIN PAGE ===== */
/* ===== LOGIN PAGE & REGISTER PAGE ===== */
.login-page {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Đổi từ center thành flex-start để không bao giờ bị mất đầu trang */
    padding: 60px 20px; /* Tạo khoảng trống trên dưới rộng rãi cho form dài */
}

.login-container {
    width: 100%;
    max-width: 480px; /* Tăng nhẹ độ rộng để form đăng ký nhìn cân đối hơn */
    position: relative;
}

.login-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 35px 30px;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--border);
}

.login-header {
    text-align: center;
    margin-bottom: 25px;
}

.login-header .logo-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 15px;
    box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}

.login-header h2 {
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.login-header p {
    color: var(--text-sub);
    font-size: 14px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.form-group label i {
    color: var(--primary);
    margin-right: 4px;
    width: 16px;
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forgot-pass {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

.forgot-pass:hover {
    text-decoration: underline;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] { 
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: #fafcff;
}

.form-group input:focus {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(33,150,243,0.15);
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.remember-me input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.remember-me label {
    font-size: 13.5px;
    color: var(--text-sub);
    cursor: pointer;
    user-select: none;
}

.btn-login {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.login-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.login-divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; width: 100%;
    height: 1px;
    background: var(--border);
    z-index: 1;
}

.login-divider span {
    background: var(--white);
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-sub);
    position: relative;
    z-index: 2;
}

.social-login {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.btn-social {
    flex: 1;
    padding: 10px;
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-social:hover {
    background: #f4f8ff;
    border-color: var(--primary-mid);
}

.btn-social.google i { color: #db4437; }
.btn-social.facebook i { color: #1877f2; }

.login-footer {
    text-align: center;
    font-size: 14px;
    color: var(--text-sub);
}

.login-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.login-footer a:hover {
    text-decoration: underline;
}


.back-home-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 20px;
    transition: all 0.2s;
    padding: 4px 0;
}

.back-home-inline:hover {
    color: var(--primary);
    transform: translateX(-3px);
}/* ===== HIỆU ỨG HOVER NÚT QUAY LẠI TRANG CHỦ ===== */
.back-home-btn {
    color: var(--text-sub); /* Màu mặc định là màu xám */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease; /* Giúp hiệu ứng đổi màu diễn ra mượt mà trong 0.25 giây */
}

/* Khi di chuột vào (Hover) */
.back-home-btn:hover {
    color: var(--primary) !important; /* Đổi sang màu xanh dương thương hiệu */
    transform: translateX(-4px); /* Dịch nhẹ sang bên trái 4px tạo hiệu ứng chuyển động */
}

/* Nếu bạn đang dùng class back-home-inline hoặc back-home-inside thì thêm cả dòng này */
.back-home-inline:hover, .back-home-inside:hover {
    color: var(--primary) !important;
    transform: translateX(-4px);
}/* ===== ACCOUNT PAGE ===== */
.account-layout {
    display: flex;
    gap: 30px;
}

.account-sidebar {
    flex: 1;
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 24px;
    height: fit-content;
    box-shadow: var(--shadow);
}

.user-avatar-zone {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 15px;
}

.avatar-mock {
    width: 55px;
    height: 55px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.user-meta h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.user-meta p {
    font-size: 13px;
    color: var(--text-sub);
}

.account-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.account-menu li:hover a, 
.account-menu li.active a {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

.account-menu li.logout-item a {
    color: var(--accent2);
}
.account-menu li.logout-item:hover a {
    background: #ffebee;
}

/* Cột phải */
.account-content {
    flex: 3;
}

.content-panel {
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    padding: 25px;
    box-shadow: var(--shadow);
}

.panel-header {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.panel-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.panel-header p {
    font-size: 13.5px;
    color: var(--text-sub);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.info-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-box:nth-child(4) {
    grid-column: span 2; /* Ô địa chỉ rộng ra hết hàng */
}

.info-box label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
}

.info-value {
    padding: 12px 14px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    color: var(--text);
    font-weight: 500;
}

.btn-edit-profile {
    padding: 12px 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-profile:hover {
    background: var(--primary-dark);
}

/* Bảng đơn hàng */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.orders-table th, .orders-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.orders-table th {
    background: var(--bg);
    color: var(--primary-dark);
    font-weight: 700;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.delivering {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.completed {
    background: #e8f5e9;
    color: #2e7d32;
}

@media (max-width: 850px) {
    .account-layout { flex-direction: column; }
    .profile-grid { grid-template-columns: 1fr; }
    .info-box :nth-child(4) { grid-column: span 1; }
}/* ===== HIỆU ỨNG HOVER NÚT ĐĂNG XUẤT TRÊN MENU ===== */
.logout-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-sub); /* Màu xám mặc định */
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* Chuyển động mượt mà chuẩn UI/UX */
}

/* Khi di chuột vào nút Đăng xuất */
.logout-menu-btn:hover {
    color: var(--accent2) !important; /* Đổi chữ và icon sang màu đỏ thương hiệu */
    background-color: rgba(244, 67, 54, 0.08); /* Thêm lớp nền đỏ nhạt sang trọng */
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.12); /* Đổ bóng nhẹ màu đỏ */
    transform: translateY(-1.5px); /* Nổi nhẹ nút lên trên */
}

/* Hiệu ứng đẩy nhẹ icon mũi tên/cánh cửa sang bên phải khi hover */
.logout-menu-btn:hover i {
    transform: translateX(3px);
}

/* Đảm bảo icon cũng có transition để chuyển động mượt */
.logout-menu-btn i {
    transition: transform 0.25s ease;
}.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45); /* Làm tối nền phía sau */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
}

/* Kích hoạt hiển thị Modal */
.modal-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.modal-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 400px;
    text-align: center;
    transform: scale(0.85); /* Hơi thu nhỏ khi ẩn */
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); /* Hiệu ứng nảy nhẹ khi hiện */
}

.modal-overlay.show .modal-card {
    transform: scale(1);
}

.modal-icon {
    font-size: 36px;
    color: var(--accent2);
    background: #ffebee;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.modal-card h3 {
    font-size: 19px;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-card p {
    font-size: 14.5px;
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: 25px;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.btn-modal-cancel, .btn-modal-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-modal-cancel {
    background: var(--bg);
    color: var(--text-sub);
    border: 1.5px solid var(--border);
}

.btn-modal-cancel:hover {
    background: #e3edf7;
    color: var(--text);
}

.btn-modal-confirm {
    background: var(--accent2);
    color: var(--white);
}

.btn-modal-confirm:hover {
    background: #d32f2f;
    transform: translateY(-1px);
}