/*
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 */
.icon-star:before {
    content: "\f005";
}
.icon-star-empty:before {
    content: "\f006";
}
.icon-star-half-full:before,
.icon-star-half-empty:before {
    content: "\f123";
}
.icon-star:before { content: "\f005"; }
.icon-star-empty:before { content: "\f006"; }
.icon-star-half-full:before, .icon-star-half-empty:before { content: "\f123"; }

.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; }

.gga_block { text-align: center; overflow: hidden; }
.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; }
.adsbygoogle[data-ad-status='unfilled'] { display: none; }

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