*{box-sizing:border-box;margin:0;padding:0}
body{background:#620000;color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:auto;padding:0 12px}
:root{--gold:#f5c542;--dark:#3d0000}
.banner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{font-size:26px;font-weight:bold;color:var(--gold);border:2px solid var(--gold);padding:8px 14px;border-radius:8px;white-space:nowrap}
.slogan{flex:1;font-style:italic;color:#ffe9a8;font-size:18px}
.banner img{height:70px;border-radius:8px}
/* Ẩn ảnh trên điện thoại */
@media screen and (max-width: 768px) {
    .banner img {
        display: none;
    }
}
nav {
    background: var(--dark);
    /* border-top:2px solid var(--gold);
    border-bottom:2px solid var(--gold);*/
    position: relative
}
nav .wrap{display:flex;align-items:center;flex-wrap:wrap}
#burger{display:none;background:none;border:0;color:var(--gold);font-size:28px;padding:8px;cursor:pointer}
nav ul{list-style:none;display:flex;flex:1}
nav li{position:relative}
nav li>a{display:block;padding:12px 16px;font-weight:bold}
nav li:hover>a{background:var(--gold);color:#620000}
nav li ul{display:none;position:absolute;left:0;top:100%;min-width:210px;background:var(--dark);flex-direction:column;z-index:20;border:1px solid var(--gold)}
nav li:hover>ul{display:flex}
nav li ul a{display:block;padding:9px 14px;font-weight:normal;font-size:14px}
nav li ul a:hover{background:var(--gold);color:#620000}
@media screen and (max-width: 700px) {
    /* Đảm bảo nav luôn giữ vị trí chuẩn để popup neo vào đúng khung */
    nav {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

        /* Mặc định ẩn menu trên mobile */
        nav ul {
            display: none;
            position: absolute;
            top: 100%; /* Nằm ngay dưới thanh nav */
            left: 0;
            width: 100%;
            background: var(--dark);
            border-bottom: 2px solid var(--gold);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            flex-direction: column;
            z-index: 1100;
        }

            /* Khi có class .open thì hiển thị dạng popup */
            nav ul.open {
                display: flex;
            }

        /* Xử lý các cấp menu con bên trong popup mobile cho gọn gàng */
        nav li ul {
            position: static;
            border: 0;
            display: none;
            background: rgba(0, 0, 0, 0.15);
        }

        nav li.sub > ul,
        nav li.sub:hover > ul {
            display: flex;
            flex-direction: column;
        }
}
.search{display:flex}
.search input{padding:7px;border:0;border-radius:4px 0 0 4px;width:170px}
.search button{background:var(--gold);border:0;padding:7px 10px;border-radius:0 4px 4px 0;cursor:pointer}
/* Mobile: nav và ô tìm kiếm trên cùng một hàng */
@media screen and (max-width: 768px) {
    nav .wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
    }

    nav ul {
        flex: 1;
        min-width: 0;
    }

    nav li > a {
        padding: 10px 6px;
        font-size: 13px;
        white-space: nowrap;
    }

   

        .search input {
            width: 90px;
            min-width: 0;
            box-sizing: border-box;
        }

        .search button {
            padding: 7px 8px;
        }
}
@media screen and (max-width: 480px) {
    .search input {
        width: 65px;
    }

    nav li > a {
        padding: 10px 4px;
        font-size: 11px;
    }
}
.top{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0}
.slider{position:relative;overflow:hidden;border-radius:10px;border:2px solid var(--gold);min-height:300px}
.slides{display:flex;transition:transform .6s;height:100%}
.slide{min-width:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:28px;font-weight:bold;padding:20px;min-height:340px}
/* Điều chỉnh slider trên điện thoại */
@media screen and (max-width: 768px) {
    .slider {
        min-height: 180px;
    }

    .slides {
        height: 200px;
    }

    .slide {
        min-height: 140px;
        height: 140px;
        padding: 10px;
        font-size: 18px;
    }
}
.dots{position:absolute;bottom:8px;width:100%;text-align:center}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff8;margin:3px;cursor:pointer}
.dots i.on{background:var(--gold)}
.box{background:#fff;color:#333;border-radius:10px;overflow:hidden;margin-bottom:12px}
.box h3{background:var(--gold);color:#620000;padding:8px;text-align:center;font-size:15px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 5px;border-bottom:1px solid #ddd;text-align:right}
th:first-child,td:first-child{text-align:left}
th{background:#f3e6c0}
.tv{height:200px}
h2.t{color:var(--gold);margin:22px 0 10px;border-left:5px solid var(--gold);padding-left:10px}
.lines{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.lines a{flex:0 0 150px;scroll-snap-align:start;text-align:center;background:var(--dark);border:1px solid var(--gold);border-radius:10px;padding:10px;font-size:14px}
.lines img{width:100%;border-radius:8px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:#fff;color:#333;border-radius:10px;overflow:hidden;text-align:center;display:flex;flex-direction:column}
.card img{width:100%;display:block}
.card h4{font-size:14px;padding:8px;flex:1}
.card small{display:block;color:#888;padding-bottom:4px}
.btn{display:inline-block;background:#8b0000;color:#fff;padding:7px 16px;border-radius:20px;margin:0 0 10px;font-size:14px;border:0;cursor:pointer}
.btn:hover{background:var(--gold);color:#620000}
.more{text-align:right;margin-top:6px}
.more a{color:var(--gold)}
.layout{display:grid;grid-template-columns:250px 1fr;gap:16px;margin:16px 0}
.filter{background:var(--dark);border:1px solid var(--gold);border-radius:10px;padding:12px;align-self:start}
.filter label{display:block;margin-top:10px;color:var(--gold);font-size:14px}
.filter select,.filter input{width:100%;padding:6px;margin-top:3px;border-radius:4px;border:0}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:20px 0}
.pager button{background:var(--dark);color:#fff;border:1px solid var(--gold);padding:7px 12px;border-radius:5px;cursor:pointer}
.pager button.on{background:var(--gold);color:#620000;font-weight:bold}
.pager button:disabled{opacity:.4}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.cats a{border:1px solid var(--gold);padding:6px 14px;border-radius:20px;font-size:14px}
.cats a.on,.cats a:hover{background:var(--gold);color:#620000}
.news{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.news .card{text-align:left}
.news .card p{padding:0 10px 8px;font-size:13px;color:#555}
.news .card h4{flex:none}
.news .card a.btn{margin:0 10px 10px;align-self:flex-start}
.art{background:#fff;color:#333;border-radius:10px;padding:20px;margin:16px 0}
.art img{width:100%;max-height:360px;object-fit:cover;border-radius:8px}
.art h1{color:#620000;margin:12px 0 6px}
.art .meta{color:#888;font-size:13px;margin-bottom:10px}
.art p{margin:10px 0}
.rel a{display:block;color:#8b0000;padding:4px 0}
footer{background:var(--dark);border-top:2px solid var(--gold);margin-top:30px;padding:18px 0;text-align:center;font-size:14px;color:#ffe9a8}
@media(max-width:900px){.top,.layout{grid-template-columns:1fr}.grid,.news{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
.banner{flex-wrap:wrap;justify-content:center;text-align:center}.slogan{flex-basis:100%;order:3;font-size:15px}
#burger{display:block}
nav ul{display:none;flex-direction:column;width:100%;flex-basis:100%}nav ul.open{display:flex}
nav li ul{position:static;border:0;display:none}nav li.sub>ul{display:flex}nav li:hover>ul{display:none}nav li.sub:hover>ul{display:flex}
.search{width:100%;padding:8px 0}.search input{flex:1}}
@media(max-width:420px){.grid,.news{grid-template-columns:1fr 1fr;gap:8px}.card h4{font-size:12px}}
nav{position:sticky;top:0;z-index:100}
.slide{color:#fff!important;text-shadow:0 2px 8px #000!important;background-color:#8b6b00}
.card img,.lines img{background:#fdf3dc;min-height:80px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:20px;text-align:left}
.fgrid h4{color:var(--gold);margin-bottom:8px}
.fgrid p{margin:4px 0}.fgrid a:hover{color:var(--gold);text-decoration:underline}
.copy{margin-top:14px;padding-top:10px;border-top:1px solid #fff3;font-size:13px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
#hdr{display:contents}
html,body{overflow-x:clip}
nav{position:-webkit-sticky;position:sticky;top:0;z-index:1000}
.logo{width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;flex:none;background:radial-gradient(#8b0000,#3d0000);border:3px solid var(--gold);box-shadow:0 0 12px #f5c54288;line-height:1}
    .logo b {
        font-size: 38px;
        letter-spacing: 1px;
        color: var(--gold);
        font-family: Roboto,serif
    }
.logo span{font-size:12px;color:#ffe9a8;margin-top:4px}
.slogan{display:flex;flex-direction:column;justify-content:center;gap:6px;font-style:normal;flex:1}
.slogan strong{font-size:32px;color:var(--gold);font-family:text-transform,serif;text-transform:uppercase}
.slogan em{font-size:18px;color:#ffe9a8}
.banner img{height:auto;width:min(38%,460px);aspect-ratio:13/4;object-fit:cover;border:2px solid var(--gold)}
@media(max-width:900px){.slogan strong{font-size:22px}.slogan em{font-size:14px}}
@media(max-width:700px){.banner{flex-wrap:wrap;justify-content:center}.slogan{flex:1 1 55%;order:0;text-align:left}.banner img{width:100%;order:3}.logo{width:80px;height:80px}.logo b{font-size:30px}}
.filter .btn{margin-right:6px}
.pager a{display:inline-block}
.slide{min-height:340px}
a.slide{color:#fff!important;text-decoration:none}
/* ---- chi tiết sản phẩm ---- */
.card .pic{display:block}.card h4 a:hover{color:#8b0000}
.crumb{margin:14px 0 0;font-size:13px;color:#ffe9a8}.crumb a:hover{text-decoration:underline}
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;background:#fff;color:#333;border-radius:10px;padding:20px;margin:12px 0}
.gal-main{border:1px solid #eee;border-radius:8px;overflow:hidden;background:#fdf3dc}
.gal-main img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:6px}
.thumbs img{flex:0 0 76px;width:76px;height:76px;object-fit:cover;border:2px solid transparent;border-radius:6px;cursor:pointer;opacity:.75}
.thumbs img.on,.thumbs img:hover{border-color:#8b0000;opacity:1}
.pinfo h1{font-size:28px;line-height:1.25;color:#620000;text-transform:uppercase;margin:0}
.pinfo .code{color:#888;font-size:13px;margin:6px 0 12px}
.pinfo .price{font-size:26px;font-weight:bold;color:#c00000;margin-bottom:14px}
.cta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cta .b{flex:1 1 130px;text-align:center;color:#fff;padding:11px 12px;border-radius:6px;font-weight:bold;font-size:14px}
.cta .call{background:#c00000}.cta .zalo{background:#0068ff}.cta .fb{background:#1877f2}.cta .b:hover{opacity:.88}
.pinfo .sub{color:#620000;margin:6px 0 8px;font-size:16px}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{padding:9px 10px;border:1px solid #eadfc8;text-align:left}
.spec th{width:42%;background:#f8efd6;color:#620000}
.tabs-wrap{background:#fff;color:#333;border-radius:10px;margin:0 0 16px;overflow:hidden}
.tabbtns{display:flex;background:#f3e6c0;overflow-x:auto}
.tabbtns button{flex:1 0 auto;border:0;background:none;padding:13px 20px;font-weight:bold;cursor:pointer;color:#620000;font-size:15px;white-space:nowrap}
.tabbtns button.on{background:#620000;color:#f5c542}
.tabpane{display:none;padding:18px 22px}.tabpane.on{display:block}
.rich{line-height:1.7;overflow-wrap:anywhere}
.rich img{max-width:100%;height:auto;border-radius:6px}
.rich h1,.rich h2,.rich h3{color:#620000;margin:14px 0 8px}
.rich ul,.rich ol{margin:8px 0 8px 22px}
.rich blockquote{border-left:4px solid #f5c542;margin:10px 0;padding:6px 14px;background:#fdf6e3}
.rich a{color:#8b0000;text-decoration:underline}
.rich table{border-collapse:collapse;max-width:100%}.rich td,.rich th{border:1px solid #ddd;padding:6px 10px}
@media(max-width:800px){.pd{grid-template-columns:1fr}.pinfo h1{font-size:22px}}

/* ---- gửi góp ý ---- */
.contact{background:#fff;color:#333;border-radius:10px;padding:20px;max-width:680px;margin:0 0 20px}
.contact .lead{margin-bottom:14px;color:#555}
.cform label{display:block;font-weight:bold;font-size:14px;margin-bottom:12px;color:#620000}
.cform input,.cform textarea{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid #cfc3b3;border-radius:6px;font:inherit;font-weight:normal;color:#333;background:#fff}
.cform textarea{resize:vertical}
.cform .btn{padding:10px 26px;font-size:15px}
.contact .err{display:block;color:#b00020;font-size:13px;font-weight:normal;margin-top:3px}
.contact .ok{background:#e6f6e6;border:1px solid #9cd09c;color:#175c17;border-radius:8px;padding:14px}
.contact .ok .btn{margin:10px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}