/*reset*/ * { padding: 0; margin: 0; box-sizing: border-box; } ul, li { padding: 0px; margin: 0px; } a { text-decoration: none; } body { font-family: 'Arial', 'Helvetica', 'sans-serif'; font-size: 13px; position: relative; box-sizing: border-box; overflow-y: scroll; top: 0 !important } .overflow_hidden { overflow: hidden !important; padding-right: 17px; } /*=======================================*/ a:focus, a:hover { text-decoration: none; } .clear { display: block; clear: both; } .h1, .h2, .h3, h1, h2, h3 { margin: 0; } /*=======================================*/ #full { margin: 0px auto; overflow-x: hidden; position: relative; background: #fff; } .head.fix {position: fixed !important;top: 0px !important;left: 0px;width: 100%;-webkit-animation: fadeInDown 0s ease-in backwards;-moz-animation: fadeInDown 0s ease-in backwards;-o-animation: fadeInDown 0s ease-in backwards;-ms-animation: fadeInDown 0s ease-in backwards;-moz-animation-delay: 0s;-webkit-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s;z-index: 9999;-webkit-box-shadow: 0px 5px 5px 0px rgba(148, 145, 148, 1);-moz-box-shadow: 0px 5px 5px 0px rgba(148, 145, 148, 1);box-shadow: 0px 5px 5px 0px rgba(148, 145, 148, 1);} .head.fix #menu { margin: 10px 0 15px; transition: all 1s; } .head.fix .logo { max-width: 100px; background-size: 100%; height: 85px; padding-top: 5px; transition: all 1s } .head.fix .logo img { height: 50px; transition: all 1s } .hover_sang3 { overflow: hidden; position: relative; display: block } .center_left .hover_sang3, .item_center .hover_sang3 { aspect-ratio: 4 / 3; } .center_left .hover_sang3 img, .item_center .hover_sang3 img { width: 100%; height: 100%; object-fit: cover; } .hover_sang3:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } .hover_sang3:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } .hover_sang3:hover:before { right: 50%; left: 50%; width: 0; background: rgba(255, 255, 255, 0.5); } .hover_sang3:hover:after { height: 0; top: 50%; bottom: 50%; background: rgba(255, 255, 255, 0.5); } .grecaptcha-badge{display: none !important;} /*commont*/ .text { text-align: justify; line-height: 2em; } .text img { max-width: 100% !important; height: auto !important; } div.text>h2{font-family: 'UVNSachVo';font-size: 24px;margin-bottom: 10px;font-weight: 600;} div.text>h3 {font-family: 'UVNSachVo';font-size: 20px;margin-bottom: 10px;font-weight: 600;} div.text>h4 {font-family: 'UVNSachVo';font-size: 16px;margin-bottom: 10px;font-weight: 600;} div.text>b, strong {font-family: 'UVNSachVo';font-size: 15px;margin-bottom: 10px;font-weight: 600;} div.text { color: #515151; line-height: 23px; font-size: 15px; font-family: 'UVNSachVo'; max-width: 100%; } div.text ul, li {margin-left: 16px;} .main_left, ul, li {margin-left: 10px;} div.box-km h2 {font-size: 18px;font-weight: 600} .wp-caption.aligncenter { max-width: 100% !important; height: auto !important; } .clear { display: block; clear: both; } .left_0 { margin-left: 0px !important; } .my_table { display: table; } .my_row { display: table-row; } .my_cell { display: table-cell; } .w100 { width: 100%; } .mw100 { max-width: 100%; vertical-align: middle; } .pd0 { padding: 0px } .hid { display: none; } .pdr0 { padding-right: 0px; } .pdl0 { padding-left: 0px; } .l50 { width: 50%; float: left; padding-right: 10px; } .r50 { width: 50%; float: right; padding-left: 10px; } .top20 { margin-top: 20px; } .top15 { margin-top: 15px; } .top10 { margin-top: 10px; } .top5 { margin-top: 5px; } .row_p { margin-left: -15px; margin-right: -15px; } .inline_block { display: inline-block; } .hvr:hover { color: #f00; } .hvy:hover { color: #ff0; } .trs03 { -webkit-transition: all .3s; transition: all .3s; } .trs1 { -webkit-transition: all 1s; transition: all 1s; } .center { text-align: center; } .contain_alert { position: fixed; right: 10px; top: 10px; z-index: 100; } .my_alert { z-index: 100; line-height: 21px; margin-bottom: 10px; } .alert a { margin-left: 10px; } .text_warning { color: #8a6d3b; } .text_info { color: #31708f; } .text_success { color: #3c763d; } .text_danger { color: #a94442; } .ilb { display: inline-block; } /*TOP*/ #top { color: #FFF; font-weight: 500; text-align: center; position: fixed; bottom: 4px; right: 10px; display: none; cursor: pointer; z-index: 100; } #top:hover { } /*++++++++++Lien he+++++++++++*/ .tablelienhe { } .tablelienhe span { color: #F00; } .tablelienhe .my_cell { padding: 5px 0px; vertical-align: top; } .tablelienhe .my_cell label { font-size: 12px; color: #404040; font-weight: bold; } .tablelienhe .cell_title { text-align: right; padding-right: 15px; } .tablelienhe .input { height: 32px; padding: 5px; border: 1px solid #d1d1d1; line-height: 20px; color: #666; font-size: 12px; box-sizing: border-box; outline: none; background: #fdfdfd; padding-left: 30px; width: 100%; } .tablelienhe textarea.input { padding: 10px; } .tablelienhe .input:focus { border-color: #33a3b3 } .tablelienhe textarea { padding: 5px; } .tablelienhe .title { font-size: 14px; font-weight: bold; text-transform: uppercase } .button { display: inline-block; padding: 5px 20px; border: 1px solid #cdcdcd; cursor: pointer; background: #f0f0f0; color: #000; } .button:hover { border: 1px solid #3399ff; } .left_lienhe { width: 49%; box-sizing: border-box; float: left; } .right_lienhe { width: 49%; box-sizing: border-box; float: right; } .fa-contact { width: 33px; height: 32px; position: absolute; left: 0px; top: 0px; line-height: 32px !important; font-size: 18px !important; text-align: center; color: #CCC1C1; } .box_input_contact { position: relative; margin-bottom: 10px; } .contain_map_lienhe { margin-top: 20px; } .tablelienhe .box_not_valid .fa-contact { color: #f00; } /*notify_input*/ .notify_input { width: 13px; height: 13px; display: inline-block; background: url(../images/commont/icon_tip.png) top left no-repeat; position: absolute; top: 50%; right: 5px; margin-top: -6px; cursor: pointer; } .content_notify_input { position: absolute; right: 100%; white-space: nowrap; background: #F2F2F2; padding: 2px 5px; border: 1px solid #999; top: -5px; display: none; margin-right: 3px; } .notify_input:hover .content_notify_input { display: block; } .fa-contact { position: absolute; left: 0px; top: 0px; } /*inner*/ .inner { max-width: 1200px; margin: 0 auto; position: relative; } /*header*/ .background { padding: 0px 10px; } #header { position: relative; margin: 0px auto; } #languages { position: absolute; top: 0px; right: 0px; } #user_header { position: absolute; right: 0px; top: 40px; } /*banner*/ #banner {height: auto;background: #000000b5;position: absolute;left: 0;width: 100%;z-index: 9999;top: 41px;} #header .vcard { width: 0px; height: 0px; text-indent: -9999px; position: absolute; } #language { position: absolute; top: 10px; right: 0px; } .logo { position: absolute; width: 180px; text-align: center; display: inline-block; height: 160px; left: 0; background: url(../images/bg_logo.png) no-repeat top center; top: 0; padding-top: 15px; transition: all 1s; } .slogan { margin-top: 7px; display: inline-block; } .logo img { height: 70px; } .hotline_top { font-size: 16px; color: #f00; padding-left: 52px; background: url(../images/icon-phone.png) 0px 0px no-repeat; position: absolute; right: 0; top: 58px; } .social_top { position: absolute; right: 0; top: 10px; } /*menu top*/ #menu { height: 30px; transition: all 1s; margin: 35px 0; } #menu ul { list-style: none; } #menu ul li { float: left; position: relative; } #menu > ul > li { padding: 0 10px; } #menu ul li a { line-height: 30px; font-size: 14px; color: #fff; display: block; font-family: 'RobotoMedium'; text-transform: uppercase; } #menu > ul > li.menu_active > a, #menu > ul > li:hover > a { border-bottom: 4px solid #91C041;color: #91C041; } #menu ul li ul { width: 250px; position: absolute; top: 100%; left: 0; display: none; z-index: 9999; } #menu ul li:hover > ul { display: block; } #menu ul li ul li { background: #91C041; display: block !important; float: none; border-bottom: 1px solid #a7d062; } #menu ul li ul li:last-child { border-bottom: none; } #menu ul li ul li a { background: none !important; color: #fff !important; line-height: normal !important; padding: 10px 25px; text-transform: capitalize; } #menu ul li ul li a:hover { color: #000 !important; } #menu ul li ul li ul { top: 0; left: 100%; } .contain_menu { position: relative; height: 51px; } .menu_fixed { position: fixed !important; width: 100% !important; left: auto !important; top: 0px !important; z-index: 300; max-width: 1349px; min-width: 1349px; } /*menu bootstrap*/ #btn_menu_bootstrap {z-index: 999;position: absolute;left: 0px;top: 10px;height: 24px;width: 30px;display: none;} #btn_menu_bootstrap span {background: #fff;content: '';display: block;width: 100%;height: 2px;position: absolute;left: 0px;top: 50%;margin-top: -1px;} #btn_menu_bootstrap:before {content: "";position: absolute;width: 100%;height: 2px;background: #fff;top: 0;left: 0;} #btn_menu_bootstrap:after {content: "";position: absolute;width: 100%;height: 2px;background: #fff;bottom: 0;left: 0;} #btn_menu_bootstrap:before, #btn_menu_bootstrap:after { transform-origin: left 1px; -webkit-transition: all 0.3s; transition: all 0.3s; } .move_btn_bootstrap:before { transform: rotate(45deg); } .move_btn_bootstrap:after { transform: rotate(-45deg); } .move_btn_bootstrap span { left: -200% !important; } /*search*/ .click_search { color: #fff; font-size: 18px; width: 30px; text-align: center; } .frm_timkiem { display: none; position: absolute; top: 85%; background: #fff; width: 300px; z-index: 999; right: 0; line-height: 30px; border: 1px solid #ccc; border-radius: 3px; overflow: hidden } #timkiem { cursor: pointer; position: relative; float: right; font-family: 'RobotoRegular';/* margin-right: 10px; */ } #timkiem input[type="text"] { outline: none; background: none; border: none; height: 30px; width: calc(100% - 40px); padding-left: 10px; color: #000; } #timkiem #btn { height: 30px; width: 40px; cursor: pointer; float: right; right: 0; top: 0; outline: none; border: none; background: #91C041; color: #fff; font-size: 17px; } /*slider*/ #slider { margin: auto; position: relative; box-shadow: none; } .contain_slider { position: relative; } /*menu left*/ .menu_left ul { background: #2a8fed; list-style: none; } .menu_left ul li { position: relative; } .menu_left ul li a { font-size: 13px; color: #fff; display: block; border-bottom: 1px solid #fff; padding: 10px; position: relative; } .menu_left ul li a:before { content: ""; width: } .menu_left ul li ul { display: none; width: 100%; background: red; } /*main*/ #container { margin-top: 20px; } #main { float: right; } .sub_main { margin-bottom: 20px; } .title_main { text-align: center; margin-bottom: 25px; border-top: 2px solid #4E4E4E; } .title_main span, .title_main h2 { color: #91C041; font-family: 'UTMHelvetIns'; display: inline-block; vertical-align: top; font-size: 25px; text-transform: uppercase; padding: 0 20px; position: relative; background: #4E4E4E; line-height: 44px; } .title_main span::before, .title_main h2::before { position: absolute; content: ""; width: 17px; height: 44px; background: url('../images/bf_title.png') no-repeat; right: 100%; top: 0; } .title_main span::after, .title_main h2::after { position: absolute; content: ""; width: 17px; height: 44px; background: url('../images/af_title.png') no-repeat; left: 100%; top: 0; } .list_product { margin-top: 20px; } /*product*/ .box_sanpham {margin-bottom: 25px;position: relative;} .img_sanpham {text-align: center;overflow: hidden;border: 1px solid #E5E5E5;padding: 5px;background: #fff;} .img_sanpham a { display: block; overflow: hidden; aspect-ratio: 4 / 3; } .img_sanpham img { transition: 0.7s; width: 100%; height: 100%; object-fit: cover; } .img_sanpham:hover img { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } .img_sanpham h2.title { text-transform: uppercase; line-height: 25px; height: 50px; overflow: hidden; font-size: 15px; font-family: 'UVNSachVo'; text-align: center; margin: 5px 0 0; } .img_sanpham h2.title a { color: #363636; } .img_sanpham h2.title:hover a { color: #91C03E; } .info_product { text-align: center; margin-top: 7px; } .box_sanpham h2 {text-transform: uppercase;line-height: 25px;height: 50px;overflow: hidden;font-size: 15px;font-family: 'UVNSachVo';text-align: center;margin-top: 5px;} .box_sanpham h2 a { color: #363636 } .box_sanpham h2:hover a { color: #91C03E } .box_sanpham p { height: 60px; overflow: hidden; font-size: 14px; line-height: 20px; font-family: 'UVNSachVo'; color: #666; text-align: center; margin: 5px 0 0; } .list_sub_img_detail { position: relative; } .prev_sub_detail, .next_sub_detail { position: absolute; width: 28px; height: 28px; background: url(../images/icon_next_prev_common_owl.png); z-index: 10; top: 50%; margin-top: -14px; } .prev_sub_detail { background-position: 0px -28px; left: 0px; } .prev_sub_detail:hover { background-position: 0px 0px; } .next_sub_detail { background-position: -28px -28px; right: 0px; } .next_sub_detail:hover { background-position: -28px 0px; } #sub_img_detail { margin-top: 5px; } .item_owl_sub { padding: 0px 2px; } .btn_like_p { cursor: pointer; } .item_product_top .img_sanpham { border: none; padding: 0; } .item_product_top .img_sanpham a::before { top: 0; left: 0; background: #000000c7 url('../images/more.png') no-repeat center; position: absolute; content: ""; width: 100%; height: 100%; z-index: 9; opacity: 0; transition: all 1s } .item_product_top:hover .img_sanpham a::before { opacity: 1; transition: all 1s } .item_product_bottom { margin-bottom: 50px; } .item_product_bottom .img_sanpham { border: none; padding: 0; } .info_product_bottom { border: 1px dashed #D7D7D7; border-top: none; padding: 0 10px 25px 10px; text-align: center; } .info_product_bottom h2 { font-size: 16px; padding: 4px; border-bottom: 1px solid #E6E6E6; line-height: 30px; text-align: center; font-family: 'UVNSachVo_B'; text-transform: uppercase; } .info_product_bottom h2 a { color: #91C041; line-height: 25px; height: 50px; overflow: hidden; display: block; } .info_product_bottom h2:hover a { color: red } .info_product_bottom span { color: #363636; display: block; margin-top: 10px; font-size: 15px; font-family: 'UVNSachVo'; line-height: 25px; height: 125px; overflow: hidden } .more_product { text-align: center; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); } .more_product a { display: inline-block; width: 120px; line-height: 40px; background: #91C041; border-radius: 50px; color: #fff; font-size: 15px; font-family: 'UVNSachVo_B'; } .more_product:hover a { color: yellow } .des_product{font-size: 14px;font-family: 'UVNSachVo';margin: 15px 0;} /*album*/ .box_album { margin-bottom: 20px; } .name_album h3 { text-transform: uppercase; font-size: 15px; margin-top: 10px; text-align: center; } .name_album h3 a { font-size: 15px; color: #0075E2; font-family: 'RobotoBold'; font-weight: normal; } /*product detail*/ .item_detail { padding: 10px 0px; border-bottom: 1px dashed #cdcdcd; } .bottom_detail { margin-top: 20px; } .img_detail { width: 45%; float: left; } .info_detail { width: 55%; float: left; padding-left: 30px; box-sizing: border-box; } .item_info_detail { font-size: 15px; line-height: 20px; font-family: 'RobotoRegular'; padding: 5px 0px; border-bottom: 1px solid #eee; } .item_info_detail.name_detail { font-size: 22px; color: #d00; font-family: 'RobotoBlack'; line-height: 25px; } .item_info_detail.gia_detail span { font-size: 18px; color: #f00; } /*tab*/ .item_tab { display: inline-block; padding: 10px 14px 10px 10px; color: #000; font-weight: bold; border-bottom: 4px solid #fff; border-top: 4px solid rgb(245, 245, 245); background-color: rgb(245, 245, 245); font-size: 12px; text-transform: capitalize; border-left: 1px solid rgb(245, 245, 245); border-right: 1px solid rgb(245, 245, 245); position: relative; } .item_tab:hover, .item_tab.active { background: #fff;border-top: 4px solid #5AB1D0; border-left: 1px solid #5AB1D0; border-right: 1px solid #5AB1D0; bottom: -2px; } .contain_content_tab { padding: 10px 10px; text-align: justify; line-height: 22px; font-size: 13px; border: 1px solid #c1c1c1; border-top-color: #5AB1D0; } .content_tab { display: none; } .content_tab.active { display: block; } /*news*/ h1.tieude { font-size: 25px; margin-bottom: 10px; } .box-km { border: 1px solid #EBEBEB; transition: all 0.3s ease; background: #fff; padding: 7px; box-shadow: 4px 4px 8px #ccc; } .box-km .img { padding-left: 0px !important; padding-right: 0px !important; } .box-km .img { transform: translateZ(0); overflow: hidden; position: relative; border: 3px solid #fff; aspect-ratio: 4 / 3; } .box-km .img img { width: 100%; height: 100%; object-fit: cover; transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .box-km .img:hover img { transform: scale(1.2); } .box-km .mota { padding: 5px 10px !important; } .box-km .mota h3 { font-size: 18px; margin: 0px; line-height: 20px; text-align: left; height: 43px; overflow: hidden; } .box-km .mota h3 a { font-family: 'RobotoBlack'; color: #000; } .box-km .mota h3 a:hover { color: #f00; } .box-km .mota p { font-size: 14px; line-height: 20px; height: 80px; text-align: justify; margin: 0px; margin-top: 10px; overflow: hidden; } .item_news { margin-bottom: 20px } .item_news:nth-child(2n+3) { clear: both; } /*news other*/ .title_news_other { font-size: 18px; color: #222; margin: 15px 0px; } .item_news_other { padding: 10px 0px; border-bottom: 1px dashed #e8e8e8; } .name_news_other a { font-size: 13px; line-height: 20px; color: #3b3b3b; } .name_news_other a:hover { color: #1f7ebd; } .name_news_other .fa { margin-right: 5px; } .name_news_other:hover { color: #f00; } .img_news_other { width: 40%; float: left; padding-right: 10px; box-sizing: border-box; } .img_news_other img { float: left; } .right_news_other { width: 60%; float: right; } /*doitac*/ #doitac { padding: 25px 0px; } .item_doitac { } .item_doitac img { border: 1px solid #cdcdcd; } .contain_owl_doitac { position: relative; padding: 0px 25px; } .button_doitac { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-block; } .next_doitac {position: absolute;right: 0px;top: 50%;z-index: 8;transform: translateY(-50%);} .prev_doitac {position: absolute;left: 0px;top: 50%;z-index: 8;transform: translateY(-50%);} .next_product { position: absolute; bottom: 0px; right: calc(50% - 80px); z-index: 100; } .prev_product { position: absolute; bottom: 0px; left: calc(50% - 80px); z-index: 100; } /*footer*/ #footer { padding: 35px 0px; margin: 0px auto; background: #91C03E; } .name_footer { font-family: 'UTMSwiss721BlackCondensed'; font-size: 20px; color: #fcff00; font-weight: normal; } .newsletter { padding: 25px 0; background: #F40000; } .title_newsletter { background: url('../images/newsletter.png') no-repeat left center; padding-left: 65px; } .title_newsletter h2 { color: #fff; font-size: 18px; font-family: 'RobotoBlack'; margin-bottom: 5px; } .title_newsletter span { color: #fff; font-family: 'RobotoRegular'; font-size: 13px; } .dangkymail { margin-top: 10px; } .social_footer { font-size: 14px; font-family: 'RobotoRegular'; color: #FFFFFF; margin-top: 10px; } .title_ft {color: #fff;font-size: 15px;font-family: 'RobotoBold';margin-bottom: 20px;text-transform: uppercase;position: relative;padding-bottom: 10px;} .title_ft::before{position: absolute;left: 0;bottom: 0;content: "";width: 40px;height: 3px;background: #fff;} .content_footer {color: #fff;margin-bottom: 15px;font-size: 15px;font-family: 'UVNSachVo';} .mid_footer li { list-style: none; line-height: 20px; margin-bottom: 5px; font-size: 14px; font-family: 'RobotoRegular'; } .mid_footer li a { color: #fff; } .mid_footer li:hover a { color: yellow } .maps_ft iframe { width: 100%; height: 200px; overflow: hidden } .footer_end {line-height: 35px;background: #91C041;text-align: left;font-family: 'RobotoRegular';font-size: 14px;padding: 10px 0;color: #fff;} .footer_end .inner{border-top: 1px solid #99CC44} .footer_end span {text-transform: uppercase} #google_language_translator { display: inline-block; line-height: 35px; height: 35px; overflow: hidden; float: right; } .social_header { display: inline-block; float: right; margin-left: 10px; } .goog-te-combo { line-height: 25px; border-radius: 5px; height: 30px; } .goog-te-banner-frame { display: none } /*thong ke*/ .list_thongke { margin: 0px auto; list-style: none; } .list_thongke li {float: left;margin-right: 15px;} /*pagination*/ .paging, .pagination { text-align: center; display: block; margin: 0px; clear: both; } .my_pagination { display: inline-block; padding-left: 0; margin: 10px 0; border-radius: 4px; clear: both; } .my_pagination>li { display: inline; cursor: pointer; } .my_pagination>li:first-child>a, .my_pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .my_pagination>li:last-child>a, .my_pagination>li:last-child>span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .my_pagination>li.actived a { background: #eee; } .my_pagination>li>a, .my_pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; display: block; } .my_pagination>li>a:focus, .my_pagination>li>a:hover, .my_pagination>li>span:focus, .my_pagination>li>span:hover { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd; } .my_pagination>li>a:focus, .my_pagination>li>a:hover, .my_pagination>li>span:focus, .my_pagination>li>span:hover, .my_pagination>li>a.current { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd; } /* newsletter */ .dangkymail{text-align: center} .item_input{position: relative} .item_input input{line-height: 40px;background: #fff;border: none;outline: none;margin-bottom: 10px;width: 100%;padding: 0 50px 0 10px;color: #363636;font-family: 'UVNSachVo';} .item_input i{background: #FF8A00;width: 40px;height: 40px;text-align: center;line-height: 40px;position: absolute;right: 0;top: 0;color: #fff;font-size: 18px;} .item_input input::-webkit-input-placeholder { color: #000; } .item_input input::-moz-placeholder { color: #000; } .item_input input:-ms-input-placeholder { color: #000; } .item_input input:-moz-placeholder { color: #000; } .dangkymail button{width: 130px;line-height: 40px;border: none;outline: none;background: #FF8A00;font-size: 13px;font-family: 'UVNSachVo_B';margin: 0 auto;color: #fff;text-transform: uppercase;border-radius: 5px;} .dangkymail button:hover{color: yellow} .social_footer{font-size: 15px;font-family: 'RobotoBold';} .social_footer a{margin-left: 5px;} /*video*/ .box_video { max-width: 250px; margin: 5px auto; position: relative; } #list_video { width: 100%; height: 25px; line-height: 25px; } /*video owl*/ #sub_video_owl { position: relative; } .item_video { cursor: pointer; } .next_video, .prev_video { position: absolute; top: 50%; width: 22px; height: 42px; z-index: 100; margin-top: -21px; } .next_video { position: absolute; right: 0px; background: url(../images/next.png); } .prev_video { position: absolute; left: 0px; background: url(../images/prev.png); } /*social sharethis*/ #share_social * { vertical-align: top; } #share_social span { margin-top: 0px !important; margin-bottom: 3px !important; } .stButton .stButton_gradient, .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices { height: 21px !important; box-sizing: border-box; vertical-align: top !important; } /*gioithieu*/ .about_index { padding: 30px 0; background: url(../images/bg_about.png) no-repeat left 20px center; } .title_about { font-size: 25px; font-family: 'UTMHelvetIns'; color: #91C041; text-transform: uppercase; background: url(../images/title_about.png) no-repeat bottom left; padding-bottom: 10px; margin-bottom: 20px; } .des_about { color: #000000; font-size: 20px; font-family: 'RobotoRegular'; position: relative; padding-bottom: 15px; margin-bottom: 25px; } .des_about::before { content: ""; position: absolute; width: 90px; height: 3px; background: #C2C2C2; bottom: 0; left: 0; } .content_about { color: #515151; line-height: 23px; font-size: 15px; font-family: 'UVNSachVo'; } .more_about a { display: inline-block; width: 110px; line-height: 45px; text-align: center; color: #363636; border: 1px solid #363636; font-family: 'RobotoRegular'; font-size: 14px; text-transform: capitalize; margin: 15px 0; } .more_about a:hover { color: #fff; background: #91C041; border-color: #91C041; } .tt_about { color: #363636; font-size: 15px; text-transform: uppercase; font-family: 'RobotoRegular'; } .date_about { color: #BDBDBD; font-size: 13px; font-family: 'RobotoRegular'; margin: 7px 0 10px; } .about_right { margin-top: 45px; } .about_right a { display: inline-block; position: relative; z-index: 0; } .about_right a::before { position: absolute; content: ""; width: 515px; height: 360px; border: 5px solid #E6E6E6; top: -47px; right: -49px; z-index: -1; } /*---------------------Goi dien -----------------------*/ #my_call { width: 100%; background: red; position: fixed; width: 100%; bottom: 0px; left: 0px; text-align: center; z-index: 999; display: none; } #my_call div { display: inline-block; line-height: 30px; margin: 0px 10px; } #my_call div a { padding-left: 30px; display: block; background-size: 25px; background-position: left center; background-repeat: no-repeat; font-family: 'Arial'; text-decoration: none; color: #fff; font-size: 13px; } #my_call div.phone_my_call { opacity: 0; } #my_call div.phone_my_call a { background-image: url(../images/commont/icon_dt.png); } #my_call div.sms_my_call a { background-image: url(../images/commont/tn.png) } #my_call div.sig_my_call a { background-image: url(../images/commont/chiduong.png) } .op_phone { -webkit-animation-name: op_phone; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: op_phone; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: op_phone; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } @-moz-keyframes op_phone { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes op_phone { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes op_phone { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } /*---------------------END Goi dien ------------------*/ #at4-share { display: none; } .btn_dangnhap { display: inline-block; text-align: left; } .btn_dangky { display: inline-block; text-align: left; margin-left: 20px; margin-right: 15px; } .banner_top { line-height: 41px; background: #FFFFFF; color: #fff; font-size: 14px; font-family: 'RobotoRegular'; } .banner_top li { list-style: none; display: inline-block; color: #363636; font-size: 15px; font-family: 'RobotoMedium'; } .banner_top li i { margin-right: 8px; color: #91C041 } .banner_top li marquee { float: left; color: #91C041; font-size: 17px; /*text-transform: uppercase*/ } .btn_dangnhap a { color: #fff; font-size: 15px; font-family: 'RobotoRegular'; cursor: pointer; } .btn_dangnhap a:hover { color: #FFB400; } .btn_dangky a { color: #fff; font-size: 15px; font-family: 'RobotoRegular'; cursor: pointer; } .btn_dangky a:hover { color: #FFB400; } .body_form { padding: 10px 0px; } #rematkhau { padding: 20px 0px; } .btn_guiemail { background: #9F7828; font-size: 14px; color: #fff; border: none; outline: none; padding: 7px 20px; float: right; border-radius: 5px; } .btn_guiemail:hover { background: #f00; color: #fff; } .user { position: relative; cursor: pointer; color: #fff; display: inline-block; } .user:hover { color: #ff0; } .user .fa { margin-right: 10px; } .content_taikhoan { position: absolute; top: calc(100% + 10px); right: 0px; width: 179px; padding: 10px; border: 1px solid #F2F2F2; z-index: 1000; background: #fff; display: none; text-align: left; } .content_taikhoan a { display: block; padding: 5px 0px; color: #353434; } .content_taikhoan a:hover { color: #f00; } .title_lichsu { background: #9F7828; color: #fff; padding: 10px; font-family: 'RobotoRegular'; font-size: 15px; display: flex; justify-content: space-between; } .bottom { padding: 40px 10px; } .left_bottom { width: 62%; float: left; } .right_bottom { width: 35.5%; float: right; } .title_bottom span { color: #000000; font-size: 24px; text-transform: uppercase; background: #fff; padding-right: 10px; font-family: 'UTMImpact'; } .left_tintuc_bottom { width: 46.9%; float: left; } .right_tintuc_bottom { width: 50.5%; float: right; } .left_tintuc_bottom h3 { font-size: 17px; padding: 12px 0px 0px; } .left_tintuc_bottom h3 a { color: #000000; font-size: 15px; font-family: 'RobotoBold'; text-transform: uppercase; line-height: 25px; height: 25px; overflow: hidden; display: block; } .left_tintuc_bottom h3:hover a { color: red } .left_tintuc_bottom p { margin-bottom: 0px; color: #5F5F5F; font-family: 'RobotoRegular'; text-align: justify; line-height: 20px; font-size: 13.5px; height: 60px; overflow: hidden; } .xemthem_tt { color: #fff; width: 110px; line-height: 34px; background: #CD0900; text-transform: uppercase; text-align: center; display: inline-block; margin-top: 10px; font-family: 'RobotoBlack'; } .xemthem_tt:hover { color: #fff; background: #385B98; } .map_footer iframe { width: 100% !important; } .contain_map_lienhe iframe { width: 100% !important; } /* ===== BREADCRUMB OVERRIDE ===== */ /* Đổi separator Bootstrap từ "/" thành "›" */ .breadcrumb > li + li:before { content: "›\00a0"; color: #aaa; font-size: 15px; } .breadcrumb { background: #f8f8f8; border-radius: 3px; padding: 8px 14px; margin-bottom: 16px; font-size: 13px; } .breadcrumb-item a { color: #555; font-family: 'RobotoRegular'; font-size: 13px; text-decoration: none; } .breadcrumb-item a:hover { color: #91C041; text-decoration: none; } .breadcrumb-item.active, .breadcrumb-item.item-current { color: #91C041; font-weight: 600; } .breadcrumb-item.item-current a { color: #91C041; } /* ================================ */ .product_top { padding: 35px 0; } .box_product_top { position: relative; } .box_product_main { padding: 10px 0 } .inf_center_left{text-align: left;padding: 5px 0;} .inf_center_left h2{font-family: 'UVNSachVo_B';font-size: 16px;line-height: 25px;height: 25px;overflow: hidden} .inf_center_left h2 a{color: #91C041} .inf_center_left h2:hover a{color: red} .inf_center_left span{color: #363636;line-height: 25px;font-size: 15px;font-family: 'UVNSachVo';height: 75px;overflow: hidden;display: block} .info_center{text-align: center;padding: 5px 0;} .info_center h2{font-family: 'UVNSachVo_B';font-size: 16px;line-height: 25px;height: 25px;overflow: hidden} .info_center h2 a{color: #91C041} .info_center h2:hover a{color: red} .info_center span{color: #363636;line-height: 25px;font-size: 15px;font-family: 'UVNSachVo';height: 100px;overflow: hidden;display: block} .more_project{margin-top: 15px;text-align: center;} .more_project a{display: inline-block;width: 100px;line-height: 40px;background: #91C041;border-radius: 5px;color: #fff;font-size: 15px;font-family: 'UVNSachVo';text-transform: capitalize} .more_project a:hover{color: yellow} /* --jpage-- */ .pagging { margin: 0 auto; text-align: center; margin: 15px 0; } .pagging a { font-size: 12px; cursor: pointer; margin: 0 1px; color: #333; color: #808080; background-color: #fff; border: 1px solid #DD131B; padding: 7px 12px; border-radius: 5px; } .pagging a:hover { background-color: #DD131B; color: #fff; } .pagging a.jp-previous { margin-right: 0px; padding: 7px 3px; border: 1px solid #ddd } .pagging a.jp-next { margin-left: 0px; padding: 7px 7px; border: 1px solid #DD131B; } .pagging a.jp-current, a.jp-current:hover { color: #FF4242; font-weight: bold } .pagging a.jp-disabled, a.jp-disabled:hover { color: #bbb } .pagging a.jp-current, a.jp-current:hover { cursor: default; background: #DD131B; color: #fff; } .pagging a.jp-disabled, a.jp-disabled:hover { cursor: default; background: none; color: #808080; display: none; } .pagging span { margin: 0 5px } ul.tab_end { padding: 0; text-align: center; width: 100%; margin-bottom: 20px; } ul.tab_end li {display: inline-block;position: relative;height: 40px;line-height: 40px;margin: 2px;} ul.tab_end li a {display: block;color: #5B200D;text-align: center;line-height: 40px;font-size: 15px;padding: 0 15px;font-family: 'UVNSachVo';text-transform: capitalize;} ul.tab_end li a.selected, ul.tab_end li a:hover {position: relative;color: #91C041;} ul.tab_end li a.selected::before, ul.tab_end li a:hover::before{position: absolute;content: "";width: 30px;height: 19px;left: 0;top: 0;background: url('../images/bg_tab.png') no-repeat ;} ul.tab_end li a.selected::after, ul.tab_end li a:hover::after{position: absolute;content: "";width: 30px;height: 19px;right: 0;bottom: 0;background: url('../images/bg_tab.png') no-repeat ;transform: rotate(180deg)} ul.tab_end li a span { display: block; } .tab_hide { position: absolute !important; z-index: -1; opacity: 0; } .tab_show { position: relative !important; z-index: 999; opacity: 1; } .tags_ft{margin-top: 15px;} .title_tags{color: #fff;text-transform: uppercase;font-size: 15px;font-family: 'RobotoBold';float: left;width: 120px;line-height: 35px;} .tags_ft ul{float: left;width: calc(100% - 120px);line-height: 35px;} .tags_ft ul li{float: left;list-style: none;line-height: 35px;margin-right: 10px;margin-bottom: 5px;padding: 0 10px;background: #FFFFFF;border-radius: 5px;font-size: 14px;font-family: 'RobotoRegular';text-transform: uppercase} .tags_ft ul li a{color: #363636} .tags_ft ul li a:hover{color: red} .tags_info{margin: 15px 0 25px;} .title_tag{color: #91C03E;text-transform: uppercase;font-size: 15px;font-family: 'RobotoBold';line-height: 35px;} .tags_info ul{display: block;clear: both} .tags_info ul li{float: left;list-style: none;margin-right: 10px;margin-bottom: 5px;padding: 0 10px;background: #91C03E;border-radius: 5px;font-size: 13px;font-family: 'RobotoRegular';text-transform: uppercase;line-height: 30px;} .tags_info ul li a{color: #fff} .tags_info ul li a:hover{color: yellow} .title_product{color: #91C03E;font-family: 'RobotoBold';text-transform: uppercase;font-size: 20px;margin-bottom: 20px;} .main_right{width: 280px;float: right;margin-left: 10px;} .main_left{float: left;width: calc(100% - 300px);} .sub_left{margin-bottom:20px;} .title_left{height: 40px;border: 1px solid #91c03e;background: url(../images/title_left.png) no-repeat left 14px center;} .title_left span{font-size: 20px;color: #91c03e;font-weight:normal;text-transform: capitalize;line-height: 40px;display: block;font-family: 'UVNSachVo_B';padding-left: 50px;} .content_left {border: 1px solid #91c03e;border-top: none;padding: 10px;} .img_home img{width: 100%} #gallery {margin-bottom: 20px } .box_album_list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .boxsanpham_name { text-align: center } .boxsanpham_name a { color: #000; font-family: 'UVNSachVo'; font-size: 18px; text-transform: capitalize; } .box_album_img { overflow: hidden; } .box_album_img img { transition: all ease 0.6s; } .box_album_item:hover .boxsanpham_name a { color: #f2d56f; } .box_album_item:hover .box_album_img img { opacity: 0.8; transform: scale(1.05); } .ug-textpanel-textwrapper { display: none !important } .js-facebook-messenger-container { z-index: -1; } div.t_nbt > a { display: block; position: relative; width: 100%; overflow: hidden; font-family: UVNSachVo; text-decoration: none; color: #fff; } div.t_nbt > a p {position: absolute;bottom: 0;font-family: 'RobotoRegular';padding: 10px;font-size: 16px;background: rgba(0, 0, 0, 0.6);width: 100%;margin-bottom: 0;} div.title_pp {font-family: 'UVNSachVo_B';font-size: 22px;text-transform: capitalize;padding: 3px 0px;border-bottom: 1px solid #91c03e;color: #91c03e;margin-bottom: 15px;} div.title_pp h2, div.title_pp h3, div.title_pp h4 { line-height: normal; font-size: inherit; } .title_pp a{color: #000;} .title_pp a:hover{color: #811518;} div.bx_tintuc { margin-bottom: 15px; } div.bx_tintuc > a { float: left; width: 30%; position: relative; } div.bx_tintuc > a:after { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; transition: all .5s ease-in-out; } div.bx_tintuc > a:before { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; transition: all .5s ease-in-out; } div.bx_tintuc > a:hover:before { right: 50%; left: 50%; background-color: rgba(255, 255, 255, .5); } div.bx_tintuc > a:hover:after { top: 50%; background-color: rgba(255, 255, 255, .5); bottom: 50%; } div.bx_tintuc > a img {max-width: 100%;} div.bx_tintuc .info_tti { float: right; width: 70%; padding-left: 12px; } div.bx_tintuc .info_tti p a {text-decoration: none;font-family: 'RobotoRegular';color: #91c03e;font-size: 15px;display: inline-block;margin-top: 10px;} div.bx_tintuc .info_tti h4 {line-height: normal;font-size: inherit;margin: 0;} div.bx_tintuc .info_tti h4 a {font-family: 'UVNSachVo_B';color: #333;text-decoration: none;display: block;margin-bottom: 6px;font-size: 16px;line-height: 25px;height: 25px;overflow: hidden;} div.bx_tintuc .info_tti h4 a:hover { color: #ea993d; } div.bx_tintuc .info_tti div {font-family: 'RobotoRegular';font-size: 14px;color: #999;line-height: 25px;height: 75px;overflow: hidden;} div.slicl_tt_r_th * { outline: none !important } div.slicl_tt_r_th p { padding: 5px; padding-bottom: 0; } div.slicl_tt_r_th p a { display: block; width: 100%; position: relative; border: 1px solid #dfdfdf; } div.bx_i_pr { font-family: OpenSansRegular; border: 1px solid #ecebeb; margin-bottom: 14px; padding: 3px; } div.bx_i_pr > a { width: 35%; float: left; position: relative; text-align: center; } div.block-sale { width: 40px; height: 40px; position: absolute; z-index: 9; font-size: 11px; color: #fff; line-height: 39px; text-align: center; font-family: UVNSachVo; right: 9px; top: 4px; } div.block-sale span { width: 40px; height: 40px; background: url(images/slae.png) no-repeat; display: block; background-size: 100% 100%; } div.bx_i_pr > a img { max-width: 98px !important; } div.detail_pr { width: 64%; float: right; padding-left: 10px; } div.detail_pr h3 { font-size: inherit; line-height: normal; } div.detail_pr h3 a { font-size: 14px; color: #666; display: inline-block; line-height: 1.5; text-decoration: none; height: 40px; overflow: hidden; } div.detail_pr h3 a:hover { color: #db0000; } div.detail_pr .other { margin-top: 2px; } div.detail_pr .other span { font-size: 14px; color: #999; display: block; } div.detail_pr .other .old-price { text-decoration: line-through; } div.detail_pr .other .new-price { font-family: UVNSachVo; color: #ea993d; } div.item_tt .detail {width: 60%;float: right;padding-left: 11px;font-family: 'RobotoRegular';} div.item_tt .detail p.time {font-size: 14px;color: #999;margin-bottom: 5px;} div.item_tt .detail p.time i { margin-right: 3px; } div.item_tt .detail h3.title { line-height: normal; font-size: inherit; } div.item_tt .detail h3.title a {text-decoration: none;color: #333;font-size: 15px;display: block;margin: 5px 0px;height: 44px;overflow: hidden;font-family: 'RobotoBlack';line-height: 20px;} div.item_tt .detail h3.title a:hover { color: #ea993d; } div.item_tt .detail .count { font-size: 14px;font-family: 'RobotoRegular' } div.item_tt .detail .count i{margin-right: 5px;} div.col-ndl { max-height: 375px; overflow-y: scroll; } div.col-ndl::-webkit-scrollbar { background: #fff; width: 3px; height: 11px } div.col-ndl::-webkit-scrollbar-thumb { background: #BBBBBB } div.item_tt { margin-bottom: 15px; } div.item_tt .box-img { width: 40%; float: left; } div.item_tt .box-img img{max-width: 100%} div.item_tt .box-img a { display: block; position: relative; width: 100%; } div.item_tt .box-img a:after { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; transition: all .5s ease-in-out; } div.item_tt .box-img a:before { position: absolute; content: ""; top: 0; left: 0; bottom: 0; right: 0; transition: all .5s ease-in-out; } div.item_tt .box-img a:hover:before { right: 50%; left: 50%; background-color: rgba(255, 255, 255, .5); } div.item_tt .box-img a:hover:after { top: 50%; background-color: rgba(255, 255, 255, .5); bottom: 50%; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999 } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #03A84E; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001 } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #00EC40; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #91C03E; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #fff; z-index: 1000; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } #loader-wrapper .loader-section.section-left { left: 0 ;-webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) } #loader-wrapper .loader-section.section-right { right: 0 ; -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) } .loading-logo { position: absolute; z-index: 9999; display: inline-block; width: 80px; height: 57px; left: calc(50% - 40px); top: calc(50% - 57px/2); } .loaded .loading-logo { opacity: 0; } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all .7s .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) } .loaded #loader { opacity: 0; -webkit-transition: all .3s ease-out; transition: all .3s ease-out } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all .3s 1s ease-out; transition: all .3s 1s ease-out } /* Form liên hệ */ .form-lien-he .row-form .right{padding-left:7px; width:50%; display:inline-block} .form-lien-he .row-form .left{padding-right:7px; width:50%; display:inline-block} .form-lien-he .row-form{display:inline-block; width:100%; clear:both} .form-lien-he{box-shadow: 2px 2px 10px #d6d6d6; padding: 20px;} .wpcf7-form-control.wpcf7-textarea {margin-top: 10px; width: 100%; height: 220px;} .wpcf7-form-control.wpcf7-submit.has-spinner {padding: 5px 5px 5px 5px;} .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {margin-top: 10px;} .form-lien-he input[type='email'], input[type='search'], input[type='number'], input[type='url'], input[type='tel'], input[type='text'], textarea, input[type='submit']{border-radius:4px; box-shadow:none; padding-left: 5px;} /*load-more*/ .load-more { display: flex; align-items: center; justify-content: center; font-size: 14px; width: 180px; height: 52px; text-transform: uppercase; background-color: red ;/*var(--dark-color)*/ color: #ffdd00 var(--white-color); margin: 0 auto; border-radius: 30px; transition: all .3s ease-out; } .load-more:hover { background-color: #000000 var(--light-color); color: inherit; } .content_main .item_news:nth-child(12) { display: none; } /*loader*/ .loading { display: none; height: 32px; width: 32px; margin: 0 auto; animation: loader1 3s linear infinite; } @keyframes loader1 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .loading span { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 32px; height: 32px; clip: rect(16px, 32px, 32px, 0); animation: loader2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @keyframes loader2 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .loading span::before { content:''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 32px; height: 32px; border: 3px solid transparent; border-top: 3px solid var(--white-color); border-radius: 50%; animation: loader3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite; } @keyframes loader3 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .loading span::after { content:''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 32px; height: 32px; border: 3px solid var(--primary-color); border-radius: 50%; } .load-more.show-loader { width: 52px; background-color: var(--light-color); text-indent: -9999px; } .load-more.show-loader.loading { display: block; } .load-more.loaded { visibility: hidden; opacity: 0; height: 0; transition: visibility 3s 3s, opacity 3s 3s, height 3s 3s; text-indent:-9999px; } /* Gallery Container */ .gallery-container { max-width: 100%; margin: 0 auto; background: #000; position: relative; } .gallery-main { position: relative; aspect-ratio: 16/9; background: #000; } .gallery-counter { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.5); color: white; padding: 5px 10px; border-radius: 3px; z-index: 2; } .gallery-slide { width: 100%; height: 100%; position: relative; } .slide { position: absolute; width: 100%; height: 100%; display: none; } .slide.active { display: block; } .slide img { width: 100%; height: 100%; object-fit: contain; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 20px 15px; cursor: pointer; z-index: 2; font-size: 24px; transition: background 0.3s; } .gallery-nav:hover { background: rgba(0, 0, 0, 0.8); } .prev-slide { left: 0; } .next-slide { right: 0; } .gallery-thumbnails { position: relative; background: #e0e0e0; padding: 10px 40px; display: flex; align-items: center; } .thumbnail-container { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; gap: 5px; } .thumbnail-container::-webkit-scrollbar { display: none; } .thumbnail { flex: 0 0 auto; width: 100px; height: 60px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; } .thumbnail.active { opacity: 1; border: 2px solid #fff; } .thumbnail img { width: 100%; height: 100%; object-fit: cover; } .thumbnail-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 2; } .thumbnail-nav.prev { left: 0; } .thumbnail-nav.next { right: 0; } @media (max-width: 768px) { .gallery-nav { padding: 15px 10px; font-size: 20px; } .thumbnail { width: 80px; height: 50px; } } /* ===== Load More Button ===== */ .btn-load-more { display: inline-block; padding: 10px 30px; background: #91C041; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-family: 'RobotoRegular', sans-serif; font-weight: 600; cursor: pointer; margin: 20px auto; transition: background .2s, transform .1s; } .btn-load-more:hover { background: #7aaa30; transform: translateY(-1px); } .btn-load-more:active { transform: translateY(0); } .btn-load-more:disabled { background: #ccc; cursor: not-allowed; transform: none; } .btn-load-more .fa { margin-left: 6px; } #lsk-load-more-wrap { text-align: center; padding: 10px 0 20px; width: 100%; clear: both; } .no-posts { padding: 20px; color: #888; text-align: center; width: 100%; } /* ===== Breadcrumb override (Bootstrap 3 separator fix) ===== */ .breadcrumb > li + li:before { content: "\203A\00a0"; color: #aaa; font-size: 15px; } .breadcrumb { background: #f8f8f8; border-radius: 3px; padding: 8px 14px; margin-bottom: 16px; font-size: 13px; } .breadcrumb-item a, .breadcrumb li a { color: #555; font-family: 'RobotoRegular', sans-serif; font-size: 13px; text-decoration: none; } .breadcrumb-item a:hover, .breadcrumb li a:hover { color: #91C041; text-decoration: none; } .breadcrumb-item.active, .breadcrumb li.item-current { color: #91C041; font-weight: 600; } /* ===== Search form in menu ===== */ #timkiem { position: relative; display: inline-block; } .frm_timkiem { display: none; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 6px; z-index: 9999; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.12); } .frm_timkiem .input { border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; font-size: 13px; width: 200px; outline: none; } .frm_timkiem .nut_tim { background: #91C041; color: #fff; border: none; padding: 7px 12px; border-radius: 3px; cursor: pointer; margin-left: 4px; } .frm_timkiem .nut_tim:hover { background: #7aaa30; }