/* =====================================================
   LOVELYMAKER — BRAND CSS SYSTEM
===================================================== */
@font-face {
    font-family: 'Montserrat';
    src: url('/static/assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/static/assets/fonts/montserrat-v31-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/static/assets/fonts/montserrat-v31-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/static/assets/fonts/montserrat-v31-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ================== ROOT ================== */
:root{
  --color-primary: #0F172A;      
  --color-accent: #FF5A1F;       
  --color-bg: #FFF;          

  --color-text: #1F2937;
  --color-muted: #6B7280;
  --color-border: #E5E7EB;

  --font-heading: 'Montserrat', sans-serif;
  --font-logo: 'Montserrat', sans-serif;
  --font-ui: 'Montserrat', sans-serif;
}

/* ================== GLOBAL ================== */
body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 1.7;
}

/* ================== HEADINGS ================== */
h1,h2,h3,h4,h5{
  font-family: var(--font-heading);
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--color-primary);
}

/* ================== LINKS ================== */
a{
  color: var(--color-primary);
  text-decoration: none;
  transition: .25s ease;
}

a:hover{
  color: var(--color-accent);
}

/* ================== NAVBAR ================== */
@media (max-width:991px){

    .navbar-toggler{
        border:none !important;
        box-shadow:none !important;
    }

    .navbar-toggler:focus{
        box-shadow:none !important;
    }

    .cart-badge{
        font-size:10px;
    }

}
.header-search .form-control{
    height: 45px;
    font-size: 16px;
    padding-left: 18px;
}

.header-search .btn{
    height: 45px;
    min-width: 70px;
    font-size: 18px;
}

.header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.header-logo img{
    max-height:60px;
}
.header-logo{
    flex:0 0 auto;
}

.header-search{
    flex:1;
    max-width:600px;
    margin:0 auto;
}

.header-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
}


.bg-dark{
  background: var(--color-primary) !important;
}


.navbar-nav .nav-link{
  font-family: var(--font-ui);
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13.5px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.2;
}

.navbar-nav .nav-link:hover{
  color: var(--color-accent);
}


.membership-item{
    position:relative;
}

.membership-link{
    position:relative;
    font-weight:700;
    color:#111827 ;
}

.membership-link:hover{
    color:#ff5a1f ;
}

/* RIBBON */
.membership-ribbon{
    position:absolute;

    top:-1px;
    left:-10px;

    transform:rotate(-16deg);

    font-size:9px;
    font-weight:800;
    letter-spacing:.4px;

    background:#ff5a1f;
    color:#fff;

    padding:2px 6px;
    border-radius:4px;

    line-height:1;

    z-index:2;

    box-shadow:0 2px 8px rgba(255,90,31,.22);
}
/* ===== ACCENT BUTTON ===== */
.btn-accent{
  background: #FF5A1F;
  border: none;
  color: #fff;
  font-weight: 600;
}

.btn-accent:hover{
  background: #e14e17;
  color: #fff;
}


.input-group .form-control{
  border-right: none;
}

.input-group .btn-accent{
  border-left: none;
}

/* =========================================
   SEARCH BANNER
========================================= */
.banner-search-input {
    background: #fff;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.banner-search-input input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.5rem;
}

.banner-search-input input::placeholder {
    color: #6c757d;
}

/* =========================================
   PRODUCT CARD CATEGORY
========================================= */
.card {
    border: none;
    cursor: default;
    transition: transform .2s, box-shadow .2s;
}

@media (max-width: 576px){

  .free-download-btn{
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;

    white-space: nowrap;
  }

}

.card img {
    transition: transform .3s ease;
}

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

.card h6 a {
    color: #212529;
    transition: color .2s;
}
.card h6 a:hover {
    color: #0d6efd;
}


/* =========================================
   CART BADGES HEADER
========================================= */
.cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    background: #ff3b30;
    color: white;

    font-size: 11px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.2);

    transition: all 0.2s ease;
}

/* animation */
.cart-badge.bump {
    transform: scale(1.3);
}

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

