* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    background: #fff;
}

.apple-nav {
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #e5e5e5;
}

.nav-container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.nav-logo-text {
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1d1d1f;
}
.nav-left a.nav-logo-text {
    text-decoration: none !important;
    border: none !important;
}
.nav-center {
    display: flex;
    justify-content: center;
    gap: 60px;
}

    .nav-center a {
        text-decoration: none !important;
        border-bottom: none !important;
        font-size: 16px;
        color: #1d1d1f;
    }

.nav-right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-icon {
    width: 22px;
    height: 22px;
    stroke: #1d1d1f;
    stroke-width: 2;
    fill: none;
}

.icon-btn:hover {
    opacity: 0.6;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.brand-title-section {
    padding: 60px 60px 20px;
}

.brand-title {
    font-size: 64px;
    font-weight: 600;
    color: #1d1d1f;
}
/* ================= BRAND TITLE ================= */

.brand-title-section {
    padding: 60px 60px 20px;
}

.brand-title {
    font-size: 64px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}


/* ================= CAROUSEL WRAPPER ================= */

.carousel-wrapper {
    position: relative;
    padding: 0 60px 80px;
}


/* ================= CAROUSEL ================= */

.carousel {
    display: flex;
    gap: 40px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


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

.product-card {
    min-width: 260px;
    flex-shrink: 0;
    text-align: center;
    padding: 24px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #ececec;
    transition: all .35s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
    }
/*=========================Profiles======================*/
.profile-container {
    max-width: 600px;
    margin: 80px auto;
    text-align: center;
}

.profile-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.profile-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

    .profile-actions .btn {
        display: inline-block;
        margin: 5px;
        padding: 10px 20px;
        background: #0071e3;
        color: #fff;
        border-radius: 20px;
        text-decoration: none;
    }

.logout {
    background: #e53935;
}
/*=====================DARKMODE===================================*/
.dark-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
}
/*===================== DARK MODE =====================*/
body.dark {
    background: #121212;
    color: #ffffff;
}

/* Smooth transition */
body {
    transition: background 0.3s, color 0.3s;
}

    /*===================== HEADER =====================*/
    body.dark .apple-nav {
        background: #1c1c1e;
        border-bottom: 1px solid #333;
    }

    /* Logo */
    body.dark .nav-logo-text {
        color: #ffffff !important;
    }

    /* Menu */
    body.dark .nav-center a {
        color: #ffffff !important;
    }

        body.dark .nav-center a:hover {
            color: #4da3ff !important;
        }

    /*===================== ICON =====================*/
    body.dark .nav-icon {
        stroke: white !important;
    }

        /* Nếu icon dùng fill */
        body.dark .nav-icon path,
        body.dark .nav-icon circle {
            fill: white !important;
        }

    /* Button icon */
    body.dark .icon-btn {
        color: white;
    }

    /*===================== PRODUCT CARD =====================*/
    body.dark .product-card {
        background: #1e1e1e;
        color: white;
        box-shadow: 0 6px 25px rgba(0,0,0,0.6);
        transition: all 0.3s ease;
    }

        /* Hover card */
        body.dark .product-card:hover {
            transform: translateY(-5px);
        }

        /* Text */
        body.dark .product-card h3,
        body.dark .product-card p {
            color: #ffffff;
        }

        /* Button */
        body.dark .product-card a,
        body.dark .product-card button {
            background: #0071e3;
            color: white;
            border: none;
        }

    /*===================== INPUT =====================*/
    body.dark input {
        background: #2a2a2a;
        color: white;
        border: 1px solid #444;
    }

    /*===================== FILTER =====================*/
    body.dark .filter-btn {
        background: #2a2a2a;
        color: white;
    }

    /*===================== TITLE =====================*/
    body.dark .brand-title {
        color: #ffffff;
    }

/*===================== DARK BUTTON =====================*/
.dark-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .dark-btn:hover {
        transform: scale(1.1);
        background: rgba(255,255,255,0.2);
    }

    /* Icon animation */
    .dark-btn svg {
        transition: transform 0.4s ease;
    }

body.dark .dark-btn svg {
    transform: rotate(180deg);
}
/* ================= IMAGE ================= */

.product-image-wrap {
    background: #f5f5f7;
    border-radius: 16px;
    padding: 20px 16px;
    margin-bottom: 24px;
}

    .product-image-wrap img {
        width: 100%;
        max-height: 180px;
        object-fit: contain;
    }


/* ================= TEXT ================= */

.product-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.price {
    font-size: 16px;
    color: #686868;
}


/* ================= ACTIONS ================= */

.product-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.btn-learn {
    background: #0071e3;
    color: white;
    padding: 10px 22px;
    border-radius: 22px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

    .btn-learn:hover {
        background: #005bb5;
        color: white;
    }

    .btn-learn:hover {
        background: #005bb5;
    }

.btn-buy {
    display: inline;
    font-weight: 500;
}


/* ================= ARROWS ================= */

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #f2f2f2;
    cursor: pointer;
    font-size: 22px;
    color: #333;
    z-index: 10;
}

    .carousel-btn.left {
        left: 10px;
    }

    .carousel-btn.right {
        right: 10px;
    }

    .carousel-btn:hover {
        background: #e5e5e5;
    }


/* ================= VIDEO BANNER ================= */

.video-banner {
    position: relative;
    height: 360px;
    margin: 20px 60px 60px;
    border-radius: 28px;
    overflow: hidden;
    background: #000;
}

.video-banner {
    position: relative;
}

    .video-banner video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* overlay */
    .video-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15) );
        z-index: 1;
    }

