::-webkit-scrollbar{background:#fff;width:10px;height:11px;}
::-webkit-scrollbar-thumb{background:#BBBBBB;}
*{margin:0;padding:0;}
svg.icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-0.125em;}
/* Slick dots default to a black bullet (slick-theme.css), invisible on this site's dark
   background - override so the photo-gallery carousel's page indicator is actually visible. */
.thuvien .slick-dots{position:static;margin-top:10px;}
.thuvien .slick-dots li button:before{color:#ffea00;opacity:.35;}
.thuvien .slick-dots li.slick-active button:before{opacity:1;}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style]{min-width:100% !important;}
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]{width:100% !important;}
.video_popup{position:relative;padding-bottom:55.5%;padding-top:30px;height:0;}
.video_popup iframe, .video_popup object, .video_popup embed{position:absolute;top:0;left:0;width:100%;height:100%;}
#clickvideo{width:100%;padding:4px 0;margin:3px 0%;border:1px solid #DDD;box-sizing:border-box;}
.addthis_native_toolbox{margin:10px 0px;width:100%;clear:both;max-height:50px;overflow:hidden;}
.clear{clear:both;}
img{max-width:100% !important;}
div.bando img{max-width:none !important;}
div.content{line-height:1.7;}
div.content img{max-width:100%;height:auto !important;display:block;margin:20px auto;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.35);}
div.content p{margin-bottom:16px;}
div.content table{max-width:100%;}
div.content h3{color:#f1e00b;font-size:19px;margin:26px 0 12px;font-family:'myFont';text-transform:uppercase;letter-spacing:0.5px;}
div.content ul{margin:0 0 18px 0;padding-left:22px;}
div.content li{margin-bottom:8px;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.5;background:linear-gradient(180deg,#050810 0%,#0c1638 35%,#0a1230 70%,#05070f 100%);background-repeat:no-repeat;color:#fff; margin: 0; padding: 0; width:100%;}
@font-face{font-family:'myFont';src:url('font/cambriab.ttf');}
div#wapper{margin:auto;max-width:100%;}
div#header{position:relative;margin:auto;background:url(images/bg_header_new_crop.webp) center top no-repeat;color:#fff;background-size:100% 100%;text-align:center;min-height:164px;z-index:40;max-width:100%;}
div#header a.logo{display:block;line-height:0;}
div#header img.logo_mobi{display:none;}
div#header a.logo img{max-height:120px;}
div#header a.logo2 img{position:absolute;left:10%;top:4px;max-height:150px;}
div#header a.logo{display:block;line-height:1.3;padding:35px 0 0;color:#fff;font-family:'myFont';font-size:20px;font-weight:bold;text-decoration:none;text-transform:uppercase;}
div#header a.logo .logo-brand{display:inline-block;margin-top:2px;color:#e30613;font-size:34px;}
p.hotline{position:absolute;top:37%;right:20px;font-size:18px;font-family:'myFont';background:url(images/phone.png) left center no-repeat;padding:3px 0;padding-left:40px;}
p.hotline span{color:#FFFF00;font-size:20px;}
div#wap_menu{max-width:100%;margin:auto;z-index:50;position:relative; }
div#menu{position:relative;background-size:auto 100%;height:37px;line-height:37px;margin-top:-37px;}
div#menu ul{list-style:none; margin: 0; padding: 0; float:right; z-index: 50; flex-shrink:0; white-space:nowrap;}
div#menu ul li{float:left;position:relative;z-index:50;}
div#menu ul li.line{background:url(images/menu_gach.webp) center no-repeat;height:37px;width:1px;}
div#menu ul li a{color:#fff;font-size:19px;padding:0px 20px;text-decoration:none;font-family:'myFont';}
div#menu ul li a svg.icon{font-size:30px;color:#fff;}
div#menu ul li a:hover,div#menu ul li a.active,div#menu ul li a.active2{color:#ffea00;}
div#menu ul li ul{top:35px;}
div#menu ul li ul,div#menu ul li:hover ul li ul{position:absolute;margin-left:0px;display:none;}
div#menu ul li:hover ul{display:block;}
div#menu ul li ul li{width:220px;line-height:1.5;background:#121847;border-bottom:1px solid #2f356b;}
div#menu ul li ul li a{padding:6px 10px;text-transform:none;display:block;font-size:16px;border:none;}
div#menu ul li ul li ul{left:220px;top:0px;}
/* Vung menu PC phai nam trong doan lo xuong cua bg_header_new_crop.png (khong phai giua toan bo trang):
   doan lo xuong chinh chiem tu ~32.7% den ~92.3% chieu rong anh nen, do bang pixel alpha/mau do cua vien zigzag. */
div.menu-flex {display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-left: 33%; padding-right: 8%;}
div#search{position:absolute;right:20px;top:7px;background:#fff;border-radius:2px;height:25px;}
div#search input{padding:0px 10px;float:left;margin-top:5px;border:none;background:none;width:180px;outline:none;color:#777;font-style:italic;}
div#search i{float:right;margin-right:5px;margin-top:4px;color:#222;font-size:14px;}
div#slider{margin:auto;max-width:100%;margin-top:0px;}
div#left{width:20%;float:left;}
div.tieude{color:#fff;text-align:center;font-size:14px;background:url(images/tieude.png) center repeat-x;height:39px;line-height:39px;font-weight:bold;text-transform:uppercase;}
div.danhmuc{border:1px solid #d6d6d6;margin-bottom:12px;}
div#danhmuc ul{list-style:none;}
div#danhmuc ul li{}
div#danhmuc ul li:last-child{border:none;}
div#danhmuc ul li a{color:#454545;font-family:'myFont';text-decoration:none;font-size:14px;transition:0.4s;display:block;border-bottom:1px solid #DDD;padding:9px 5px 9px 20px;background:url(images/muiten.png) 4px 13px no-repeat;}
div#danhmuc ul li a:hover{color:red;transition:0.4s;}
div#danhmuc ul li ul li a{padding:9px 5px 9px 35px;background:url(images/i_tinkhac.png) 19px 12px no-repeat;}
div#tinmoi{width:65%;margin-left:2%;display:flex;flex-direction:column;justify-content:flex-start;}
div#tinmoi ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);column-gap:20px;flex:1;align-content:space-between;}
div#tinmoi ul li{padding:8px 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.1);}
div#tinmoi ul li:nth-child(n+5){border-bottom:none;}
/* Was a vertical slick carousel (removed) with images left at height:auto - since the source
   thumbnails have wildly inconsistent native ratios (91-130px tall for the same ~170px width),
   letting the slider's computed slide height clip them cut off the bottom of taller ones and
   the description text below. Fixed-size + object-fit shows every photo whole, no cropping. */
div#tinmoi ul li a img{width:80px;height:60px;object-fit:cover;border:2px solid #e2e2e2;border-radius:4px;float:left;margin-right:10px;}
div#tinmoi ul li h4 a{text-decoration:none;color:#ffffff;font-size:13px;transition:0.4s;display:block;margin-bottom:5px;}
div#tinmoi ul li h4 a:hover{color:#f1e00b;transition:0.4s;}
div#tinmoi ul li p.mota{font-size:12px;color:#c9cbd6;line-height:1.4;margin:0;}
div#hotro{}
div#hotro .phone{background:url(images/phone.png) 13px center no-repeat;color:#d60000;font-size:20px;font-weight:bold;padding-left:60px;padding-top:20px;padding-bottom:10px;}
div#hotro ul{list-style:none;border-bottom:1px dashed #DDDDDD;padding:10px 0;margin:0px 10px;}
div#hotro ul li{clear:both;padding:2px 0;}
div#hotro ul li a img{float:right;}
div#quangcao a img{width:90%;max-width:300px !important;border:1px solid #DDD;margin:5px auto;padding:4px;box-sizing:border-box;}
div#quangcao a img:hover{border:1px solid red;}
form#frm_dknt{background:url(images/bg_dknt.png) center no-repeat;width:251px;height:35px;margin:10px;}
form#frm_dknt input[type='text']{margin-left:45px;width:140px;padding:0px 5px;float:left;margin-top:9px;border:none;background:none;outline:none;color:#000;}
form#frm_dknt input[type='button']{background:#000;color:#fff;width:50px;height:25px;line-height:25px;border:none;margin-top:5px;border-radius:3px;cursor:pointer;}
div#main_content{padding:10px 0px;}
div#right{width:79%;float:right;}
div.tieude_giua{color:#f1e00b;font-size:22px;background:url(images/tieude_giua.png) center bottom no-repeat;text-align:center;padding-bottom:15px;margin-bottom:15px;margin-top:15px;font-family:'myFont';text-transform:uppercase;}
div.wap_item:before{content:'';width:1px;position:absolute;left:50%;height:89%;background:#d2d2d2;}
div.item_tv{width:23%;display:inline-block;vertical-align:top;margin:0.85%;}
div.item a.chitiet{width:65px;padding-left:21px;height:31px;line-height:31px;text-align:center;color:#FFFF00;display:block;float:right;text-decoration:none;background:url(images/i_chitiet.png) center no-repeat;margin-top:10px;}
div.item_tv a img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
div.item_tv h3 a{text-decoration:none;display:block;color:#fff;font-family:'myFont';font-size:17px;margin-top:5px;text-align:center;}
div.item_tv h3 a:hover{color:#FFFF00;}
div.wap_item{overflow:hidden;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-flow:row wrap;-webkit-flex-flow:row wrap;position:relative;}
div.item{width:50%;padding:2%;box-sizing:border-box;float:left;vertical-align:top;border-bottom:1px solid #666666;}
div.item .sp_img{overflow:hidden;width:30%;float:left;margin-right:15px;position:relative;z-index:20;}
div.item .sp_img a{display:block;line-height:0;}
div.item a img{width:100%;transition:all 1s ease 0s;}
div.item a img:hover{transform:scale(1.1);}
div.item .sp_name a{text-decoration:none;color:#fff;font-family:'myFont';font-size:19px;display:block;margin-top:5px;margin-bottom:15px;}
div.item .sp_name a:hover{transition:0.4s;color:#f1e00b;}
div.item .sp_gia{font-size:14px;}
div.item .sp_gia span.giacu{color:#666666;text-decoration:line-through;float:left;}
div.item .sp_gia span.giamoi{color:#666666;color:red;float:right;}
div.item .sp_gia span.motgia{display:block;float:none;}
div.wap_trangchu{display:flex;align-items:stretch;flex-wrap:wrap;padding:2%;max-width:100%;margin:15px auto;margin-bottom:20px;background:rgba(0,0,0,0.2);border:7px solid #2b385d;box-sizing:border-box;border-radius:4px;}
div.wap_thuvien{width:33%;display:flex;flex-direction:column;}
div.wap_thuvien .thuvien{flex:1;display:flex;flex-direction:column;justify-content:flex-start;}
div.thuvien p{width:92%;margin:3% auto;position:relative;overflow:hidden;}
div.thuvien p:before{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5);content:'';-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-120%,0);}
div.thuvien .item_tv:hover p:before{webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,120%,0);}
div.thuvien p a img{width:100%;aspect-ratio:3/2;object-fit:cover;border:3px solid #e2e2e2;box-sizing:border-box;}
div.wap_box_new{display:flex;flex-wrap:wrap;justify-content:space-between;}
div.box_news{width:31%;box-sizing:border-box;margin-bottom:30px;}
div.box_news a img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block;border:2px solid #2b385d;box-sizing:border-box;}
div.box_news h3{margin:12px 0 8px;font-size:18px;font-family:'myFont';text-transform:none;}
div.box_news h3 a{color:#fff;text-decoration:none;}
div.box_news h3 a:hover{color:#f1e00b;}
div.box_news .mota{color:#c9cbd6;font-size:13px;line-height:1.6;}
div#wap_footer{max-width:100%;background:url(images/footer.png) no-repeat; background-size:cover; border-top:1px solid #fff;padding-top:20px;margin:auto;border-top:7px solid #384063;}
div#footer{max-width:100%;margin:auto;}
div#main_footer{width:65%;float:left;}
div#thongke{width:30%;float:right;}
div#thongke .td_ft{color:#ffff00;margin-bottom:7px;font-size:17px;text-transform:uppercase;font-family:'myFont';}
div#thongke ul{list-style:none;}
div#thongke ul li{clear:both;padding:6px 0px;font-size:13px;}
div#thongke ul li img{float:left;margin-right:15px;width:20px;}
div.gioithieu{padding:10px;box-sizing:border-box;}
div.bb-custom-wrapper{width:35%;float:left;}
div.gioithieu .mota{float:right;width:63%;}
div.gioithieu a.chitiet{width:65px;padding-left:21px;height:31px;line-height:31px;text-align:center;color:#FFFF00;display:block;margin:auto;text-decoration:none;background:url(images/i_chitiet.png) center no-repeat;}
div#wap_doitac{border-top:7px solid #384063;padding:16px 0;max-width:100%;margin:auto;<!--border-bottom:1px solid #fff;-->}
div#doitac{box-sizing:border-box;max-width:100%;margin:auto;}
div#doitac a img{height:90px;margin:0 10px;}
div.wap_pro{margin:15px auto;clear:both;}
.zoom_slick{width:35%;float:left;}
.zoom_slick .slick2{border:1px solid #DDD;}
.zoom_slick .slick{margin-top:5px;}
.zoom_slick .slick img{width:90%;margin:auto;border:1px solid #DDD;box-sizing:border-box;padding:5px;}
.zoom_slick .slick img:hover{border:1px solid #F60;opacity:0.5;transition:1s;}
.product_info{float:right;list-style:none;width:62%;}
.product_info li{font-size:13px;border-bottom:1px solid #EEE;padding:6px 0;}
.product_info li.ten{color:#0033FF;font-size:18px;}
.product_info li.giacu{font-size:15px;text-decoration:line-through;}
.product_info li.gia{color:red;font-size:16px;}
.product_info li b{font-weight:normal;font-size:14px;}
.xemgiohang{color:#E80019;display:block;width:120px;height:30px;text-align:center;line-height:30px;text-align:center;font-weight:bold;cursor:pointer;font-size:13px;transition:0.4s;margin:auto;margin-top:7px;}
.product_info li .dathang{background:#000 url(images/i_cart.png) 10px center no-repeat;color:#fff;display:block;width:100px;height:30px;line-height:30px;text-align:center;padding-left:30px;text-transform:uppercase;font-weight:bold;cursor:pointer;font-size:12px;transition:0.4s;}
.product_info li .dathang:hover{transition:0.4s;background:#E00 url(images/i_cart.png) 10px center no-repeat;}
span.size{display:inline-block;padding:2px 10px;border:1px solid #DDD;border-radius:3px;margin-right:5px;cursor:pointer;}
span.mausac{display:block;float:left;border:1px solid #DDD;width:30px;height:30px;margin-right:5px;cursor:pointer;font-size:0;}
span.active_size,span.size:hover,span.mausac:hover, span.active_mausac{border:1px solid #EE0000;}
input.soluong{width:50px;border:1px solid #C7C6C6;padding:2px 0px;text-align:center;font-size:15px;margin-right:5px;}
table#giohang input{margin:5px 0px;}
table#giohang input.btn,.click_ajax{background:#DC0018;color:#ffffff;padding:7px 15px;border:none;cursor:pointer;margin:5px 1px;border-radius:3px;}
table#tt td{height:30px;}
table#tt td input.t{width:300px;height:20px;margin:3px 0px 5px 0px;border:1px solid #DDD;}
table#tt td textarea{width:300px;}
table#tt span{color:red;}
@-webkit-keyframes star{0%{-webkit-transform:rotate(0) scale(0);}
50%{-webkit-transform:rotate(180deg) scale(1.5);}
100%{-webkit-transform:rotate(360deg) scale(0);}
}
@-o-keyframes star{0%{-o-transform:rotate(0) scale(0);}
50%{-o-transform:rotate(180deg) scale(1.5);}
100%{-o-transform:rotate(360deg) scale(0);}
}
@-moz-keyframes star{0%{-moz-transform:rotate(0) scale(0);}
50%{-moz-transform:rotate(180deg) scale(1.5);}
100%{-moz-transform:rotate(360deg) scale(0);}
}
.start-animate{z-index:99999999999999999 !important;position:absolute;animation:star linear 1.75s infinite;-moz-animation:star linear 1.75s infinite;-webkit-animation:star linear 1.75s infinite;-o-animation:star linear 1.75s infinite;}
@keyframes star{0%{transform:rotate(0) scale(0);}
50%{transform:rotate(180deg) scale(1.5);}
100%{transform:rotate(360deg) scale(0);}
}
.main-slider {margin-top:-34px !important; z-index: 1; position: relative;}
/* ===== Mobile nav - plain JS/CSS (js/mobile-menu.js), no library =====
   Hidden by default (desktop); the max-width:960px block below flips these to visible -
   that's the only thing display-switched there, everything else here always applies. */
div.header{display:none;}
a.hien_menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:4px 0 4px 10px;padding:0;border-radius:8px;background:rgba(255,255,255,0.08);color:#ffea00;text-align:center;text-decoration:none;transition:background 0.2s ease;cursor:pointer;}
a.hien_menu:hover,a.hien_menu:focus-visible{background:rgba(255,234,0,0.18);}
a.hien_menu:active{background:rgba(255,234,0,0.3);}
a.hien_menu svg.icon{float:none;margin:0;font-size:20px;pointer-events:none;}
body.mobile-menu-locked{overflow:hidden;}
/* Explicit margin/text-align reset: third-party widget CSS (bookblock.css, flexdemo.css) ships
   bare `nav{...}` rules meant only for their own <nav> elements, which also match this real
   <nav id="menu_mobi"> since bare tag selectors apply everywhere. An ID selector always outranks
   those, so pinning every box-model property here guarantees this panel is never nudged by them. */
nav#menu_mobi{display:none;position:fixed;top:0;left:0;right:auto;bottom:0;margin:0;width:82%;max-width:400px;max-height:none;text-align:left;background:#0c1638;color:#fff;z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(-100%);transition:transform 0.35s ease;box-shadow:4px 0 24px rgba(0,0,0,0.5);box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
nav#menu_mobi a,a.hien_menu,div.mobile-menu-overlay{-webkit-tap-highlight-color:transparent;}
nav#menu_mobi.open{transform:translateX(0);}
div.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;background:rgba(3,7,20,0.55);opacity:0;visibility:hidden;transition:opacity 0.35s ease;z-index:999;cursor:pointer;}
div.mobile-menu-overlay.open{opacity:1;visibility:visible;}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 10px 14px 20px;border-bottom:1px solid rgba(255,255,255,0.15);}
.mobile-menu-title{font-family:'myFont';font-size:17px;letter-spacing:0.5px;color:#ffea00;text-transform:uppercase;}
.mobile-menu-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:rgba(255,255,255,0.08);color:#fff;border-radius:8px;font-size:16px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease;-webkit-tap-highlight-color:transparent;}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:rgba(255,60,60,0.25);color:#ff6b6b;}
.mobile-menu-close:active{background:rgba(255,60,60,0.4);}
nav#menu_mobi ul{list-style:none;margin:0;padding:0;}
nav#menu_mobi > ul > li{border-bottom:1px solid rgba(255,255,255,0.12);margin:0;}
nav#menu_mobi > ul > li > a{display:block;padding:14px 44px 14px 20px;margin:0;color:#fff;text-decoration:none;font-size:15px;position:relative;transition:background 0.15s ease,color 0.15s ease;}
nav#menu_mobi > ul > li > a.active{color:#ffea00;}
nav#menu_mobi > ul > li > a:hover,nav#menu_mobi > ul > li > a:focus-visible{background:rgba(255,234,0,0.08);}
nav#menu_mobi > ul > li > a:active{background:rgba(255,234,0,0.16);}
.mobile-submenu-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);transition:transform 0.3s ease,color 0.15s ease;font-size:13px;color:rgba(255,255,255,0.6);padding:10px;margin:-10px;cursor:pointer;}
.mobile-submenu-arrow:hover{color:#ffea00;}
li.has-submenu.open > a .mobile-submenu-arrow{transform:translateY(-50%) rotate(180deg);}
.mobile-submenu{max-height:0;overflow:hidden;transition:max-height 0.35s ease;background:rgba(0,0,0,0.2);margin:0;padding:0;}
li.has-submenu.open > .mobile-submenu{max-height:600px;}
.mobile-submenu > li{margin:0;}
.mobile-submenu > li > a{display:block;padding:12px 20px 12px 36px;margin:0;color:rgba(255,255,255,0.85);text-decoration:none;font-size:14px;border-top:1px solid rgba(255,255,255,0.08);transition:color 0.15s ease,background 0.15s ease;}
.mobile-submenu > li > a:hover,.mobile-submenu > li > a:focus-visible{color:#ffea00;background:rgba(255,234,0,0.06);}
.mobile-submenu > li > a:active{background:rgba(255,234,0,0.14);}
/* The desktop nav only fits inside the zigzag "notch" painted into
   bg_header_new_crop.webp (the notch spans ~32.7%-92.3% of the image's own
   width - see the .menu-flex comment below) down to about 1280px viewport
   width; below that the fixed .menu-flex padding no longer leaves enough
   room for the menu items and they spill out over the red zigzag border -
   worse on tablets in landscape (1024-1194px) than on any phone width, since
   phones already get the hamburger nav further down. Switch to the mobile
   header/hamburger nav here instead of trying to keep shrinking the
   horizontal menu to fit an increasingly narrow notch. */
@media screen and (max-width:1280px){
div#header{background:none;min-height:140px;padding:10px;}
div#header a.logo2 img{left:5px;max-height:120px;}
div#header a.logo{float:none;width:auto;padding:10px 10px 10px 135px;font-size:16px;text-align:left;}
div#header a.logo .logo-brand{font-size:22px;}
div.header{display:block;background:#0c1638;height:52px;line-height:52px;margin:0;box-shadow:0 1px 0 rgba(255,255,255,0.08);position:relative;z-index:70;}
nav#menu_mobi{display:block;}
div.mobile-menu-overlay{display:block;}
div#menu{display:none;}
}
@media screen and (max-width:1024px){
div.frm_lienhe{margin:10px 0px 0px 0px;}
p.hotline{background:none;padding:0;}
p.hotline span{font-size:17px;}
}
@media screen and (max-width:960px){div#goodledich{position:relative;top:auto;right:auto;}
div#header a.logo img{max-height:100px;width:80%;float:right;}
div.item_tv{width:31%;}
p.hotline{position:absolute;top:auto;right:5px;font-size:14px;font-family:'myFont';background:none;padding:3px 0;padding-left:0px;bottom:0px;}
div#flags a img{width:25px;}
p.hotline span{color:#FFFF00;font-size:17px;}
div#wapper{width:100%;margin:auto;}
div#footer{width:97%;}
div#slider{width:100%;padding:0;border:none;margin:0;}
div#danhmuc{display:none;}
div#right{width:100%}
div#left{width:100%;}
div.item{}
div.gioithieu{text-align:center;}
div.bb-custom-wrapper{width:90%;float:none;max-width:500px !important;margin:auto;}
div.gioithieu .mota{float:none;width:100%;text-align:left;}
div.wap_thuvien{float:left;width:100%;float:none;margin:auto;max-width:500px;}
div#tinmoi{width:100%;float:none;margin-left:0;max-width:500px;margin:auto;}
div#tinmoi ul{grid-template-columns:1fr;align-content:start;row-gap:0;}
div#main_footer{width:100%;}
div#thongke{width:100%;}
div.thongke_an{}
div.tt_lh{width:100%;}
div.bando{width:100%;}
a.sp_cart{display:block;text-decoration:none;color:#fff;margin-left:-20px;position:absolute;left:50%;}
a.sp_cart i{font-size:30px;}
div.user{position:absolute;right:10px;top:0px;font-size:30px;color:#fff;cursor:pointer;}
.menu_login{display:none;}
div#tinmoi ul li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.1);}
div#tinmoi ul li:last-child{border-bottom:none;}
div#tinmoi ul li a img{width:26%;height:60px;}
.othernews ul.phantrang{margin-left:0;}
div.box_news{width:48%;}
}
@media screen and (max-width:800px){}
@media screen and (max-width:700px){}
@media screen and (max-width:603px){div.wap_item2{text-align:center;}
div.item_tv{width:45%;margin:2%;}
div#header a.logo img{max-height:100px;}
div#header a.logo2 img{max-height:100px;}
div#header{min-height:120px;}
div#header a.logo{font-size:14px;padding-left:115px;}
div#header a.logo .logo-brand{font-size:19px;}
div.item .sp_name a{font-size:14px;margin-bottom:5px;}
div.item{width:100%;padding:2% 0;}
div.wap_item:before{display:none;}
.box_container,div.wap_trangchu{padding:15px 20px;}
div.box_news{width:100%;}
.zoom_slick{width:80%;max-width:400px;float:none;margin:auto;}
.product_info{width:100%;margin-top:6px;}
.gh_an{display:none;}
div.gioithieu{padding:10px 0;}
}
@media screen and (max-width:460px){div#wap_doitac{padding:7px 0;}
div#doitac a img{height:60px;margin:0px 5px;}
#map_canvas{height:350px !important;}
.box_news .mota{max-height:73px;overflow:hidden;}
div#header a.logo img{float:right;max-height:80px;margin-top:10px;}
div#wapper{padding:0;overflow:hidden;}
div.item{}
div.frm_lienhe .item_lienhe input[type='text'], div.frm_lienhe .item_lienhe textarea, div.frm_lienhe .item_lienhe input[type='password']{width:100%;}
div.frm_lienhe .item_lienhe select{width:100%;}
.map_description{width:100%;}
div.frm_lienhe .item_lienhe p{width:100%;}
.othernews ul.phantrang{margin-left:5px;}
.box_news h3 a{font-size:14px;}
div.tieude_giua{font-size:16px;}
div.item .sp_name a{margin-bottom:5px;font-size:14px;}
div.item .sp_name a{font-size:13px;}
div.item_tv h3 a{font-size:14px !important;}
div#thongke{margin-top:12px;}
div#wap_footer{background:#3f454b url(images/footer.png) center top no-repeat;}
div#thongke ul li{display:inline-block;width:49%;}
p.hotline{width:90%;float:none;max-width:500px !important;margin:auto;}
p.hotline span{font-size:14px;}
div#header a.logo2 img{max-height:75px;}
div#header{min-height:95px;}
div#header a.logo{font-size:12px;padding-left:90px;margin-top:0;}
div#header a.logo .logo-brand{font-size:16px;}
}
@media screen and (max-width:360px){div#header a.logo2 img{max-height:55px;margin-top:10px;}
div#header{min-height:75px;}
div#header a.logo{font-size:11px;padding-left:70px;padding-top:6px;}
div#header a.logo .logo-brand{font-size:14px;}
div#thongke ul li{display:inline-block;width:100%;}
p.hotline{bottom:-6px;}
}

.main-slide {cursor: move;width: 100%; height: 450px;overflow: hidden;}
.main-slide-content {position: relative;max-width: 100%; height: 450px;}
#slider .flexslider .slides li{height:450px;overflow:hidden;}
#slider .slider-img {width:100%;height:450px;max-width:100% !important;object-fit:cover;object-position:center center;display:block;}
/* css/flexslider.css hides every slide (display:none) until the flexslider() JS plugin runs, so the
   banner stays blank for however long jQuery + jquery.flexslider.js take to download/parse/execute.
   Painting the first slide via plain CSS removes that JS dependency for the very first frame; the
   plugin still takes over normally once it loads (it force-sets its own inline display/width on all
   slides during init, so nothing here fights it). */
#slider .flexslider .slides > li:first-child{display:block;}
/* #slider prefix needed: css/flexslider.css's ".flexslider .slides img{height:auto}" (2 classes+tag)
   is more specific than a bare ".slider-img" (1 class) and was silently winning, leaving a gap under
   wide-aspect slides where object-fit:cover never got a height to work with. */
/* Anh slider da duoc crop san (images/sites/banner/) theo bo cuc rieng tung anh, nguoi luon nam giua khung -
   khong can chinh object-position rieng cho tung slide nua. */

/* Nut next/prev cho banner - flexslider mac dinh an (.flex-direction-nav{display:none}) va dung font icon
   rieng khong ton tai trong project nen phai bat lai; icon mui ten ve tay bang SVG nhung thang vao
   content:url() (Font Awesome da bi go bo khoi site nen khong the doi sang no nua nhu truoc). */
#slider .flex-direction-nav{display:block;}
#slider .flex-direction-nav a{width:46px;height:46px;margin-top:-23px;background:rgba(0,0,0,0.4);border-radius:50%;opacity:0.7;transition:background .3s,opacity .3s;font-size:0;line-height:0;color:transparent;white-space:nowrap;overflow:hidden;}
/* Text hidden via font-size:0 + color:transparent only - NOT text-indent:-9999px (see below) and
   NOT an extra position:relative here (flexslider.css already makes this element position:absolute,
   which is itself a valid containing block for the ::before below - adding position:relative on
   top of that here overrode it with a *different* positioned-element type, breaking the
   left/right:14px placement of the whole button, not just the icon inside it).
   Confirmed by testing in isolation: combining text-indent:-9999px with a content:url() ::before
   (even with position:absolute + transform centering) makes the icon fail to paint at all in
   Chrome - some quirk in how text-indent interacts with replaced pseudo-element content.
   font-size:0 already collapses the literal "Previous"/"Next" text flexslider inserts to zero
   size, so text-indent was redundant anyway. */
#slider .flex-direction-nav a:before{content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='white'%3E%3Cpath%20d='M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z'/%3E%3C/svg%3E");display:block;width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#slider .flex-direction-nav a.flex-next:before{content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='white'%3E%3Cpath%20d='M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z'/%3E%3C/svg%3E");}
#slider .flex-direction-nav .flex-prev{left:14px;}
#slider .flex-direction-nav .flex-next{right:14px;}
#slider .flex-direction-nav a:hover{background:#e30613;opacity:1;}
#slider .flex-direction-nav a.flex-disabled{opacity:0!important;}
@media screen and (max-width:960px){
#slider .flex-direction-nav a{width:32px;height:32px;margin-top:-16px;}
#slider .flex-direction-nav a:before{font-size:14px;line-height:32px;width:32px;height:32px;}
#slider .flex-direction-nav .flex-prev{left:6px;}
#slider .flex-direction-nav .flex-next{right:6px;}
}

@media only screen and (min-width: 320px) and (max-width: 767px){
#slider .flexslider .slides li{height:220px;}
#slider .slider-img{height:220px;}
}

p.hotline > span {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

p.hotline {
  display: flex;
  line-height: 1.1;
}

p.hotline {
  background: url(images/phone.png) left top no-repeat;
  top: 33%;
  right: 30px;
}

p.hotline i {
  font-style: normal;
  text-align: left;
}

@media screen and (max-width: 1024px) {
  p.hotline {
      top;
      top: 41%;
      padding-left: 40px;
  }
}

@media screen and (max-width: 960px) {
  p.hotline {
      padding: 0;
      background: none;
      top: auto;
      bottom: 3px;
      right: 5px;
      align-items: center;
  }

  p.hotline > span {
      flex-direction: row;
      padding-left: 5px;
  }

  p.hotline i:not(:first-child)::before {
      content: '-';
      padding-left: 5px;
      padding-right: 5px;
  }
}

@media screen and (max-width: 414px) {
  p.hotline {
      font-size: 1px;
      color: transparent;
      overflow: hidden;
  }
}

@media screen and (max-width: 360px) {
  p.hotline i {
      font-size: 12px;
  }
}

span.footer-emails .email-item:not(:first-child)::before {
  content: ' | '
}

@media screen and (max-width: 460px) {
  span.footer-emails {
      display: inline-flex;
      flex-direction: column;
  }

  span.footer-emails .email-item:not(:first-child) {
      margin-top: -5px;
  }

  span.footer-emails .email-item::before {
      content: '• ' !important;
  }
}

a.hotline-btn{position:absolute;top:37%;right:20px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ff3b30,#a80000);color:#fff;font-family:'myFont';text-decoration:none;padding:10px 22px;border-radius:30px;box-shadow:0 3px 10px rgba(0,0,0,0.35);white-space:nowrap;transition:transform .2s,box-shadow .2s;}
a.hotline-btn svg.icon{font-size:22px;color:#ffea00;}
a.hotline-btn .hotline-text{display:flex;flex-direction:column;line-height:1.15;}
a.hotline-btn .hotline-label{font-size:14px;font-weight:bold;text-transform:uppercase;}
a.hotline-btn .hotline-number{color:#ffea00;font-size:22px;font-weight:800;}
a.hotline-btn:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 5px 14px rgba(0,0,0,0.45);color:#fff;}
@media screen and (max-width:1280px){
a.hotline-btn{position:absolute;top:auto;bottom:6px;right:8px;transform:none;padding:6px 12px;gap:6px;}
a.hotline-btn:hover{transform:none;}
a.hotline-btn svg.icon{font-size:14px;}
a.hotline-btn .hotline-label{font-size:10px;}
a.hotline-btn .hotline-number{font-size:14px;}
}
@media screen and (max-width:360px){
a.hotline-btn{padding:5px 9px;}
a.hotline-btn .hotline-label{font-size:9px;}
a.hotline-btn .hotline-number{font-size:12px;}
}
}

/* ===== Fixed max-width on wide screens: header/logo/content stop growing past this cap ===== */
div#header,div#wap_menu,div#slider,div#wapper,div#wap_footer,div#wap_doitac{max-width:1600px;}

/* ===== Hải Long Sơn content components (about/services/contact/recruitment pages) ===== */
.hls-card{background:rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:18px 22px;margin-bottom:18px;box-sizing:border-box;}
.hls-card h3{color:#ffea00;font-size:18px;margin-bottom:12px;text-transform:uppercase;font-family:'myFont';letter-spacing:0.3px;}
.hls-card p{margin-bottom:10px;line-height:1.7;text-align:justify;}
.hls-intro-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.hls-intro-grid .hls-intro-text{flex:1 1 420px;}
.hls-intro-grid .hls-intro-img{flex:0 1 300px;}
.hls-intro-grid .hls-intro-img img{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.2);}
.hls-info-table{width:100%;border-collapse:collapse;}
.hls-info-table td{padding:7px 10px;border-bottom:1px dashed rgba(255,255,255,0.18);vertical-align:top;font-size:14px;}
.hls-info-table td:first-child{color:#ffea00;width:230px;font-weight:bold;white-space:nowrap;}
.hls-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.hls-badge{background:#1c2a52;border:1px solid #2f356b;border-radius:6px;padding:8px 14px;font-size:13px;}
.hls-grid-2{display:flex;flex-wrap:wrap;gap:18px;}
.hls-grid-2>div{flex:1 1 300px;}
.hls-list{margin:0;padding-left:20px;line-height:1.8;}
.hls-list li{margin-bottom:4px;}
.hls-img-full{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.15);margin-top:8px;}
.hls-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.hls-stat{flex:1 1 140px;background:#1c2a52;border:1px solid #2f356b;border-radius:8px;padding:14px;text-align:center;}
.hls-stat b{display:block;color:#ffea00;font-size:26px;font-family:'myFont';}
.hls-stat span{font-size:12px;color:#ccc;text-transform:uppercase;}
@media screen and (max-width:768px){
.hls-info-table td{display:block;width:100%!important;white-space:normal;}
.hls-info-table td:first-child{border-bottom:none;padding-bottom:0;}
}

/* ===== Footer redesign: card panels, cleaner stats list, no content changes ===== */
div#wap_footer{padding:28px 20px 16px;box-sizing:border-box;}
div#footer{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;}
div#main_footer,div#thongke{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:20px 24px;box-sizing:border-box;float:none;}
div#main_footer{width:62%;flex:1 1 380px;}
div#thongke{width:34%;flex:1 1 260px;display:flex;flex-direction:column;}
div#main_footer p{margin:0 0 10px !important;}
div#main_footer p:first-child{padding-bottom:12px;margin-bottom:14px !important;border-bottom:1px solid rgba(255,255,255,0.14);}
div#main_footer p:nth-child(2),div#main_footer p:nth-child(3){font-size:13px !important;}
div#main_footer p:last-child{margin-bottom:0 !important;opacity:0.65;}
div#thongke .thongke_an{flex:1;}
div#thongke ul{list-style:none;margin:0;padding:0;}
div#thongke ul li{display:flex;align-items:center;gap:10px;clear:none;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.12);font-size:13px;}
div#thongke ul li:last-child{border-bottom:none;}
div#thongke ul li img{float:none;margin-right:0;width:16px;opacity:0.8;}
div#thongke ul li span{margin-left:auto;color:#ffea00;font-weight:bold;font-family:'myFont';}
div#thongke>p{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.14);font-size:12px;color:#aaa;text-align:center;}
@media screen and (max-width:768px){
div#main_footer,div#thongke{width:100%;}
}

/* ===== Partner logos: white tiles for consistent contrast, same logos/content =====
   NOTE: keep div#doitac itself in normal flow (no display:flex) - the mmenu mobile-menu
   plugin clones/moves page markup at runtime and interacts badly with flex on this
   particular container, causing runaway height. Style the anchor tags instead. */
div#wap_doitac{background:rgba(0,0,0,0.12);}
div#doitac{text-align:center;}
div#doitac a{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:8px 16px;margin:6px;box-shadow:0 2px 8px rgba(0,0,0,0.25);vertical-align:middle;transition:transform 0.25s,box-shadow 0.25s;}
div#doitac a:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,0.35);}
div#doitac a img{height:46px !important;margin:0 !important;max-width:150px;width:auto !important;object-fit:contain;}
@media screen and (max-width:460px){
div#doitac a img{height:34px !important;max-width:110px;}
}

/* ===== Org chart drawn in CSS (no image) ===== */
.hls-orgchart{display:flex;flex-direction:column;align-items:center;padding:14px 0 4px;}
.hls-orgchart .hoc-level{display:flex;justify-content:center;}
.hls-orgchart .hoc-row{flex-wrap:wrap;gap:10px;}
.hls-orgchart .hoc-box{background:linear-gradient(135deg,#1c2a52,#2f356b);border:1px solid rgba(255,234,0,0.6);border-radius:6px;padding:10px 18px;color:#fff;font-size:13px;font-weight:bold;text-align:center;min-width:120px;box-sizing:border-box;}
.hls-orgchart .hoc-box.hoc-top{background:linear-gradient(135deg,#7a1010,#a80000);border-color:#ffea00;min-width:160px;font-size:14px;text-transform:uppercase;font-family:'myFont';}
.hls-orgchart .hoc-box.hoc-accent{background:linear-gradient(135deg,#1f5c33,#2e8b4f);}
.hls-orgchart .hoc-connector{width:2px;height:18px;background:#ffea00;opacity:0.55;}
@media screen and (max-width:600px){
.hls-orgchart .hoc-row{flex-direction:column;align-items:center;}
}

/* ===== Contact page: form + map side by side, no more empty half ===== */
.hls-contact-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;}
.hls-contact-grid>div{flex:1 1 380px;box-sizing:border-box;}
.hls-contact-map iframe{display:block;}
@media screen and (max-width:768px){
.hls-contact-grid{flex-direction:column;}
}