#productModal .modal-dialog{
    max-width:1000px;
    width:95%;
}

#productModal .modal-content{
    border:none;
    border-radius:18px;
    overflow:visible;
    padding:8px;
}

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

.product-modal-layout{
    display:flex;
    gap:28px;
    align-items:flex-start;
}

.product-modal-left{
    flex:0 0 52%;
    max-width:52%;
    min-width:0;
}

.product-modal-right{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
}

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

.gallery-main{
    background:#f8f8f8;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:1/1;
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;   /* 👈 QUAN TRỌNG */
    display:block;
}

/* =========================================
   THUMBNAIL
========================================= */

.thumb-slide-wrapper{
    overflow-x:auto;
    white-space:nowrap;
    padding-top:12px;
}

#thumbContainer{
    display:flex;
    gap:10px;
}

#thumbContainer img{
    width:74px;
    height:74px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    border:2px solid transparent;
    transition:.2s;
    flex-shrink:0;
    aspect-ratio:1/1;
}

#thumbContainer img:hover{
    transform:scale(1.05);
}

#thumbContainer img.active{
    border-color:#0d6efd;
}

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

.product-price{
    font-size:32px;
    font-weight:800;
    color:#dc3545;
    margin-bottom:20px;
    line-height:1;
}

.option-group{
    margin-bottom:16px;
}

.option-group label{
    font-size:14px;
    font-weight:600;
    margin-bottom:8px;
    display:block;
    color:#222;
}

.option-select{
    width:100%;
    height:48px;

    border:1px solid #e4e4e4;
    border-radius:14px;

    background-color:#fff;

    padding:0 44px 0 16px;

    font-size:14px;
    font-weight:500;
    color:#222;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    transition:.18s ease;

    box-shadow:none !important;

    /* custom arrow */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
}

.option-select:hover{
    border-color:#bdbdbd;
    background-color:#fcfcfc;
}

.option-select:focus{
    outline:none;
    border-color:#111;
    box-shadow:0 0 0 4px rgba(0,0,0,.06) !important;
}

/* option text */
.option-select option{
    font-size:14px;
    color:#222;
}
.product-description{
    color:#666;
    line-height:1.7;
    margin-top:6px;
    margin-bottom:28px;
    font-size:15px;
}

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

.product-actions .btn{
    height:50px;
    border-radius:12px;
    font-weight:600;
}
.product-modal-right{
    position:relative;
}

.product-modal-close{
    position:absolute;
    top:-18px;
    right:-18px;
    z-index:9999;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background-color:#fff;
    opacity:1;
    background-size:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);

}
.product-modal-close:hover{
    background-color:#e9e9e9;
    transform:scale(1.05);
}
/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    /* MODAL */
    #productModal .modal-dialog{
        width:100%;
        max-width:100%;
        margin:0;
        padding:10px;
    }

    #productModal .modal-content{
        border:none;
        border-radius:20px;
        padding:12px;
        overflow:visible;
    }

    /* LAYOUT */
    .product-modal-layout{
        flex-direction:column;
        gap:16px;
    }

    .product-modal-left,
    .product-modal-right{
        flex:0 0 100%;
        max-width:100%;
        width:100%;
    }

    /* IMAGE */
    .gallery-main{
        border-radius:16px;
        overflow:hidden;
    }

    .gallery-main{
        aspect-ratio:1/1;
    }

    .gallery-main img{
        width:100%;
        height:100%;

        object-fit:cover;
        display:block;
    }

    /* THUMB */
    .thumb-slide-wrapper{
        padding-top:10px;
    }

    #thumbContainer{
        display:flex;
        gap:8px;
    }

    #thumbContainer img{
        width:58px;
        height:58px;
        object-fit:cover;
        border-radius:10px;
        flex-shrink:0;
    }

    /* RIGHT */
    .product-modal-right{
        padding:0 2px;
    }

    /* TITLE */
    .product-title{
        font-size:15px;
        line-height:1.3;
        font-weight:700;
        margin-bottom:12px;
    }

    /* PRICE */
    .product-price{
        font-size:20px;
        font-weight:800;
        margin-bottom:14px;
    }
    
    .option-select{
        height:44px;

        border-radius:12px;

        font-size:13px;

        padding:0 40px 0 14px;

        background-size:14px;
    }

    

    /* DESCRIPTION */
    .product-description{
        font-size:14px;
        line-height:1.6;
        margin-bottom:18px;
    }

    /* BUTTONS */
    .product-actions{
        margin-top:4px;
    }

    .product-actions .btn{
        height:48px;
        font-size:15px;
        font-weight:700;
        border-radius:14px;
    }

    /* CLOSE */
    .product-modal-close{
        width:44px;
        height:44px;

        top:-10px;
        right:-10px;

        background-size:14px;

        box-shadow:0 6px 18px rgba(0,0,0,.16);
    }
}
/* =========================================
   CATEGORY FILTER
========================================= */
.category-filters {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.category-filters .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-filters .filter-buttons .btn-outline-primary.active {
    background: #0d6efd;
    color: #fff;
}

.modal-title,
.modal-title * {
    color: #212529 !important;
    text-decoration: none !important;
}

/* =========================================
   TEXT FIXED 2 LINE
========================================= */
.text-2-line-fixed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    min-height: 2.8em;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .text-2-line-fixed {
        font-size: 0.875rem;
        line-height: 1.35em;
        min-height: 2.7em;
    }
}

