/*
https: //getbootstrap.com/docs/5.0/layout/grid/

xxs <  320px - add by Rove : D
xs  <  576px
sm  ≥  576px
md  ≥  768px
lg  ≥  992px
xl  ≥ 1200px
xxl ≥ 1400px

--- z-index values ---

bootstrap modal 1050
popup_crop_photo 1047
magnific-popup 1046

logo 902
menu + toggler 901

racer 801-889
racing 800

autocomplete-suggestions 700
reception 101
rocket 100

header -1

list_product product_frame 2
list_product image 1
sky-form 1

main color: #0099ff;
*/

html, body { height: 100%; width: 100%; }
body { font-size: 13px; line-height: 25px; font-family: Roboto; }

h4 { font-size: 18px; line-height: 28px; }
h5 { font-size: 15px; line-height: 25px; }

.rf_id { letter-spacing: 0.66px; }
a { color: #0099ff; text-decoration: none; }
a:hover, a:focus { color: orange !important; text-decoration: none; }
a.active { color: gold !important; }
#menu a, #menu-mobile a, #footer a { color: white; }

.logo { position: fixed; left: 15px; top: 15px; z-index: 902; border-radius: 35px; }

header { position: fixed; z-index: -1; width: 100vw; height: 100vh; overflow: hidden; }
.header_padding { padding-top: 75vh; }
#page_home .header_padding { padding-top: 100vh; }
    #page_register .header_padding { padding-top: 300px; }
    #page_dump_data .header_padding { padding-top: 100px; }
    #page_dump_data #menu { background: rgba(0, 0, 0, 0.6); }
    #page_game .header_padding { padding-top: 150px; }

#racing_road { position: fixed; width: 100%; height: 50px; top: 0; z-index: 800; overflow: hidden; background: rgba(0, 0, 0, 0.6); }
	#racing_road img { position: absolute; bottom: 0px; }

#page_profile #menu { background: rgba(0, 0, 0, 0.6); } /* because racing will not display on profile page */
#page_profile #racing_road { background: url("../vid/racing.jpg") center 63%; background-size: cover; }
#page_profile .header_padding { display: none; }

#reception { position: fixed; z-index: 101; height: 15vh; left: 0px; bottom: 0px; cursor: pointer; }
    .bttAdmin { width: 31% !important; padding: 0px !important; }
    .bttStyle { display: inline-block; opacity: 0.93; padding: 0 7px; height: 25px; background-color: #0d6efd; color: white; text-align: center; border: transparent; border-radius: 5px; transition: all 0.33s ease; cursor: pointer; }
        .bttStyle.red { background-color: red; }
        .bttStyle.grey { background-color: grey; }
        .bttStyle.green { background-color: green; }
    .bttStyle:hover { opacity: 1; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25); }
    span.bttStyle { display: inline-block; }
    span.bttGrey { background-color: grey !important; }
#rocket { position: fixed; z-index: 100; height: 100px; right: -30px; bottom: -2px; cursor: pointer; }

input[type=text], select { outline: none; transition: none !important; }

.list_product .group_product_title { text-align: center; font-size: 18px; line-height: 28px; }
.list_product .one_product { padding: 7px 7px 3px 7px; margin-bottom: 30px; position: relative; }
    .product_header, .product_footer { position: relative; height: 20px; line-height: 20px; font-size: 11px; color: white; font-family: Lato; }
        .product_header label { height: 20px; }
        .product_header label.left { position: absolute; left: 5px; top: 0; }
        .product_header label.right { position: absolute; right: 5px; top: 0; }
    .product_footer { background: rgba(0, 0, 0, 0.7); }
        .product_footer label.left { position: absolute; left: 5px; top: 0; }
        .product_footer .icon { position: absolute; bottom: 3px; max-height: 14px; }
        .product_footer .pos1 { right: 3px; }
        .product_footer .pos2 { right: 20px; }
        .product_footer .pos3 { right: 37px; }
        .product_footer .pos4 { right: 54px; }
        .product_footer .pos5 { right: 71px; }
        .product_footer .pos6 { right: 88px; }

.list_product .product_frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; box-shadow: inset 1px 1px 5px rgba(0,0,0,0.33); }
.list_product .product_img { position: relative; overflow: hidden; text-align: center; padding-top: 150%; background: rgba(0, 0, 0, 0.6); } /* height: auto; } /* 2:3 Aspect Ratio */
    .list_product .product_img a img.calculate { position: absolute; z-index: 1; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); transition: all 0.33s; }
    .list_product .product_img a div:hover + img.calculate { transform: translate(-50%, -50%) scale(1.3); }

    .list_product .product_info > div { width: 100%; height: 22px; font-size: 12px; overflow: hidden; }
	.list_product .col-md-9 .row:first-of-type { padding: 0 15px; }

	.list_item .shadow_block { padding: 4px; }
	.item_status { position: relative; padding-left: 20px; }
    .item_status > i { position: absolute; left: 0; }
        .item_status_style { color: #0099ff; }
        .item_status_style.status-in-line { color: red; padding-left: 2px; padding-right: 2px; }
        .item_status_style.status { color: red; }
        .item_status_style.number { letter-spacing: 0.5px; }
        .item_status_style.desc { color: grey; font-size: 11px; }
        .item_status_style.desc:last-of-type { position: absolute; right: 0; top: 1px; }

    .item_info > div { position: relative; }
        .item_info > div > label { color: #777; font-weight: 100; margin-bottom: 0px; }
    
    .table_community { width: 100%; border-collapse: collapse; }
            .table_community td { border: 1px solid rgba(33, 37, 41, 0.15); padding: 2px 5px; min-width: 30px; text-align: right; }

    .photo { display: inline-block; padding: 4px !important; margin-bottom: 20px; margin-right: 20px; }
        .photo img { height: 75px; }

    .item_video { position: relative; display: inline-block; padding: 4px !important; margin-bottom: 20px; margin-right: 20px; }
        .item_video img { height: 100px; }

    .product_video { position: relative; display: inline-block; padding: 0px !important; margin-bottom: 4px; }
        .product_video img { width: 100%; }

    .big_image { width: 100%; margin: 0 0 20px 0; }
        .big_image img { width: 100%; height: auto; max-height: 100%; }
    
    #popup_crop_photo { position: fixed; z-index: 1047; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(11, 11, 11, 0.8); }
    /* overright library crop */
    .rcrop-handler-border, .rcrop-handler-corner { width: 8px !important; height: 8px !important; }
    .clayfy-handler.clayfy-top.left, .clayfy-handler.clayfy-top.right, .clayfy-handler.clayfy-bottom.left, .clayfy-handler.clayfy-bottom.right { z-index: 1002; }

    
/* Admin Block */
#footer { background-color: rgba(0, 0,0, 0.6); padding: 10px 0; color: #ddd; font-size: 14px; }

.footer_padding { padding-top: 100vh; }
    #page_profile .footer_padding { display: none; }
    #page_profile #footer { display: none; }

ul.footer-nav { margin-bottom: 0px; text-align: right; }
	ul.footer-nav li { display: inline; line-height: 25px; margin-left: 20px; }
    ul.footer-nav li:first-of-type { margin-left: 0px; }

/* Product Page */
.product_search_block > div { margin-bottom: 10px; }
.product_search_block input[type=text], .product_search_block select { width: 100%; padding: 0px 5px; }
.product_search_block select { width: 100%; }

.paging_block { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    .paging_block a { opacity: 0.9; line-height: 23px; min-width: 26px; background: white; border: 1px solid #d1d9e6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); color: #31344b; text-align: center; text-decoration: none; padding: 0px 5px; margin: 0px 0px 10px 7px; transition: all 0.33s ease; }
    .paging_block a:disabled { opacity: 0.93; }
    .paging_block a:hover { opacity: 1; box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px white; color: #525480; }
    .paging_block a.active { box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px white; color: #0099ff; }
    .paging_block .first { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
    .paging_block .last { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
    .paging_block a:first-of-type { margin-left: 0px !important; }
    .paging_block a:last-of-type { margin-right: 0px !important; }
    .paging_block a.disable { cursor: unset; }

.product_filter_block div > * { margin-bottom: 10px; }
.product_filter_block select { max-width: 50%; }
    .product_filter_btt { position: relative; }
    .product_filter_btt img { position: absolute; top: 4px; left: 5px; height: 16px; }
    .product_filter_btt.active { background-color: cornflowerblue; color: white !important; border: 1px solid white; transition: all 0.33s ease; }
    .product_filter_btt.active:hover { box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25) !important; }
        .product_filter_btt.active i { color: white !important; }
    .bttFilterPadding { padding-left: 25px !important; }
    .bttFilterPadding2 { padding-left: 28px !important; }
    .style_selected { background-color: cornflowerblue !important; color: white !important; }
    .style_selected:hover { box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25) !important; }

/* Item Page */
.view_item { padding: 30px 0px 0px 0px; }

.guide_item_box_status > b { display: block; margin-top: 10px; }
	.guide_item_box_status > div > label { width: 22px; margin: 0; }
	.guide_item_box_status > div > p { color: #777; margin-bottom: 5px; }

#img360 img { cursor: pointer; }
.release_history { list-style: none; margin: 0px; padding: 0px; }
    .release_history li { padding: 3px 7px; border: 1px solid #ddd; border-bottom: none; }
    .release_history li:last-of-type { border-bottom: 1px solid #ddd; }

/* Register Page */
.register { margin: 0 auto; max-width: 350px; }
	
/* Profile */
#profile_background { max-width: 1400px; background: ghostwhite; }
#profile_cover { width: 100%; padding-top: 30%; background-size: cover; background-position-x: center; }

.profile_left_column { padding: 20px 10px 20px 20px; }
.profile_right_column { padding: 20px 20px 20px 10px; }

.profile_info h5 { margin: 5px 0px 3px 0px; }
.profile_info > div { position: relative; padding-left: 60px; font-weight: normal; margin-bottom: 3px; }
    .profile_info > div > label { position: absolute; top: 0px; left: 0px; color: #777; font-weight: normal; }

.profile_block_1 { position: relative; }
    .profile_block_1 h5 { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #ddd; }
    .profile_block_1 h5 > span { position: absolute; right: 10px; font-size: 13px; }
    .profile_block_1 > div { position: relative; font-weight: normal; text-align: right; }
        .profile_block_1 > div > label { position: absolute; top: 0px; left: 0px; color: #777; font-weight: normal; }

.profile_block_user_collection { position: relative; padding: 10px 0px !important; }
    .profile_block_user_collection h5 > span { position: absolute; right: 25px; font-size: 13px; }
    .profile_block_user_collection > div { display: flex; overflow: hidden; }
        .profile_block_user_collection a img { height: 70px; }
        .profile_block_user_collection a:hover img { opacity: 0.8; }

.table_medal { width: 100%; }
.table_medal thead { border-bottom: 1px solid #ddd; }
.table_medal thead tr td { padding-bottom: 5px; }
.table_medal tbody tr td { padding-top: 7px; }

.social_right_column_block { position: relative; }
.social_right_column_block img { position: absolute; top: 10px; left: 20px; }
.social_right_column_block h5 { font-size: 14px; text-align: center; }

.medal_list { margin-top: 10px; text-align: left !important; }
.medal_list img { margin-right: 1.991px; }
.medal_list img:last-of-type { margin-right: 0; }
.medal { height: 27.8px; opacity: 0.8; }
.medal:hover { opacity: 1; transition: all 0.33s ease; }

label.error { margin: 10px 0 0 0; color: red !important; }

/* Dump Page */
.admin_report_2_col { display: flex !important; flex-direction: column; }
    .admin_report_2_col div { display: flex !important; }
        .admin_report_2_col label { flex: 2; }
        .admin_report_2_col span { flex: 1; text-align: right; }

/* Form Data */
.formData > div { display: flex; }
    .formData > div > label { width: 150px; }
    .formData > div > span input[type=text] { width: 300px; }
    .formData > div > span textarea { width: 300px; outline: none; }

/* Home Page */
.block_desc { padding: 80px 0; text-align: center; background: white; }
    .block_desc h1 { font-size: 38px; line-height: 48px; margin-bottom: 40px; }
    .block_desc p { font-size: 16px; line-height: 28px; color: #666; margin-top: 15px; }
    
.portfolio-box { display: block; margin: 0 auto; position: relative; }
.portfolio-box:hover .portfolio-box-caption { opacity: 1; }
.portfolio-box:hover .project-name { font-size: 20px; transition: all 0.33s ease; }
.portfolio-box:focus { outline: none; }

.portfolio-box .portfolio-box-caption { bottom: 0; color: white; display: block; height: 100%; position: absolute; text-align: center; width: 100%; transition: all 0.33s ease; }
.portfolio-box .portfolio-box-caption:hover { background: rgba(0, 0, 0, 0.2); }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content { position: absolute; text-align: center; width: 100%; height: 40px; line-height: 40px; bottom: 0; background: rgba(0, 0, 0, 0.3); transition: all 0.33s ease; }
.portfolio-box .portfolio-box-caption:hover .portfolio-box-caption-content { bottom: 50%; margin-bottom: -20px; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { padding: 0 15px; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { padding: 0 15px; font-size: 18px; }

/* Social Page */
.block_rank_4 span:first-of-type { display: inline-block; text-align: right; width: 25px; margin-right: 5px; }
.block_rank_4 span:last-of-type { float: right; text-align: right; }

/* Suggest Combine Page */
#suggest_combine { border: 1px solid #ddd; }
    #suggest_combine > tbody > tr { border: 1px solid #ddd; }
    #suggest_combine > tbody > tr > td { border: 1px solid #ddd; }

/* Profile Page */
body#page_profile { background-color: grey; }

/* Policy Page */
.policy_block { padding: 50px !important; font-size: 14px; }

/* global */
#footer ul, #footer ol { list-style: none; padding: 0; }

.PP { background-color: green; }
.fa-paint-brush { font-size: 27px; color: green; margin-top: 10px; }

.AD { background-color: #0080ff; }
.fa-rocket { font-size: 31px; color: #0080ff; margin-top: 9px; }

.GK { background-color: purple; }
.fa-wrench { font-size: 32px; color: purple; margin-top: 6px; }

.MK { background-color: maroon; }
.fa-briefcase { font-size: 27px; color: maroon; margin-top: 11px; }

.AS { background-color: #888; }
.fa-cube { font-size: 31px; color: #888; margin-top: 8px; }

.TD { background-color: #ff8000; }
.fa-gift { font-size: 33px; color: #ff8000; margin-top: 7px; }

.fa-firstdraft                      { color: grey !important; top: 6.5px !important; font-size: 14px !important; left: 3px !important; }
.fa-calendar-check                  { color: #009900 !important; top: 5px !important; font-size: 15px !important; left: 1px !important; }
.fa-plane                           { color: #009900 !important; top: 5px !important; font-size: 15px !important; }
.fa-calendar-xmark                  { color: red !important; top: 5px !important; font-size: 15px !important; left: 1px !important; }
.fa-cart-shopping                   { top: 6.5px !important; font-size: 13px !important; }

.fa-bath                            { color: hotpink !important; top: 0px !important; font-size: 14px !important; }
.fa-star                            { color: orange !important; top: 1px !important; font-size: 14px !important; }
.fa-bell                            { color: gold !important; top: 0px !important; font-size: 14px !important; }
.fa-heart                           { color: red !important; top: 0px !important; font-size: 14px !important; }
.fa-shopping-basket                 { color: #009900 !important; top: 0px !important; font-size: 13px !important; }
.fa-home                            { color: purple !important; top: 1px !important; font-size: 13px !important; }
.fa-list                            { color: black !important; top: 1px !important; font-size: 13px !important; }

.fa-clipboard                       { font-size: 13px !important; }

/* video */
.video-play                         { position: absolute; top: 50%; left: 50%; font-size: 25px; color: white; margin-top: -12.5px; margin-left: -9.825px; opacity: 0.66; }
.popup-youtube:hover .video-play    { opacity: 1; }

.filter_instock { position: relative; }
    .filter_instock input { position: absolute; top: 5px; }
    .filter_instock span { margin-left: 20px; }

/* define */
.bg_error { border: 1px solid red; }
.tooltip-inner { background: rgba(0, 0, 0, 0.8); padding: 5px; }

.cp { cursor: pointer !important; }
.cd { cursor: default; pointer-events: none; }

.fl { float: left; }
.fr { float: right; }
.fn { float: none; }
.cb { clear: both !important; }

.flex { display: flex; }
.jc_sb { justify-content: space-between; };
.ai_c { align-items: center; }

.ta_l { text-align: left; }
.ta_c { text-align: center; }
.ta_r { text-align: right; }
.va_t { vertical-align: top; }

.oh { overflow: hidden !important; }
.vh { visibility: hidden; }
.dn { display: none !important; }
.di { display: inline !important; }
.pr { position: relative !important; }
.pa { position: absolute !important; }
.pf { position: fixed !important; }

.l70 { left: 70px !important; }
.t10 { top: 10px !important; }
.r0 { right: 0 !important; }
.b0 { bottom: 0 !important; }
.l0 { left: 0 !important; }

.m0 { margin: 0 !important; }
.ml5 { margin-left: 5px !important; }
.ml0 { margin-left: 0px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mt0 { margin-top: 0px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt100vh { margin-top: 100vh !important; }
.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

.p0 { padding: 0 !important; }
.p4 { padding: 4px !important; }
.p5 { padding: 5px !important; }
.p20 { padding: 20px !important; }
.p30 { padding: 30px !important; }
.p40 { padding: 40px !important; }
.p50 { padding: 50px !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pb0 { padding-bottom: 0 !important; }
.pl0 { padding-left: 0px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }

.wa { width: auto !important; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w150 { width: 150px; }
.w15_100 { width: 15% !important; }
.w20_100 { width: 20% !important; }
.w24_100 { width: 24% !important; }
.w25_100 { width: 25% !important; }
.w30_100 { width: 30% !important; }
.w40_100 { width: 40% !important; }
.w45_100 { width: 45% !important; }
.w50_100 { width: 50% !important; }
.w60_100 { width: 60% !important; }
.w70_100 { width: 70% !important; }
.w75_100 { width: 75% !important; }
.w80_100 { width: 80% !important; }
.w90_100 { width: 90% !important; }
.w100_100 { width: 100% !important; }

.ha { height: auto !important; }
.h30 { height: 30px; }

.mw100_100 { max-width: 100%; }

.mh150 { max-height: 150px !important; }
.mh100_100 { max-height: 100%; }

.lh30 { line-height: 30px; }
.ti5 { text-indent: 5px; }

.fw_b { font-weight: bold; }

.c_black { color: black !important; }
.c_red { color: red !important; }
.c_green { color: green !important; }
.c_blue { color: blue !important; }

/* menu web */
#menu { position: fixed; right: 0; left: 0; text-align: right; z-index: 901; margin-bottom: 0px; padding-left: 0px; height: 50px; }
    #menu li { position: relative; display: inline-block; height: 50px; line-height: 50px; }
        #menu li a { float: left; width: 100%; height: 100%; padding: 0 15px; font-size: 14px; }
        #menu li > ul { position: absolute; top: 50px; list-style: none; padding: 0; display: none; }
        #menu li:hover > ul { display: flex; flex-wrap: wrap; }
            #menu li > ul > li { background: rgba(0, 0, 0, 0.6); width: 170px; height: 30px; line-height: 30px; text-align: left; }
            #menu li > ul > li:hover { background: rgba(0, 0, 0, 0.5); }

/* menu mobile */
#menu-toggler { position: fixed; z-index: 901; top: 12px; right: 12px; color: white; cursor: pointer; font-size: 26px; }
#menu-toggler.active { color: gold; }

#menu-mobile { position: fixed; z-index: 901; width: 200px; top: 50px; right: 0; margin-bottom: 0px; padding-left: 0px; list-style: none; }
    #menu-mobile li { width: 100%; padding: 0px; }
        #menu-mobile li a { background: rgba(0, 0, 0, 0.6); float: left; width: 100%; height: 100%; padding: 0px 15px; font-size: 16px; line-height: 36px; }
        #menu-mobile li a:hover { background: rgba(0, 0, 0, 0.5); } /* mobile don't have event hover */
        .menu_user_dropdown ul { right: 0; }

.btn-clipboard { float: right; cursor: pointer; }

/* Bootstrap Overwrite */
.nav-tabs .nav-item button { padding: 0px 7px 0px 7px; }
.nav-tabs .nav-item button.active { cursor: default; }
.alert { padding: 5px; }

/* datatable - Rove */
.datatable .header { color: #999; }
.datatable input[type=checkbox] { margin-right: 5px; }
.datatable img { max-height: 70px; max-width: 100%; }

/* rating - Rove
   Nam sao cham diem truoc day ve bang ma glyph "\f005" cua font FontAwesome. Gio dung mask SVG
   trong theme/css/icons.css - cung hinh, khong phai tai font 150 KB.
   .icon-star-empty / .icon-star-half-* da bo: khong mot the nao trong du an dung toi chung. */

.sky-form [class^="icon-"] { font-family: FontAwesome; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; }

.sky-form .rating_increase { color: #aaa; }
.sky-form .rating_increase:hover { color: inherit; }
.sky-form .rating_increase i { float: right; color: #ccc !important; cursor: pointer; transition: all 0.33s ease; margin-left: 2px; }
.sky-form .rating_increase i:last-of-type { margin-left: 0px; }
.sky-form .rating_increase i:hover, .sky-form .rating_increase i:hover ~ i, .sky-form .rating_increase i.active, .sky-form .rating_increase i.active ~ i { color: #fd7337 !important; }

.sky-form .rating_radio { color: #aaa; }
.sky-form .rating_radio:hover { color: inherit; }
.sky-form .rating_radio i { float: right; color: #ccc !important; cursor: pointer; transition: all 0.33s ease; position: unset !important; line-height: 23px; margin-left: 3px; }
.sky-form .rating_radio i:last-of-type { margin-left: 0px; }
.sky-form .rating_radio i.fa-heart:hover, .sky-form .rating_radio i.fa-heart.active { color: red !important; }
.sky-form .rating_radio i.fa-shopping-basket:hover, .sky-form .rating_radio i.fa-shopping-basket.active { color: #009900 !important; }
.sky-form .rating_radio i.fa-home:hover, .sky-form .rating_radio i.fa-home.active { color: purple !important; }

/* rainbow */
.rainbow-text {
    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    text-align: center;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    animation: rainbow 8s ease infinite;
}

.rainbow-effect { 
    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 7s ease infinite;
}

@keyframes rainbow { 
    0%{background-position:0% 100%}
    10%{background-position:100% 100%}
    20%{background-position:200% 100%}
    30%{background-position:300% 100%}
    40%{background-position:400% 100%}
    50%{background-position:500% 100%}
    60%{background-position:600% 100%}
    70%{background-position:700% 100%}
    80%{background-position:800% 100%}
    90%{background-position:900% 100%}
    100%{background-position:1000% 100%}
}

/* autocomplete */
.autocomplete-suggestions { z-index: 700; text-align: left; cursor: default; border: 1px solid #ddd; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1); position: absolute; display: none; max-height: 254px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }

/* animation: image auto rotate */
.transparent-effect { opacity: 0.6; }
.transparent-effect:hover { opacity: 1; }

.rotateRight { transform-origin: 50% 50%; animation: rotateRight 50000ms infinite linear; }

@keyframes rotateRight {
    100% { transform: rotate(360deg); }
}

/* block shadow */
.shadow_block { opacity: 0.93; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border: none; border-radius: 0; padding: 10px; transition: all 0.33s ease; } 
.shadow_block:disabled { opacity: 0.93; }
.shadow_block:hover { opacity: 1; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25); } 

.shadow_span { opacity: 0.93; display: inline-block; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border: 1px solid #d1d9e6; border-radius: 5px; color: #31344b; padding: 0px 5px; transition: all 0.33s ease; }
    .shadow_span:disabled { opacity: 0.93; }
	.shadow_span:hover { opacity: 1; box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px white; color: #525480; text-decoration: none; }
    .shadow_span:focus { opacity: 1; }
	.shadow_span.active { color: #0099ff; }
    .shadow_span.active:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); color: #525480; }

.shadow_effect { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: all 0.33s ease; }
.shadow_effect:hover { box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25); }

/* neumorphism */
[class*="neumorphism"] { transition: all .2s ease; }
.neumorphism_block { opacity: 0.93; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border: 1px solid #d1d9e6; border-radius: 5px; padding: 10px; transition: all 0.33s ease; }
.neumorphism_block:disabled { opacity: 0.93; }
.neumorphism_block:hover { opacity: 1; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25); }

.neumorphism_span { background: white; box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px white; border: 1px solid #d1d9e6; border-radius: 5px; color: #31344b; padding: 5px 7px; }
	.neumorphism_span:hover { box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px white; color: #525480; text-decoration: none; }
	.neumorphism_span.active { box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px white; color: #0099ff; }
    .neumorphism_span.active:hover { box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px white; color: #525480; }

.neumorphism_select { appearance: none; padding-right: 25px; background: white url("../img/icon/dropdown.svg") no-repeat right .75rem center/8px 10px}

/* some special element */
.release_ddl { max-width: 135px; }

/*========== Min Width ==========*/
/* Important - Rove >>> the lower the value min-width, the higher the position */

/*
xs  <  576px
sm  ≥  576px
md  ≥  768px
lg  ≥  992px
xl  ≥ 1200px
xxl ≥ 1400px
*/

@media (min-width: 576px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 16px; }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 16px; height: 40px; line-height: 40px; }
}
@media (min-width: 768px) {
    
}
@media (min-width: 992px) {
    
}
@media (min-width: 1200px) {
    
}
@media (min-width: 1400px) {
    
}

/*========== Max Width ==========*/
/* Important - Rove >>> the higher the value max-width, the higher the position */

@media (min-aspect-ratio: 16/9) { /* ratio > 1920/1080 >>> width will increase >>> scale width 100% to fit it >>> height overflow will hide on bottom */
    header video { width: 100%; }
}

@media (max-aspect-ratio: 16/9) { /* ratio < 1920/1080 >>> height will increase >>> scale height 100% to fit it >>> width overflow will hide on both left and right */
    header video { height: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
}

@media (max-aspect-ratio: 11/9) {
    header video { height: 100%; position: absolute; left: 50%; }
    /*
    function displayVideoOnCenter() {
        left: 50% will move video to right with distance = 50% screen width
        translateX(-50%) will move video to left with distance = 50% video width

        video ratio: 16/9, max-aspect-ratio: 11/9 >>> we use 5 width unit to padding
        padding = 5 / 16 * 100 = 31.25% screen width
        padding left, padding right = 25% / 2 = 15.625% screen width

        finally, translateX can be 34.375% to 65.625%
    }
    */
    .video35 { transform: translateX(-35%); }
    .video38 { transform: translateX(-38%); }
    .video45 { transform: translateX(-45%); }
    .video52 { transform: translateX(-52%); }
    .video54 { transform: translateX(-54%); }
    .video59 { transform: translateX(-59%); }
    .video64 { transform: translateX(-64%); } 
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { /* screen <= 1399 */
    
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { /* screen <= 1199 */
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { /* screen <= 991 */
    .block_desc { padding: 50px 60px; }
    .block_desc h1 { font-size: 30px; line-height: 40px; margin-bottom: 35px; }

    #footer { text-align: center; }
    ul.footer-nav { text-align: unset; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { /* screen <= 767 */
    body { font-size: 14px; line-height: 26px; }
    h4 { font-size: 22px; line-height: 32px; }
    h5 { font-size: 18px; line-height: 28px; }
    
    /* product page */
    .product_filter_btt img { top: 4px; left: 6px; height: 19px; }
    .bttFilterPadding { padding-left: 30px !important; }
    .bttFilterPadding2 { padding-left: 33px !important; }

    .item_image { width: 100%; max-width: none; max-height: none; }
    .guide_item_box_status > div > label { width: 35px; }

    /* social page */
    .social_right_column_block h5 { font-size: 18px; }
    .profile_left_column { padding: 20px !important; }
    .profile_right_column { padding: 0px 20px 20px 20px !important; }

    .date_block a { margin-top: 10px; }
    .paging_block a { line-height: 26px; }
    .shadow_span { line-height: 26px; }

    .item_status { padding-left: 25px; }
    .fa-firstdraft                      { top: 5.5px !important; font-size: 17px !important; left: 3px !important; }
    .fa-calendar-check                  { top: 3.5px !important; font-size: 18px !important; left: 1px !important; }
    .fa-plane                           { top: 4.5px !important; font-size: 18px !important; }
    .fa-calendar-xmark                  { top: 4px !important; font-size: 18px !important; left: 1px !important; }
    .fa-cart-shopping                   { top: 6.5px !important; font-size: 16px !important; }

    .fa-bath                            { font-size: 16px !important; }
    .fa-star                            { font-size: 16px !important; }
    .fa-bell                            { font-size: 16px !important; }
    .fa-heart                           { font-size: 16px !important; }
    .fa-shopping-basket                 { font-size: 15px !important; }
    .fa-home                            { font-size: 15px !important; }
    .fa-list                            { font-size: 15px !important; }

    .fa-clipboard                       { font-size: 15px !important; }
    
    .block_desc { padding: 25px 30px; }
    .block_desc h1 { font-size: 24px; line-height: 32px; margin-bottom: 20px; }

    .bttStyle { height: 24px; line-height: 24px; font-size: 12px; }
    .bttSearch { height: 28px; line-height: 26px; font-size: 14px; }

    /* rating */
    .sky-form .rating_increase, .sky-form .rating_increase i { font-size: 14px !important; line-height: 24px !important; }
    .sky-form .rating_radio, .sky-form .rating_radio i { font-size: 14px !important; line-height: 24px !important; }

    /* disable opacity */
    .shadow_block { opacity: 0.96; padding: 20px; } 
    .shadow_block:disabled { opacity: 0.96; }
    
    .shadow_span { opacity: 0.96; }
    .shadow_span:disabled { opacity: 0.96; }
	
    .neumorphism_block { opacity: 0.96; }
    .neumorphism_block:disabled { opacity: 0.96; }

    /* some special element */
    .release_ddl { max-width: 180px; }
    #reception { height: 10vh; }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { /* screen <= 575 */
}

/* Magic Scroll */
.MagicScroll-horizontal .mcs-item { width: unset !important; }

/* Google AdSense */
#affiliate .rfa_block { background: white; padding: 7px 7px 2px 7px; margin-bottom: 20px; }
    #affiliate .rfa_frame { position: relative; overflow: hidden; text-align: center; padding-top: 56.25%; }
        #affiliate .rfa_frame img { position: absolute; z-index: 1; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); transition: all 0.33s; }
        #affiliate .rfa_frame:hover img { transform: translate(-50%, -50%) scale(1.3); }
    #affiliate .rfa_block span { display: block; background: white; font-size: 11px; height: 20px; line-height: 20px; overflow: hidden; color: grey; }
    #affiliate .rfa_block:hover span { color: orange; }

/* Giu cho san cho quang cao.
   Truoc day khoi nay cao 0px cho toi khi AdSense tra ve, roi bat ra 250-280px va day toan bo
   phan duoi xuong. Do la CLS - Google tinh vao xep hang. Te hon: quang cao hien ra dung luc
   ngon tay dang di toi mot cai link se thanh cu bam nham, va AdSense tinh do la luu luong khong
   hop le.
   Da xac nhan tren production: .gga_block co height 0px, min-height 0px.
   Con so lay theo kich thuoc AdSense responsive thuong tra ve. Doi thi sua o day. */
.gga_block { text-align: center; overflow: hidden; min-height: 100px; }
@media (min-width: 768px) { .gga_block { min-height: 280px; } }
.gga_block.home { background: rgba(0, 0, 0, 0.6); }
.gga_block.product .adsbygoogle { margin-bottom: 30px; }

/* this class define by Google >>> don't change name */
.adsbygoogle { display:block; overflow: hidden; }
/* KHONG dung display:none cho o khong co quang cao: khoi se sap ve 0px va gay THEM mot lan xo
   lech nua, ngay sau lan thu nhat. Da giu cho thi giu den cung. */
.adsbygoogle[data-ad-status='unfilled'] { visibility: hidden; }

/* Google search block */
.auto-prose-wrapper { opacity: 0; }