/* ==========================================================================
   CSS DÙNG CHUNG CẦN CHO TRANG CHỦ WEB - thay cho desktop.css + home.css
   (127 KB, 969 rule - trang chủ chỉ dùng ~12%). Trích NGUYÊN VĂN, đúng thứ
   tự các rule của 2 file đó mà trang chủ thực sự dùng: nút nổi (#redirect,
   #contact), giỏ hàng (#basket, .cart__item), tìm kiếm (#search), popup
   hotline/đăng ký/sản phẩm đã xem, hộp tin nhắn, thông báo (.alert), loading,
   thanh cuộn và vài class tiện ích (.flex-row, .row-center...).
   Giữ cả rule cho trạng thái do JS bật (.active...) và phần chỉ hiện theo
   điều kiện (giỏ có hàng, popup sản phẩm đã xem, hộp tin nhắn).
   Các trang khác vẫn nạp desktop.css + home.css như cũ. Sửa style các thành
   phần này ở trang khác thì nhớ sửa cả ở đây (hoặc chuyển hẳn về 1 file).
   Đặt trong /assets/css/ để đường dẫn tương đối ../img/ giữ đúng.
   ========================================================================== */

/* ===== trích từ desktop.css ===== */
h1,
h2,
h3,
h4,
a,
button,
strong { font-family: 'Roboto', sans-serif !important;font-weight: 700 !important; }
button,
input,
textarea { border:none;outline:none }
.flex-column { display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column }
.flex-row { display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row }
.row-center { display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row }
.column-center { display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column }
.closeBtn { cursor:pointer;position:absolute;right:0;top:0;width:25px;height:25px;background-color:transparent }
.closeBtn:before,
.closeBtn:after { content:"";position:absolute;width:18px;height:1px;background-color:#333;top:50%;left:50% }
.closeBtn:before { -webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg) }
.closeBtn:after { -webkit-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg) }
#redirect { position:fixed;top:40%;right:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:99 }
#redirect>div { display:block;width:40px;height:40px;border-radius:100%;margin-bottom:10px;-webkit-box-shadow:2px 2px 20px #00000017;box-shadow:2px 2px 20px #00000017;position:relative;cursor:pointer;background-color:#028fe3 }
#redirect>div:hover p { display:block }
#redirect>div p { position:absolute;display:none;color:#fff;font-size:12px;padding:10px;border-radius:0;background-color:#333;width:110px;right:100% }
#redirect>div p:after { content:"";position:absolute;left:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-left:5px solid #333;border-bottom:5px solid transparent;border-top:5px solid transparent }
#redirect>div svg { font-size:20px;fill:#fff }
#redirect>div.gotoTop { visibility:hidden }
#contact { position:fixed;bottom:110px;right:initial;z-index:99;right:15px }
#contact>div { width:50px;height:50px;border-radius:100%;overflow:hidden;background-color:#fff;margin-bottom:5px;-webkit-box-shadow:2px 2px 20px #00000017;box-shadow:2px 2px 20px #00000017 }
#contact>div>a { display:block;width:100%;height:100%;padding:5px }
#contact>div>a img { width:100%;height:100% }
#contact>div:hover p { display:block }
#contact>div p { position:absolute;display:none;color:#fff;font-size:12px;padding:10px;border-radius:0;background-color:#333;width:110px;right:100% }
#contact>div p:after { content:"";position:absolute;left:100%;top:50%;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg);border-right:5px solid #333;border-bottom:5px solid transparent;border-top:5px solid transparent }
#contact .call span { color:#fff;background:#1190e4;position:absolute;right:50px;padding:10px 20px 10px 10px;font-size:16px;font-weight:700;border-radius:0;-webkit-transition:all ease 0.5s;transition:all ease 0.5s;opacity:0 }
#contact .call:hover span { opacity:1 }
#messagebox { position:fixed;z-index:99;width:100%;height:100vh;background-color:rgba(0,0,0,0.3);display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;left:0 }
#messagebox.active { display:-webkit-box;display:-ms-flexbox;display:flex }
#messagebox .content { height:400px;width:600px;overflow:hidden;border-radius:0 }
#messagebox .content .item { position:relative }
#messagebox .content .item>a { display:block;width:100%;height:100%;overflow:hidden }
#messagebox .content .item>a img { height:100%;display:block;margin:0 auto;max-width:300px }
#messagebox .content .item:nth-child(2) { background-color:#fff }
#messagebox .content .item:nth-child(2) .closeBtn { top:5px;right:5px }
#messagebox .content .item form { width:100%;padding:20px 15px;height:100% }
#messagebox .content .item form>p { font-size:18px;margin-bottom:10px;font-family: 'Roboto', sans-serif;font-weight: 700;display:block;width:100% }
#messagebox .content .item form input,
#messagebox .content .item form textarea { margin-bottom:12px;font-family:inherit;width:100%;padding:10px;border-radius:0;background-color:#f5f5f5;-webkit-transition:all ease 0.5s;transition:all ease 0.5s;resize:none }
#messagebox .content .item form input:focus,
#messagebox .content .item form textarea:focus { -webkit-box-shadow:0px 0px 5px 1px rgba(0,0,0,0.1);box-shadow:0px 0px 5px 1px rgba(0,0,0,0.1) }
#messagebox .content .item form button { background-color:#fabf00;color:#333;width:100%;padding:10px;border-radius:0;-webkit-transition:all ease 0.5s;transition:all ease 0.5s }
#messagebox .content .item form button:hover { -webkit-box-shadow:0px 0px 4px 1px rgba(0,0,0,0.1);box-shadow:0px 0px 4px 1px rgba(0,0,0,0.1) }
#basket { position:fixed;top:0;right:-420px;width:400px;height:100%;padding:20px;-webkit-transition:all ease-in-out 0.7s;transition:all ease-in-out 0.7s;background-color:#333;z-index:100;-webkit-box-shadow:-10px 1px 10px 1px rgba(0,0,0,0.3);box-shadow:-10px 1px 10px 1px rgba(0,0,0,0.3);opacity:0 }
#basket.active { right:0;opacity:1 }
#basket>p { font-size:24px;color:#fff;margin-bottom:20px;text-transform:uppercase }
#basket>p.no-data { text-transform:none }
#basket .closeBtn { top:20px;right:20px }
#basket .closeBtn:after,
#basket .closeBtn:before { background-color:#fff;width:25px }
#basket .item { width:100%;position:relative;margin-bottom:12px;border-bottom:#e5e5e5 }
#basket .item .img { width:97px;height:97px;margin-right:12px }
#basket .item .img img { width:100% }
#basket .item .detail { width:calc(100% - 109px);padding-right:60px }
#basket .item .detail h3 { display:-webkit-box;line-height:22px;font-family: 'Roboto', sans-serif;font-weight: 700;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:5px;color:#fff }
#basket .item .detail span { color:#fabf00;font-size:14px;margin-bottom:5px }
#basket .item .detail p { font-size:15px;color:#fff }
#basket .item i { display:block;width:30px;height:30px;position:absolute;right:0;top:0;font-size:16px;color:#fff;line-height:30px;text-align:center;border-radius:0 }
#basket .item i:hover { background:#6f0606 }
#basket .action { width:100% }
#basket .action a { color:#fff;width:48%;text-transform:uppercase;text-align:center;display:block;-webkit-transition:all ease 0.5s;transition:all ease 0.5s }
#basket .action a:hover { -webkit-transform:translateY(-3px);transform:translateY(-3px) }
#basket .action a:nth-child(1) { margin-right:4%;background:-webkit-gradient(linear, left top, left bottom, from(#2296e9), to(#32435d)) no-repeat;background:linear-gradient(#2296e9, #32435d) no-repeat;-webkit-box-shadow:0 7px 13px -3px rgba(45,35,66,0.3),0 2px 4px 0 rgba(45,35,66,0.4),inset 0 -2px 0 0 #36332a;box-shadow:0 7px 13px -3px rgba(45,35,66,0.3),0 2px 4px 0 rgba(45,35,66,0.4),inset 0 -2px 0 0 #36332a }
#basket .action a:nth-child(2) { background:-webkit-gradient(linear, left top, left bottom, from(#cf1b1beb), to(#6f0606)) no-repeat;background:linear-gradient(#cf1b1beb, #6f0606) no-repeat;-webkit-box-shadow:0 7px 13px -3px rgba(45,35,66,0.3),0 2px 4px 0 rgba(45,35,66,0.4),inset 0 -2px 0 0 #36332a;box-shadow:0 7px 13px -3px rgba(45,35,66,0.3),0 2px 4px 0 rgba(45,35,66,0.4),inset 0 -2px 0 0 #36332a }
#search { position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,0.5);top:0;left:0;padding-top:180px;display:none;z-index:102 }
#search form { margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;width:800px;height:60px;border-bottom:2px solid #fafafa;padding-right:10px }
#search form input { font-size:18px;width:740px;font-style:italic;background-color:transparent;padding-left:30px;color:#fff }
#search form input::-webkit-input-placeholder { color:#fafafa }
#search form input:-ms-input-placeholder { color:#fafafa }
#search form input::-ms-input-placeholder { color:#fafafa }
#search form input::placeholder { color:#fafafa }
#search form button { width:50px }
#search form button svg { font-size:30px;fill:#fff }
#hotline { position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,0.4);display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:99;top:0;left:0 }
#hotline.active { display:-webkit-box;display:-ms-flexbox;display:flex }
#hotline .content { width:500px;padding:20px 50px;background-color:#fff;border-radius:0 }
#hotline .content .icon { width:30px;height:30px;line-height:30px;text-align:center;font-size:18px;margin-bottom:10px;border:1px solid #cacaca;border-radius:0;margin-bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center }
#hotline .content strong,
#hotline .content b,
#hotline .content i,
#hotline .content p { text-align:center;display:block }
#hotline .content p { font-size:18px;line-height:22px }
#hotline .content strong { font-size:24px;margin-bottom:10px }
#hotline .content i { line-height:18px;font-size:14px;margin-bottom:10px }
#hotline .content b { font-size:22px;color:#fabf00;padding:10px 0;font-family: 'Roboto', sans-serif;font-weight: 700; }
#hotline .content .closeBtn { position:relative;top:unset;right:unset;padding:5px;border-radius:0;color:#fff;background-color:#F5003B;text-align:center;width:100px }
#hotline .content .closeBtn:after,
#hotline .content .closeBtn:before { display:none }
.cart { position:fixed }
.cart__item .img { -webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:10px }
.cart__item .detail { -webkit-box-flex:2;-ms-flex:2;flex:2 }
.cart__item .detail h3 { font-family: 'Roboto', sans-serif;font-weight: 700;margin-bottom:10px }
.cart__item .detail p { color:#fabf00;margin-bottom:5px }
.menu-fixed { position:fixed !important;z-index:99 !important;width:100%;background-color:#fff;-webkit-box-shadow:0 0 12px 2px rgba(0,0,0,0.5);box-shadow:0 0 12px 2px rgba(0,0,0,0.5);top:0 }
.animated { -webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both }
.fadeInDown { -webkit-animation-name:fadeInDown;animation-name:fadeInDown }
@-webkit-keyframes fadeInDown {from{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}
@keyframes fadeInDown {from{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}
.alert { position:fixed;right:-700px;top:5%;z-index:104;background-color:#fff;border-radius:0;-webkit-box-shadow:1px 1px 20px 1px rgba(0,0,0,0.1);box-shadow:1px 1px 20px 1px rgba(0,0,0,0.1) }
.alert .content { width:100%;padding:10px 20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center }
.alert .content img { margin-right:15px;width:30px }
.alert#done .content p { color:#5bc54d }
.alert#fail .content p { color:#f14444 }

/* ===== trích từ home.css ===== */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #ccc; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-thumb:hover { background: #333; }
#header { margin-top: 0; }
.contact_list { display: flex; flex-wrap: wrap; gap: var(--hb-space-12); }
#loading_box { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; bottom: 0; right: 0; z-index: 100000; opacity: 0; visibility: hidden; }
#loading_image { width: 100%; height: 100%; background: url("../img/loading_image.gif") no-repeat center center; background-size: 50px 50px; }
.popup-content { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 60%; display: block; padding: 20px; background-color: #fff; box-shadow: 0px 0px 12px 1px rgba(109, 108, 108, 0.1); top: 50%; transition: all ease 0.5s; z-index: 1; }
.popup#last_product { position: fixed; width: 100%; height: 100vh; z-index: 1000; left: 0; top: 0; overflow: hidden; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.83); transition: all ease 0.5s; }
.popup#popup_phone { position: fixed; width: 100%; height: 100vh; z-index: 1000; left: 0; top: 0; overflow: hidden; display: none; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.83); transition: all ease 0.5s; }
.popup#popup_phone .popup-content { width: 500px; background: #f5f5f5; }
.popup#popup_phone.active { display: block; }
.popup#popup_phone p { font-size: 20px; font-weight: bold; margin: 30px 0; text-align: center; }
.popup#popup_phone .form-group { display: block; margin-bottom: 20px; }
.popup#popup_phone .form-group input { height: 40px; width: 100%; border-radius: 0; background: #fff; line-height: 40px; padding: 0 10px; border: 1px solid #ddd; }
.popup#popup_phone .form-group textarea { height: 100px; font-family: 'Roboto', sans-serif; width: 100%; border-radius: 0; background: #fff; padding: 10px; border: 1px solid #ddd; }
.popup#popup_phone a { display: block; width: 120px; background: #350000; color: #fff; border-radius: 0; font-size: 16px; text-transform: uppercase; font-weight: 600; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; }
.popup#popup_phone a:hover { background: #737361; }
.flex-row { display: flex; }
.flex-column { display: flex; flex-direction: column; }
.row-center { display: flex; flex-direction: row; justify-content: center; align-items: center; }