/* =========================================
   CART PAGE / CART DRAWER
========================================= */
.cart-item-card {
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s;
}

.cart-item-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.cart-item-card img {
    border-radius: 8px;
    object-fit: cover;
}

.btn-remove-item { min-width: 80px; }

/* Offcanvas Cart */
.offcanvas-cart {
    width: 30vw !important;
    min-width: 300px;
}

@media (max-width: 768px) {
    .offcanvas-cart {
        width: 90vw !important;
    }

    .cart-item-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.offcanvas-cart .offcanvas-body {
    overflow-y: auto;
    padding: 1rem;
}

.cart-drawer-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 1rem;
}


/* =========================================
   CATE FAQ
========================================= */

.accordion-button {
  background: #fff;
}

.accordion-button:not(.collapsed) {
  background: #f8f9fa;
  color: #000;
}

.accordion-item {
  border: 1px solid #eee;
}

.accordion-body {
  line-height: 1.7;
}


/* =========================================
   CKEDITOR
========================================= */
.blog-content {
  font-size: 1rem;
  line-height: 1.75;
  color: #212529;
}

/* Headings */
.blog-content h1 {
  font-size: 1.75rem;
  margin: 2rem 0 1rem;
  font-weight: 600;
}

.blog-content h2 {
  font-size: 1.5rem;
  margin: 1.75rem 0 1rem;
  font-weight: 600;
}

.blog-content h3 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.75rem;
  font-weight: 600;
}

.blog-content h4 {
  font-size: 1.1rem;
  margin: 1.25rem 0 0.75rem;
}

/* Paragraph */
.blog-content p {
  margin-bottom: 1rem;
}

/* Images */
.blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 0.5rem;
}

/* Center image if wrapped in <figure> */
.blog-content figure {
  margin: 2rem auto;
  text-align: center;
}

.blog-content figure img {
  margin: 0 auto;
}

/* Lists */
.blog-content ul,
.blog-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

/* Blockquote */
.blog-content blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  color: #6c757d;
  margin: 1.5rem 0;
}

/* Fix size heading CKEditor */
.ck-content h1 { font-size: 28px; font-weight:700; }
.ck-content h2 { font-size: 24px; font-weight:700; }
.ck-content h3 { font-size: 20px; font-weight:600; }
.ck-content h4 { font-size: 18px; font-weight:600; }
.ck-content h5 { font-size: 16px; font-weight:600; }

.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6{
    margin-top:1rem;
    margin-bottom:.75rem;
    line-height:1.3;
}