.video-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
    padding: 60px;
    color: #fff;
}

    .video-content h2 {
        font-size: 42px;
        font-weight: 600;
        margin-bottom: 12px;
        line-height: 1.1;
    }

    .video-content p {
        font-size: 18px;
        opacity: 0.9;
        line-height: 1.4;
    }


/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

    .brand-title-section {
        padding: 40px 20px 10px;
    }

    .brand-title {
        font-size: 36px;
    }

    .carousel-wrapper {
        padding: 0 20px 40px;
    }

    .video-banner {
        height: 260px;
        margin: 16px 20px 40px;
        border-radius: 20px;
    }

    .video-content {
        padding: 32px;
    }

        .video-content h2 {
            font-size: 28px;
        }

        .video-content p {
            font-size: 14px;
        }
}



.nav-link {
    text-decoration: none;
    font-size: 14px;
    color: #1d1d1f;
}
.apple-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.sub-title-row {
    margin-top: 15px;
    display: flex;
    gap: 30px;
}

.sub-title-link {
    font-size: 18px;
    color: #0071e3;
    text-decoration: none;
    font-weight: 500;
}

    .sub-title-link:hover {
        text-decoration: underline;
    }
/* ================= CART SECTION ================= */

.cart-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 60px;
}

.cart-title {
    font-size: 48px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 40px;
}


