body {
    margin: 0px;
    padding: 0px;
    font-family:"Segoe UI", sans-serif;
    background-color: #f2ede6;
    -webkit-font-smoothing: antialiased;
    font-weight: 300 !important;
    display:block;
}
h1,h2,h3,h4,strong,b{
    margin: 0px;
    padding: 0px;
    font-weight:500;
}
.khong-bit-noi-j{
    max-width: 1300px;
    width: 100%;
    display:flex;
    gap: 30px;
    margin: auto;
    padding: 0 15px;
    box-sizing: border-box;
}
#div-chi-xuat-hien-de-clear{
    clear: both;
}
#dau {
    width: 100%;
    max-height: 40px;
    height: 100%;
    background-color: #fcfcfa;
    border-bottom: 1px solid #e3dccf;
    display: flex;
    justify-content: space-between; /* đẩy trái – phải ra 2 bên */
    align-items: center;
    padding: 0 px;
}
#dau .ben-trai  {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center; 
}
#dau .ben-trai h1 {
    font-size: 14px;
    color: #667085;
    margin: 0;
}
#dau .ben-phai {
    width:30%;
    height: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align:end;
}
#dau .ben-phai h1 {
    font-size: 14px;
    color: #667085;
    margin: 0 0 0 20px;
}
#trang-chinh {
    width: 100%;
    height: auto;
    background-color: #f5f3ed;
    border-bottom: 1px solid #e3dccf;
}
#trang-chinh .khong-bit-noi-j{
    justify-content:space-between;
}
#logo {
    width: max-content; 
    height: 100%;
    display: flex;
}
#logo .ben-trai {
    width: 20%;
    height: 100%;
}
#logo .khung {
    width: 100%;
    max-width: 48px;
    max-height: 48px;
    height: 100%;
    border-radius: 7px;
    margin-top: 15px;
    border: 3px;
}
#logo img {
    max-width:100%;
    height:auto;
    margin: auto;
    border-radius: 15px;
    border: 3px;
}
#logo .ben-phai {
    width: 80%;
    height: 100%;
}
#logo h1 {
    font-size: 16px;
    color: black;
    margin-left: 7px;
    margin-top: 20px;
    font-weight: bold;
}
#logo h2 {
    font-size: 12px;
    color: #667085;
    margin-left: 7px;

}
#tim-kiem {
    width:36%;
    height:80px;
    display:flex;
    align-items:center;
    position:relative;
}
#tim-kiem input{
    flex:1;
    height:75%;
    border-radius:50px;
    border:1px solid #e3dccf;
    padding-left:20px;
    font-size:16px;
    box-sizing:border-box;
}
#tim-kiem span{
    position: absolute;
    right: 10px;  
    top: 50%;
    transform: translateY(-50%);
    background: #b87848;
    color: white;
    padding: 10px 15px;
    border-radius: 30px;
    box-shadow: 2px 2px 5px gray;
    transition: 0.2s;
    font-weight: normal;
}
#tim-kiem input:focus{
    box-shadow:
    0 0 5px  #c78654,
    0 0 15px #c78654;
}
#tim-kiem span:hover{
    transform:translateY(-60%);
}
#lua-chon{
    width: 29%;
    height: 100%;
    display: flex;

}
#lua-chon .box{
    width: 100%;
    height: 47px;
    background-color: #fcfbfa;
    margin-left: 10px;
    margin-top: 15px;
    border-radius: 30px;
    border: 1px solid #e3dccf;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow: 2px 2px 5px gray;
    transform:translateY(0%);
    transition: 0.2s;
}
#lua-chon .box:hover{
    transform:translateY(-10%);
}
#lua-chon a{
    font-size: 16px;
    color: black;
    text-decoration: none;
    font-weight:600 ;
}
#thong-tin{
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #e3dccf;
    border-top: 1px solid #e3dccf;
}
#thong-tin .khong-bit-noi-j{
    height: 45px;
    background-color: #f5f1eb;
    align-items:center;
    display:flex;
    justify-content:space-between;
    overflow: hidden;
    margin: auto;
}
#khung-thong-tin{
    width:81%;
    height: 100%;
    border-bottom: 1px solid #e3dccf;
    background-color: #f5f1eb;
    align-items:center;
    display:flex;
    justify-content:space-between;
    overflow: hidden;
    margin: auto;
}
#thong-tin a{
    color: gray;
    font-weight: 400;
    text-decoration: none;
}
#than .khong-bit-noi-j{
    height: auto;
    background-color: #f5f3ed;
    margin: 0 auto;
    display:flex;
    justify-content:space-between;
}
#than .ben-trai{
    width: 24%;
    min-height: 100%;
}
#danh-muc{
    width: 100%;
    height: 630px;
    margin-top: 30px;
    background-color: #fcfcfc;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
}
#danh-muc h1{
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 10px;
}
#danh-muc ol{
    width: 80%;
    list-style: none;
    padding: 0px;
    margin: auto;
}
#bo-loc-danh-mục li {
    cursor: pointer;
    transition: all 0.3s ease;
}
#danh-muc ol li{
    width: 100%;
    height: 40px;
    background-color: #f2ece4;
    margin-top: 15px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px gray;
    transform:translateY(0%);
    transition: 0.2s;
    border: 1px solid #f2ece4;
}
#danh-muc ol li:hover{
    transform:translateY(-10%);
    background-color: white;
    border: 1px solid #e6dfd3;
    color: #a96b3c;

}
#danh-muc ol li span{
    font-size: 16px;
    font-weight: 400;
    margin-left: 20px;
    margin-top: 9px;
    display: inline-block;
}
#xu-huong{
    width: 100%;
    height: max-content;
    background-color: #fcfcfc;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
    margin-top: 20px;
}
#xu-huong .khung{
    width: 85%;
    height: max-content;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
    background: linear-gradient(-45deg, #332a28, #b57b57);
    margin: 0px auto;
    padding: 0px;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    
}
#xu-huong .khung img{
    width: 85%;
    height: 145px;
    display: block;
    margin: auto;
    border-radius:20px;
    object-fit: cover;
}
#xu-huong h4{
    font-size: 12px;
    margin-top: 5px;
    margin-left: 20px;
    color: white;
    font-weight: 400;
}
#xu-huong h2{
    width: 85%;
    font-size: 21px;
    margin-left: 20px;
    margin-top: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}
