body {
    background-color: #f5f5f5;
}
a {
    text-decoration: none;
    color: black;
}
strong {
    font-weight: 600;
}
.pagination {
    margin-bottom: 0px !important;
}
/* size */
.size-09 {
    font-size: 0.9rem;
}
.size-08 {
    font-size: 0.8rem;
}
.size-07 {
    font-size: 0.7rem;
}
.size-06 {
    font-size: 0.6rem;
}
.size-1 {
    font-size: 1rem;
}
.size-1-1 {
    font-size: 1.1rem;
}
.size-1-2 {
    font-size: 1.2rem;
}
.size-1-3 {
    font-size: 1.3rem;
}
.size-1-4 {
    font-size: 1.4rem;
}
.size-1-5 {
    font-size: 1.5rem;
}
.size-1-6 {
    font-size: 1.6rem;
}
.size-1-7 {
    font-size: 1.7rem;
}
.size-1-8 {
    font-size: 1.8rem;
}   
.size-1-9 {
    font-size: 1.9rem;
}
.size-2 {
    font-size: 2rem;
}
/* width */
.w-5 {
    width: 5%;
}
.w-10 {
    width: 10%;
}
.w-15 { 
    width: 15%;
}
.w-20 {
    width: 20%;
}
.w-25 { 
    width: 25%;
}
.w-30 {
    width: 30%;
}
.w-35 { 
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {     
    width: 45%;
}
.w-50 {
    width: 50%;
}
.w-55 {     
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-65 {     
    width: 65%;
}
.w-70 {
    width: 70%;
}
.w-75 {         
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-85 {         
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-95 { 
    width: 95%;
}
.w-100 {
    width: 100%;
}
.bg-main {
    background-color:#062462;
}
.text-main{
    color: #062462;
}
.text-title-custom{
    color: rgb(6 36 98) !important;
}
.bg-light-gray {
    background-color: #f8f9fa;
}
.border-light-custom {
    border: 1px solid #eee;
}
.content-detail h2 {
    font-size: 1.2rem;
}
.content-detail p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
/* box product */
.box-product {
    position: relative;
}
.box-product:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid red;
}
.box-percent-sale {
    position: absolute;
    top: -1px;
    right: -1px;
    background-color: #dc3545;
    color: white;
    border-radius: 0 5px 0 0;
}
.box-code-product {
    position: absolute;
    top: -1px;
    left: -1px;
    background-color: #0d6efd;
    color: white;
    border-radius: 5px 0 0 0;
    opacity: .8;
}
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* search */
.search-wrapper {
    margin: 0 auto;
}

.search-box {
    position: relative;
    background: white;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.search-box:focus-within {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.search-input {
    border: 2px solid #eee;
    border-radius: 30px;
    padding: 8px 20px;
    width: 100%;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #007bff;
    box-shadow: none;
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    transition: all 0.3s ease;
}

.search-box:focus-within .search-icon {
    color: #007bff;
}

.recent-searches {
    color: #666;
    font-size: 0.8rem;
    padding: 10px 20px;
    background: #f8f9fa;
    border-radius: 15px 15px 0 0;
}
.category-active {
    color: #dc3545;
}
.border-bottom-dotted {
    border-bottom: 1px dotted #ddd;
}
.border-bottom-dotted:last-child {
    border-bottom: none;
}
/* ===== Responsive Styles ===== */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Small devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    /* .container {
        --bs-gutter-x: 0.5rem;
    } */
}