/* ================= CART TABLE ================= */

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

    .cart-table thead {
        border-bottom: 1px solid #e5e5e5;
    }

    .cart-table th {
        text-align: left;
        font-size: 14px;
        color: #6e6e73;
        font-weight: 500;
        padding-bottom: 14px;
    }

    .cart-table td {
        padding: 22px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .cart-table tbody tr:hover {
        background: #fafafa;
    }

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

.cart-product {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .cart-product img {
        width: 90px;
        border-radius: 14px;
        background: #f5f5f7;
        padding: 10px;
    }

.cart-product-name {
    font-size: 20px;
    font-weight: 500;
    color: #1d1d1f;
}


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

.cart-price {
    font-size: 18px;
    color: #1d1d1f;
    font-weight: 500;
}


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

.cart-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #d2d2d7;
    background: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: .2s;
}

    .quantity-btn:hover {
        background: #0071e3;
        color: #fff;
        border-color: #0071e3;
    }

.cart-quantity span {
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}


/* ================= REMOVE ================= */

.cart-remove {
    font-size: 14px;
    color: #ff3b30;
    font-weight: 500;
    text-decoration: none;
}

    .cart-remove:hover {
        text-decoration: underline;
    }


/* ================= TOTAL ================= */

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.cart-total {
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
}


/* ================= CHECKOUT BUTTON ================= */

.checkout-btn {
    background: #0071e3;
    color: #fff;
    padding: 14px 30px;
    border-radius: 24px;
    font-weight: 600;
    margin-top: 30px;
    display: inline-block;
}

    .checkout-btn:hover {
        background: #005bb5;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }
.specs {
    margin-top: 40px;
}

    .specs ul {
        list-style: none;
        padding: 0;
    }

    .specs li {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }
.filter-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.filter-input,
.filter-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.filter-btn {
    background: #0071e3;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

    .filter-btn:hover {
        background: #005bb5;
    }
.price-filter {
    margin-top: 20px;
    text-align: center;
}

.range-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.price-display {
    margin-bottom: 10px;
    font-weight: 500;
}

input[type=range] {
    width: 200px;
}

.filter-btn {
    background: #0071e3;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}
.product-filter {
    margin-top: 16px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.filter-link {
    font-size: 16px;
    text-decoration: none;
    color: #6e6e73;
    font-weight: 500;
    padding-bottom: 4px;
    transition: all 0.2s ease;
}

    .filter-link:hover {
        color: #000;
    }

    .filter-link.active {
        color: #000;
        border-bottom: 2px solid #000;
    }

.form-container {
    width: 100%;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-box {
    width: 380px;
    background: white;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

    .form-box h2 {
        text-align: center;
        margin-bottom: 25px;
    }

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

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.btn-submit {
    width: 100%;
    padding: 12px;
    background: #0071e3;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

    .btn-submit:hover {
        background: #005bb5;
    }

.validation-error {
    color: red;
    font-size: 13px;
}
/* ACCOUNT PAGE */

.account-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.account-card {
    width: 320px;
    padding: 35px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
}

    .account-card h2 {
        margin-bottom: 25px;
        font-size: 26px;
        font-weight: 600;
    }

.account-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #0071e3;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
}

    .account-btn:hover {
        background: #005bb5;
    }

    .account-btn.logout {
        background: #e53935;
    }

        .account-btn.logout:hover {
            background: #c62828;
        }

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

    .form-control:focus {
        border-color: #0071e3;
        outline: none;
    }

.success-message {
    margin-top: 10px;
    color: green;
    font-size: 14px;
}

.back-link {
    display: block;
    margin-top: 15px;
    text-decoration: none;
    color: #0071e3;
    font-size: 14px;
}

    .back-link:hover {
        text-decoration: underline;
    }

.success-message {
    text-align: center;
    color: green;
    margin-bottom: 10px;
    font-size: 14px;
}

.cart-icon {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}
/* ===== SEARCH HEADER ===== */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Ẩn mặc định */
#searchBox {
    position: absolute;
    right: 40px;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: 0.3s;
}

    /* Khi mở */
    #searchBox.active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

/* Style lại cho đẹp */
.search-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 25px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.search-input {
    border: none;
    outline: none;
    padding: 8px 12px;
    width: 180px;
}

.search-btn {
    border: none;
    background: #0071e3;
    color: white;
    padding: 8px 12px;
    cursor: pointer;
}
.nav-icon {
    width: 20px;
    height: 20px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
}
/* ===== DARK MODE ===== */

body.dark {
    background: #121212;
    color: #ffffff;
}

    /* header */
    body.dark .apple-nav {
        background: #1c1c1e;
    }

    /* logo + menu */
    body.dark .nav-logo-text,
    body.dark .nav-center a {
        color: white !important;
    }

    /* icon svg fix full */
    body.dark .nav-icon,
    body.dark .nav-icon path,
    body.dark .nav-icon circle,
    body.dark .nav-icon line {
        stroke: white !important;
        fill: none !important;
    }

    /* product */
    body.dark .product-card {
        background: #1e1e1e;
        color: white;
    }

    /* input */
    body.dark input {
        background: #2a2a2a;
        color: white;
        border: 1px solid #444;
    }

    /* search header */
    body.dark .search-box-header {
        background: #2a2a2a;
        border: 1px solid #444;
    }

        body.dark .search-box-header .search-input {
            color: white;
        }

        body.dark .search-box-header .search-icon {
            stroke: white;
        }
/* ===== PRODUCT CARD ADVANCED ===== */

.product-card {
    position: relative;
    transition: all .35s ease;
}

    .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
    }

        .product-card:hover img {
            transform: scale(1.05);
        }

.product-image-wrap img {
    transition: transform .35s ease;
}
/* ===== PRODUCT DETAIL LAYOUT ===== */

.product-detail-container {
    display: flex;
    gap: 60px;
    padding: 60px;
    max-width: 1200px;
    margin: auto;
}

.product-detail-image {
    flex: 1;
}

    .product-detail-image img {
        width: 100%;
        border-radius: 20px;
        background: #f5f5f7;
        padding: 20px;
    }

.product-detail-info {
    flex: 1;
}

    .product-detail-info h1 {
        font-size: 34px;
        margin-bottom: 15px;
    }

.product-detail-price {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.product-buy-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #0071e3;
    color: white;
    border-radius: 24px;
    text-decoration: none;
    margin-top: 15px;
}

    .product-buy-btn:hover {
        background: #005bb5;
    }
/* ===== IMAGE ZOOM ===== */

.product-detail-image {
    overflow: hidden;
}

    .product-detail-image img {
        transition: transform .4s ease;
    }

    .product-detail-image:hover img {
        transform: scale(1.1);
    }
/* ===== RELATED PRODUCTS ===== */

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 24px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 24px;
}

.related-item {
    text-align: center;
}

    .related-item img {
        width: 100%;
        border-radius: 16px;
        background: #f5f5f7;
        padding: 16px;
        transition: .3s;
    }

    .related-item:hover img {
        transform: scale(1.05);
    }
/* ===== RESPONSIVE PRODUCT DETAIL ===== */

@media (max-width:900px) {

    .product-detail-container {
        flex-direction: column;
        padding: 40px 20px;
    }

    .product-detail-info h1 {
        font-size: 26px;
    }
}
.cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}
/* ===== FILTER TOOLBAR ===== */

.filter-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

/* ===== SORT + PRICE ===== */

.sort-box,
.price-filter {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sort-box span,
    .price-filter span {
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
    }

    .sort-box a,
    .price-filter a {
        text-decoration: none;
        font-size: 14px;
        color: #6e6e73;
        padding: 6px 12px;
        border-radius: 16px;
        border: 1px solid #e5e5e5;
        transition: all .2s ease;
    }

        .sort-box a:hover,
        .price-filter a:hover {
            background: #f5f5f7;
            color: #000;
            border-color: #d2d2d7;
        }
/* FILTER DROPDOWN */

.filter-dropdown {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.filter-btn {
    padding: 8px 18px;
    border: 1px solid #d2d2d7;
    border-radius: 20px;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 14px;
}

    .filter-btn:hover {
        background: #f5f5f7;
    }

.filter-content {
    display: none;
}

    .filter-content.show {
        display: block;
    }

.filter-dropdown:hover .filter-content {
    display: block;
}

/* nhóm filter */
.filter-group {
    margin-bottom: 16px;
}

    /* tiêu đề CPU RAM SSD */
    .filter-group span {
        display: block;
        font-weight: 600;
        margin-bottom: 6px;
    }

/* container của các option */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    /* link filter */
    .filter-group a {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 16px;
        border: 1px solid #ddd;
        text-decoration: none;
        font-size: 13px;
        color: #1d1d1f;
        background: #f5f5f7;
        transition: all .2s;
    }

        .filter-group a:hover {
            background: #0071e3;
            color: white;
            border-color: #0071e3;
        }

/* SPECIFICATIONS SECTION */

.specs {
    max-width: 800px;
    margin: 80px auto;
    padding: 0 20px;
}

    .specs h2 {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 30px;
        color: #1d1d1f;
    }

/* TABLE */

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

    .specs-table tr {
        border-bottom: 1px solid #e5e5e5;
    }

    .specs-table td {
        padding: 14px 0;
        font-size: 16px;
    }

        /* LEFT COLUMN */

        .specs-table td:first-child {
            width: 180px;
            color: #6e6e73;
            font-weight: 500;
        }

        /* RIGHT COLUMN */

        .specs-table td:last-child {
            color: #1d1d1f;
            font-weight: 600;
        }
.product-detail-container {
    display: flex;
    gap: 40px;
    margin: 40px 0;
}

.product-detail-image img {
    width: 420px;
    border-radius: 10px;
}

.product-detail-info {
    max-width: 500px;
}

    .product-detail-info h1 {
        font-size: 28px;
        margin-bottom: 15px;
    }

.product-detail-price {
    font-size: 24px;
    color: #ffff;
    font-weight: bold;
    margin-bottom: 15px;
}

.product-actions {
    margin-top: 15px;
}

.btn-learn {
    text-decoration: none;
    margin-right: 12px;
    font-weight: 500;
}

    .btn-learn:hover {
        text-decoration: underline;
    }

.btn-buy {
    color: #0071e3;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
}

    .btn-buy:hover {
        background: #0059b8;
    }

.review-section {
    margin-top: 50px;
}

.review-box {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.review-user {
    font-weight: bold;
}

.review-stars {
    color: #ffb400;
    font-size: 18px;
}

.review-comment {
    margin-top: 5px;
    color: #555;
}

.review-form {
    margin-top: 25px;
}

    .review-form input,
    .review-form textarea,
    .review-form select {
        width: 100%;
        padding: 8px;
        margin-top: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .review-form button {
        margin-top: 10px;
        background: #0071e3;
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 5px;
    }
.review-wrapper {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 60px;
}

.review-section {
    max-width: 800px;
}

.review-form input,
.review-form textarea,
.review-form select {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.review-form button {
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
}

    .review-form button:hover {
        background: #005bb5;
    }
.review-form {
    max-width: 500px;
    margin-top: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.review-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.review-textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-height: 100px;
}

.review-btn {
    background: #0071e3;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
}

    .review-btn:hover {
        background: #005bb5;
    }
.pagination {
    margin: 50px 0;
    text-align: center;
}

    .pagination a {
        padding: 8px 14px;
        border: 1px solid #ddd;
        margin: 4px;
        text-decoration: none;
        color: black;
    }

        .pagination a:hover {
            background: #f5f5f7;
        }

    .pagination .active {
        background: black;
        color: white;
        padding: 8px 14px;
        margin: 4px;
    }
.cart-table tr:hover {
    background: #fafafa;
}
.cart-table td {
    padding: 26px 0;
}
.filter-toolbar {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
/*FOOTER*/
.container {
    max-width: 900px;
    margin: 40px auto;
    line-height: 1.6;
}

.faq-item {
    margin-bottom: 20px;
}

    .faq-item h4 {
        margin-bottom: 5px;
    }
.apple-footer {
    background: #f5f5f7;
    padding: 40px 0;
    font-size: 13px;
    color: #6e6e73;
    margin-top: 60px;
}

.af-container {
    max-width: 1200px;
    margin: auto;
    width: 90%;
}

.af-note {
    margin-bottom: 20px;
}

/* GRID */
.af-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* COLUMN */
.af-col h4 {
    font-size: 13px;
    color: #1d1d1f;
    margin-bottom: 10px;
}

.af-col .mt {
    margin-top: 15px;
}

/* LINK */
.apple-footer a {
    display: block;
    margin-bottom: 6px;
    text-decoration: none;
    color: #6e6e73;
}

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

/* bottom */
.af-bottom {
    border-top: 1px solid #d2d2d7;
    margin-top: 25px;
    padding-top: 10px;
    text-align: center;
}

    .af-bottom a {
        color: #0071e3;
    }
  /*Thanh truot*/
#scrollTopBtn {
    position: fixed;
    right: 25px;
    bottom: 40px;
    z-index: 999;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.35s ease;
    backdrop-filter: blur(8px);
}

    /* Khi hiện */
    #scrollTopBtn.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Hover đẹp hơn */
    #scrollTopBtn:hover {
        background: black;
        transform: translateY(-3px) scale(1.05);
    }
/* ===== EDIT PAGE ===== */

.edit-container {
    max-width: 500px;
    margin: 60px auto;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Title */
.edit-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Input group */
.edit-group {
    margin-bottom: 15px;
}

    .edit-group label {
        display: block;
        font-size: 14px;
        margin-bottom: 5px;
        color: #666;
    }

    .edit-group input {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #ddd;
        transition: 0.2s;
    }

        /* focus */
        .edit-group input:focus {
            border-color: #0071e3;
            outline: none;
        }

/* button */
.btn-save {
    width: 100%;
    background: #0071e3;
    color: white;
    padding: 12px;
    border-radius: 20px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-save:hover {
        background: #005bb5;
    }
/*CREATE PAGE*/
.create-container {
    width: 420px;
    margin: 60px auto;
    padding: 30px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

    .create-container h2 {
        text-align: center;
        margin-bottom: 25px;
        font-weight: 600;
    }

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

    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
    }

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: 0.2s;
}

    .form-control:focus {
        border-color: #0071e3;
        outline: none;
        box-shadow: 0 0 0 2px rgba(0,113,227,0.2);
    }

.btn-submit {
    width: 100%;
    padding: 10px;
    background: #0071e3;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-submit:hover {
        background: #005bb5;
    }
.dashboard-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
}

.dashboard-title {
    font-size: 48px;
    font-weight: 700;
    color: #0a58ca;
    margin-bottom: 40px;
}

/* CARD */

.stats-grid {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 250px;
    padding: 28px;
    border-radius: 18px;
    color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

    .stat-card h3 {
        font-size: 28px;
        margin-top: 15px;
        font-weight: 700;
    }

    .stat-card p {
        font-size: 22px;
        font-weight: 600;
        opacity: 0.95;
    }

.revenue-card {
    background: linear-gradient(135deg,#11998e,#38ef7d);
}

.pending-card {
    background: linear-gradient(135deg,#f7971e,#ffd200);
    color: #222;
}

.stock-card {
    background: linear-gradient(135deg,#ff416c,#ff4b2b);
}

/* TABLE */

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

    .dashboard-table thead {
        background: #0d6efd;
        color: #fff;
    }

    .dashboard-table th {
        padding: 18px;
        text-align: left;
        font-size: 17px;
    }

    .dashboard-table td {
        padding: 18px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        color: #222;
        font-weight: 500;
    }

    .dashboard-table tbody tr:hover {
        background: #f5f9ff;
    }

/* PRICE */

.price-text {
    color: #e60023;
    font-weight: 700;
}

/* BADGE */

.badge-success {
    background: #28a745;
    color: white;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 14px;
}

.badge-danger {
    background: #dc3545;
    color: white;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 14px;
}

.badge-stock {
    background: #6c757d;
    color: white;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 14px;
}

/* BUTTON */

.dashboard-actions {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.dashboard-btn {
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: 0.3s;
}

    .dashboard-btn:hover {
        transform: translateY(-3px);
    }

.btn-product {
    background: #0d6efd;
}

.btn-order {
    background: #17a2b8;
}