#xu-huong h3{
    width: 85%;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 5px;
    color: white;
    font-weight:400;
    margin-bottom: 15px;
}
#than .ben-phai{
    width: 74%;
    min-height: 100%;
    margin-top: 30px;
}
#khung-ndphai{
    width: 100%;
    height: max-content;
}
#trang-tieu-de{
    width: 100%;
    height:max-content;
    background-color: white;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
}
#trang-noi-dung{
    width: 100%;
    height: 73%;
}
#noi-dung{
    width: 50%;
    height: 100%;
    float: left;
    margin-right: 10px;
}
.tieu-de{
    width:max-content;
    height: 30px;
    background-color: #f5ebe4;
    border-radius: 20px;
    margin-top: 30px;
    margin-left: 20px;
    text-align: center;

}
#noi-dung .tieu-de h1{
    font-size: 14px;
    color: #a86b3d;
    font-weight: 700;
    margin:20px;
    padding:5px;
}
#noi-dung h1{
    font-size: 3vw;
    font-weight: 800;
    color:black;
    margin-left: 20px;
}
#noi-dung h2{
    font-size: 1.1vw;
    font-weight: 400;
    color:gray;
    margin-left: 20px;
    line-height: 25px;
    margin-top:10px;
}
#luachon{
    width: max-content;
    height: 50px;
    display:flex;
    justify-content: space-between;
}
#xem-san-pham{
    width: max-content;
    height: 50px;
    border-radius: 20px;
    background-color: #c78654;
    margin-left: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items:center;
    display: flex;
}
#xem-san-pham span{
    font-size: 16px;
    font-weight: 400;
    color: white;
    margin: 20px;
    padding: 5px;
}
#nhan-tu-van{
    width: max-content;
    height: 50px;
    border-radius: 20px;
    background-color: white;
    border: 1px solid #f5ebe4;
    margin-left: 20px;
    margin-top: 20px;
    justify-content: center;
    align-items:center;
    display: flex;
}
#nhan-tu-van span{
    font-size: 16px;
    font-weight: 400;
    color: black;
    margin: 20px;
    padding: 5px;
}
#hinh-anh{
    width: 47%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 30px;
}
#anh1{
    width:100%;
    height:35vw;
    max-height:520px;
    overflow: hidden;
    border-radius: 20px;
}
#ben-phai {
    display: grid;
    grid-template-rows: 1fr 1fr;
}
#anh2{
    width:100%;
    height:17vw;
    max-height:252px;
    overflow: hidden;
    border-radius: 20px;
}
#anh3{
    width:100%;
    height:17vw;
    max-height:252px;
    overflow: hidden;
    border-radius: 20px;
    margin-top: 16px;
}
#anh1 img,
#anh2 img,
#anh3 img{
    width:100%;
    height:100%;
    object-fit:cover;
}
#trang-trinh-bay{
    width: 95%;
    height: 150px;
    display:flex;
    justify-content: space-between;
    margin: auto;
    margin-top: 20px;
}
.o-trinh-bay{
    width: 22%;
    height: 87px;
    border-radius: 20px;
    border: 2px solid #f5ebe4;
}
.o-trinh-bay h1{
    font-size: 30px;
    margin-left: 20px;
    margin-top: 10px;
    font-weight: 600;
    color:black;
}
.o-trinh-bay h2{
    font-size: 12px;
    margin-left: 20px;
    color: gray;
}
#trang-san-pham{
    width: 100%;
    height:max-content;
    background-color: white;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
    margin-top: 20px;
}
#trang-san-pham::after {
    content: "";
    display: block;
    clear: both;
}
#trang-san-pham .tieu-de h1{
    font-size: 14px;
    color: #a86b3d;
    font-weight: 700;
    margin:20;
    padding:5;
}
#bo-loc{
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: space-between;
}
.bo-loc{
    font-size: 28px;
    font-weight: 700;
    color: black;
    margin-top: 5px;
    margin-left: 20px;
}
#khung-lua-chon{
    width: 40%;
    display: flex;
    justify-content: end;
}
#trang-san-pham .lua-chon{
    width: 90px;
    height: 43px;
    border-radius: 20px;
    border: 1px solid #e6dfd3;
    margin-right: 20px;
    display: grid;
    place-items:center;
    text-align: justify;
}
#trang-san-pham .lua-chon h1{
    font-size: 16px;
    color: black;
    font-weight: 400;
}
.cum-slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 60px;
}
#nut-di-chuyen{
    width: 100%;
    height: 52.8px;
    margin-top: 10px;
    display: flex;
}
#nut-di-chuyen .cai-nut:hover{
    background-color:#a86b3d;
    color: white;
    transform:scale(1.20);
    border: 3px solid white;
}
.cai-nut{
    width: 48px;
    height: 48px;
    border-radius: 20px;
    border: 3px solid #c78654;
    display: grid;
    font-size: 18px;
    text-align: center;
    align-items: center;
    margin-left: 20px;
    color: #c78654;
    font-weight: 800;
    transition: 0.5s;
    cursor: pointer;
    transition: all 0.8s ease;
}
.cua-so-san-pham {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 0px 20px 20px; 
}
#san-pham {
    display: grid;
    gap: 20px;
    padding: 20px;
    height: auto;
     
    box-sizing: border-box; 
    will-change: transform; 
    grid-template-columns: repeat(4, 1fr);
}