.ck-content p{
    margin-bottom:1rem;
}

.ck-content figure{
    width:100% !important;
    max-width:100% !important;
    margin:1rem 0 !important;
}

.ck-content figure img{
    width:100% !important;
}
.ck-content ul,
.ck-content ol{
    padding-left:1.25rem;
    margin-bottom:1rem;
}

.ck-content li{
    margin-bottom:.35rem;
}
.ck-content table{
    width:100%;
    display:block;
    overflow-x:auto;
}
.ck-content {
  min-height: 320px;
  font-size: 16px;
  line-height: 1.7;
}

.ck-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ck-skeleton:empty {
  min-height: 320px;
}

.card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* =========================================
   PAGE CONTACT
========================================= */

.contact-info-box {
    max-width: 520px;
    margin: 30px auto;
    padding: 25px;
    background: #f9f9f9;
    border-radius: 10px;
    text-align: center;
}

.contact-info-box h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

.contact-item {
    font-size: 15px;
    margin-bottom: 10px;
}

.contact-item a {
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

.contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
}

.btn-contact {
    display: block;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s;
}

.btn-contact:hover {
    opacity: 0.9;
}

/* Màu theo nền tảng */
.btn-contact.zalo {
    background: #0068ff;
}

.btn-contact.facebook {
    background: #1877f2;
}

.btn-contact.instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}


/* =========================================
   LOVELY FOOTER
========================================= */

.footer-lovely{
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-ui);
}


/* =========================================
   LOGO
========================================= */
.footer-logo{
    display:flex;
    justify-content:center;
    align-items:center;
}
.footer-logo img{
    width:100%;
    max-width:180px;
    aspect-ratio:1/1;
    object-fit:contain;
}

/* =========================================
   TITLES
========================================= */

.footer-lovely .footer-title{
  font-family: var(--font-heading);
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}


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

.footer-lovely p{
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.8;
}


/* ====Links==== */

.footer-lovely a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: .25s;
  font-size: 14px;
}

.footer-lovely a:hover{
  color: var(--color-accent);
  padding-left: 4px;
}


/* ====HR==== */

.footer-lovely hr{
  border-color: rgba(255,255,255,.12);
}


/*====SOCIAL ICON====*/

.footer-social a{
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

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

  transition: .25s;
}

.footer-social a:hover{
  background: var(--color-accent);
  transform: translateY(-3px);
  padding-left: 0;
}

.footer-social a i{
  font-size: 18px;
}


/* ====PAYMENT ICON==== */

.footer-payment-icons{
  align-items: center;
}

.footer-payment-icons i{
  font-size: 36px;
  opacity: .9;
  transition: .25s;
}

.footer-payment-icons i:hover{
  opacity: 1;
  transform: translateY(-3px);
  color: var(--color-accent);
}


/* =========================================
   MOBILE FOOTER
========================================= */

@media (max-width: 767px){

  .footer-lovely .row{
    display: flex;
    flex-wrap: wrap;
  }

  /* LOGO */
  .footer-lovely .footer-logo{
    width: 100%;
    order: 1;
    text-align: center;
    margin-bottom: 30px;
  }

  /* ABOUT */
  .footer-lovely .footer-about{
    width: 60%;
    order: 2;
  }

  .footer-lovely .footer-about p{
    text-align: justify;
    line-height: 1.7;
    padding-right: 10px;
  }

  /* CATEGORY */
  .footer-lovely .footer-category{
    width: 40%;
    order: 3;
  }

  /* LINKS */
  .footer-lovely .footer-links{
    width: 50%;
    order: 4;
    margin-top: 10px;
  }

  /* SOCIAL */
  .footer-lovely .footer-social{
    width: 50%;
    order: 5;
    text-align: center;
    margin-top: 10px;
  }

  .footer-lovely .footer-social .d-flex,
  .footer-payment-icons{
    justify-content: center;
  }

  .footer-payment-icons i{
    font-size: 32px;
  }

}
/* =========================================
   MOBILE HEADER
========================================= */
.mobile-header{
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1050;
  padding: 8px 0;
}