.san-pham.hidden {
    display: none !important;
}

.san-pham {
    height: max-content;
    width: 100%;
    margin: 0;
    float: none;
    border-radius: 20px;
    border: 1px solid #c78654;
    overflow: hidden;
    transform: translateY(0%);
}

.san-pham:hover {
    transform: translateY(-5%);
    box-shadow: 5px 5px 10px gray;
}
.khung-anh{
    width: 100%;
    height: 170px;
    overflow: hidden;
    background-color: rgb(240, 171, 171);
    
}
.khung-anh img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thong-tin-san-pham{
    width:100%;
    height:100%;
}
.thong-tin-san-pham h4{
    color: gray;
    font-size: 12px;
    font-weight: 300;
    margin-top: 10px;
    margin-left: 10px;
}
.thong-tin-san-pham h1{
    color: black;
    width: 90%;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    margin-top: 2px;
    line-height: 20px;
}
.thong-tin-san-pham h3{
    color: black;
    font-size: 14px;
    font-weight: 300;
    margin-left: 10px;
    margin-top: 2px;
}
.thong-tin-san-pham h2{
    color: #a96b3c;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
    margin-top: 2px;
    padding-bottom: 5px;
}
#tong-ket{
    width:100%;
    height: max-content;
    background-color: #fefdfd;
    clear:both;
    margin-top: 20px;
    border-top: 1px solid #e6dfd3;
    border-bottom: 1px solid #e6dfd3;
}
#tong-ket .khong-bit-noi-j{
    height: 100%;
    margin: auto;
    display: flex;

}
.ben-trai-tong-ket{
    width: 60%;
    height: 100%;
    
}
.ben-trai-tong-ket h1{
    font-size: 22px;
    font-weight: 800;
    color: black;
    margin-top: 30px;
    font-size: clamp(22px, 10cqw, 24px);
}
.ben-trai-tong-ket h2{
    font-size: 16px;
    font-weight: 500;
    color: gray;
    margin-top: 5px;
    display: flex;
    
}
.ben-phai-tong-ket{
    width: 40%;
    height: 100%;
    margin: 0px;
    display:flex;
    justify-content: right;
}
#lien-he{
    width: 50%;
    height: 100%;
}
.ben-phai-tong-ket h1{
    font-size: 22px;
    font-weight: 800;
    color: black;
    margin-top: 30px;
    padding-left: 40px;

}
.ben-phai-tong-ket p{
    font-size: 15px;
    font-weight: 600;
    color: black;
    padding-left: 40px;

}
#chinh-sach{
    width: 50%;
    height: 100%;
}

#ket-thuc{
    width: 100%;
    height: 50px;
    background-color: #f5f3ed;
}
/* ---------------------------------------------------------
   1. MÀN HÌNH LAPTOP NHỎ (Dưới 1200px)
--------------------------------------------------------- */
@media (max-width: 1200px) {
    /* Thu hẹp bớt tỉ lệ thanh tìm kiếm và ô lựa chọn */
    #tim-kiem { width: 40%; }
     #san-pham{
        grid-template-columns:repeat(3,1fr);
    }
    #xu-huong h2{ font-size: 18px}
    #tong-ket {width: 100%;}
}
/* ---------------------------------------------------------
   2. MÀN HÌNH MÁY TÍNH BẢNG NẰM NGANG (Dưới 1024px)
--------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Thu nhỏ font chữ banner chính để không bị tràn chữ */
    #noi-dung h1 { font-size: 28px; }
    #noi-dung h2 { font-size: 14px; }

    /* Chuyển phần Banner (trang-tieu-de) về dạng xếp chồng */
    #trang-tieu-de { height: auto; padding-bottom: 30px; }
    #trang-noi-dung { height: auto; display: flex; flex-direction: column; }
    #noi-dung { width: 100%; float: none; margin-bottom: 20px; }
    #hinh-anh { width: 100%; margin: 20px 0; }
    #noi-dung {width: 95%}
    /* Reset lại chiều cao ảnh banner */
    #anh1 {width: 90%; height:487px; margin-left: 30px}
    #anh2, #anh3 { width: 90%; height:235px; max-height: none; }

    /* Phần thông số thống kê (trang-trinh-bay) tự động xuống dòng nếu thiếu chỗ */
    #trang-trinh-bay { height: auto; flex-wrap: wrap; gap: 15px; justify-content: center; }
}