.mobile-logo img{
  max-height: 38px;
}

/* ===== PRICE ===== */
.price-text{
  color: #0F172A;
  font-size: 16px;
}

/* ===== CART ICON BUTTON ===== */
.btn-cart-icon{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #FAF7F2;
  color: #FF5A1F;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.btn-cart-icon:hover{
  transform: scale(1.08);
  background: #EFE7DC;
}

/* ================================
   CART DRAWER
================================ */

#cartOffcanvasLabel{
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* ===== WRAPPER FIX ===== */
.cart-items-list{
  padding: 0 14px;
  box-sizing: border-box;
}

/* ===== ROW ===== */
.cart-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* ===== COLUMN 1: IMAGE ===== */
.cart-thumb{
  flex: 0 0 64px;
}

.cart-thumb img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ===== COLUMN 2: INFO ===== */
.cart-info{
  flex: 1 1 auto;
  min-width: 0; /* FIX overflow */
}

/* TITLE — 2 LINES MAX */
.cart-title{
  font-weight: 600;
  color: #0F172A;
  text-decoration: none;
  line-height: 1.4;

  display: -webkit-box;
  -webkit-line-clamp: 2;
   line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  margin-bottom: 4px;
}

.cart-attrs{
  font-size: 12px;
  color: #0F172A;
  line-height: 1.5;
}

/* ===== COLUMN 3: META ===== */
.cart-meta{
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.cart-qty{
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.cart-price{
  font-weight: 600;
  font-size: 15px;
  color: #111;
}

/* ===== REMOVE BUTTON ===== */
.btn-remove-item{
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: #f3f3f3;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .15s ease;
  cursor: pointer;
}

.btn-remove-item i{
  font-size: 14px;
}

.btn-remove-item:hover{
  background: #ffe5e5;
  color: #d00;
}

/* ===== FOOTER ===== */
.cart-drawer-footer{
  border-top: 1px solid #eee;
  padding: 16px;
  background: #fff;
  box-sizing: border-box;
}

.cart-total{
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}


/* ================================
   ACCOUNT
================================ */
.account-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* base button */
.btn-account {
    display: block;
    padding: 12px 16px;
    border-radius: 999px;

    border: 1px solid #c55f00;
    background: #fff;

    text-align: center;
    text-decoration: none;
    color: var(--color-primary);

    font-weight: 500;

    transition: all 0.2s ease;
}

/* hover */
.btn-account:hover {
    background: #d7d7d7;
    color: var(--color-primary);
    border-color: var(--color-muted);
}

/* active page */
.btn-account.active {
    background: #e10000;
    color: #fff;
    border-color: #111827;
}

/* logout danger */
.btn-account.danger {
    border: 1px solid #ef4444;
    color: #ef4444;
}

.btn-account.danger:hover {
    background: #ef4444;
    color: #fff;
}


/* =========================
   PRODUCT DETAIL GALLERY
========================= */
.product-description.is-collapsed {
    max-height: 300px;
    overflow: hidden;
    position: relative;
}

.product-description.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(
        transparent,
        white
    );
}

.breadcrumb-scroll {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.breadcrumb-scroll::-webkit-scrollbar {
    display: none;
}

.breadcrumb {
    flex-wrap: nowrap !important;
    margin-bottom: 0;
}

.breadcrumb-item {
    flex-shrink: 0;
}

.product-detail-title{
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .75rem;

    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;

    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.product-detail-price{
    font-size: 1.75rem;
    font-weight: 800;
    color: #dc3545;
}


.product-detail-gallery .card-body{
    padding:10px;
}

.product-detail-image{
    width:100%;
    display:block;
    border-radius:8px;
}

.product-detail-thumb{
    width:90px;
    height:90px;
    object-fit:cover;
    cursor:pointer;
    border:1px solid #e5e5e5;
    border-radius:6px;
    flex-shrink:0;
}