/* ---------------------------------------------------------
   3. MÀN HÌNH MÁY TÍNH BẢNG NẰM DỌC - IPAD (Dưới 768px)
--------------------------------------------------------- */
@media (max-width: 768px) {
    /* --- Header & Thanh tìm kiếm --- */
    #logo .ben-trai{display:flex;}
    #dau .ben-trai {text-align: center; padding: 8 0 0 0;}
    #san-pham{
        grid-template-columns:repeat(2,1fr);
    }
    #trang-chinh .khong-bit-noi-j { flex-direction: column; align-items: center; text-align: center; }
    #thong-tin .khong-bit-noi-j{ flex-direction:row ; display: grid; grid-template-columns: repeat(5, 1fr);}
    .ben-trai {display: none;}
    #tim-kiem { width: 100%; height: 80px; }
    #lua-chon {width: 40%; margin-bottom: 20px;}
    #khung-lua-chon .lua-chon { width: 40%; height:40px; justify-content: center; padding: 15 0 0 0; margin: 0 0 0 15;}
    .bo-loc {justify-content: center; display:block}
    #khung-lua-chon {display:flex; width: 70%;justify-content:space-between; align-items:center; margin: auto;}
    /* --- Thanh Menu ngang (thong-tin) --- */
    /* Nếu menu quá dài trên màn hình nhỏ, cho phép người dùng vuốt ngang */
    #thong-tin .khong-bit-noi-j { 
        justify-content: flex-start; 
        overflow-x: auto; 
        white-space: nowrap; 
        padding: 10px; 
    }

    /* --- LAYOUT THÂN CHÍNH (Quan trọng nhất) --- */
    /* Đưa Danh mục (bên trái) và Nội dung (bên phải) thành 1 hàng dọc xếp chồng */
    #than .khong-bit-noi-j { flex-direction: column; }
    #than .ben-trai { width: 100%; }
    #danh-muc { height: auto; padding-bottom: 20px; }
    #xu-huong { height: auto; padding-bottom: 20px; }
    #than .ben-phai { width: 100%; margin-top: 10px; }
    #khung-ndphai { height: auto; }

    /* --- Khối sản phẩm --- */
    /* Giảm số cột sản phẩm xuống còn 2 cột */
    #san-pham { grid-template-columns: repeat(2, 1fr); }

    /* Căn chỉnh lại bộ lọc sản phẩm */
    #bo-loc { float: none; display: block; text-align: center; margin-bottom: 10px; }
    #trang-san-pham .lua-chon { float: none; display: inline-block; margin: 5px; }

    /* --- Footer (Tổng kết) --- */
    #tong-ket { height: max-content; padding: 20px 0; }
    #tong-ket .khong-bit-noi-j { flex-direction: row; }
    .ben-trai-tong-ket { width: 80%; text-align: left; margin-bottom: 50px;}
    .ben-trai-tong-ket h1 {font-size: 16px;}
    .ben-trai-tong-ket h2 {font-size: 10px;}
    #lien-he h1 {font-size: 16px;}
    #lien-he p {font-size: 12px;}
    #chinh-sach h1 {font-size: 16px;}
    #chinh-sach p {font-size: 12px;}
    .ben-trai-tong-ket, .ben-phai-tong-ket { width: 100%; }
    .ben-phai-tong-ket { flex-direction: row; gap: 20px; text-align: left;}
    #lien-he h1, #lien-he p, #chinh-sach h1, #chinh-sach p { padding-left: 0; }
}

/* ---------------------------------------------------------
   4. MÀN HÌNH ĐIỆN THOẠI DI ĐỘNG (Dưới 480px)
--------------------------------------------------------- */
@media (max-width: 480px) {
    /* Thu nhỏ chữ toàn trang một chút để dễ nhìn trên điện thoại */
    body { font-size: 14px; }
    
    /* Thanh tiện ích trên cùng (đầu trang) */
    .o-trinh-bay {height: max-content}
    .o-trinh-bay h1 {font-size: 24px; margin:0}
    .o-trinh-bay h2 {margin:0}
    #dau .khong-bit-noi-j { flex-direction: column; text-align: center; }
    #dau .ben-phai { width: 100%; justify-content: center; }
    #dau .ben-phai h1 { margin: 5px 10px 0 10px; }
    .ben-trai-tong-ket { margin-bottom: 65px;}
    .ben-trai-tong-ket h1 {font-size: 14px;}
    .ben-trai-tong-ket h2 {font-size: 8px;}
    #lien-he h1 {font-size: 14px;}
    #lien-he p {font-size: 8px;}
    #chinh-sach h1 {font-size: 14px;}
    #chinh-sach p {font-size: 8px;}
    /* --- Sản phẩm trên mobile --- */
    /* Trên điện thoại, đưa sản phẩm về thành 1 cột duy nhất để nhìn ảnh cho rõ */
    #san-pham { grid-template-columns: 1fr; }

    /* Căn đều hai nút Xem sản phẩm & Nhận tư vấn */
    #luachon { width: 100%; justify-content: center; gap: 10px; }
    #xem-san-pham, #nhan-tu-van { margin-left: 0; }
}