:root {--mfont-size: 16px;}
/*==========================================================
                        C U S T O M
==========================================================*/
p{margin-bottom: 10px}
.under main .image_l{float:left;margin:0 50px 0 0}
.under main .image_r{float:right;margin:0 0 0 50px}
.under main .txt_img{text-align: center;font-size: 80%;display: block;}

/* MB */
.under main .mb10{margin-bottom:10px}
.under main .mb20{margin-bottom:20px}
.under main .mb30{margin-bottom:30px}
.under main .mb40{margin-bottom:40px}
.under main .mb50{margin-bottom:50px}
.under main .mb60{margin-bottom:60px}
.under main .mb70{margin-bottom:70px}
.under main .mb80{margin-bottom:80px}
.under main .mb90{margin-bottom:90px}

/* MT */
.under main .mt10{margin-top:10px}
.under main .mt20{margin-top:20px}
.under main .mt30{margin-top:30px}
.under main .mt40{margin-top:40px}
.under main .mt50{margin-top:50px}
.under main .mt60{margin-top:60px}
.under main .mt70{margin-top:70px}
.under main .mt80{margin-top:80px}
.under main .mt90{margin-top:90px}

/* MAX_W */
.under main .max_w200{width:100%;max-width:200px}
.under main .max_w250{width:100%;max-width:250px}
.under main .max_w300{width:100%;max-width:300px}
.under main .max_w350{width:100%;max-width:350px}
.under main .max_w500{width:100%;max-width:500px}
.under main .max_w600{width:100%;max-width:600px}
.under main .max_w700{width:100%;max-width:700px}
.under main .max_w800{width:100%;max-width:800px}
.under main .max_w900{width:100%;max-width:900px}

/* MIN-W */
.under main .min_w200{min-width:200px}
.under main .min_w250{min-width:250px}
.under main .min_w300{min-width:300px}
.under main .min_w350{min-width:350px}
.under main .min_w500{min-width:500px}

/*==========================================================
                        H E A D I N G
==========================================================*/
.under main h2,
.under main h3,
.under main h4,
.under main h5,
.under main h6{font-weight: bold;margin-bottom: 10px;}

.under main h2{font-size: 44px; text-align: center;margin-bottom: 0;color: var(--mcolor);text-transform: capitalize;;}
.under main h2 .en{display: block;font-size: 80%;text-transform: capitalize;}

.under main h3{font-size: 28px;position: relative;padding-bottom: 10px;margin-bottom: 15px}
.under main h3::before{content: '';position: absolute;width: 100%;border-top: 2px solid rgba(0,0,0,0.2);left: 0;bottom: 0}
.under main h3::after{content: '';position: absolute;width: 40%;border-top: 2px solid var(--mcolor);left: 0;bottom: 0}


.under main h4{font-size: 26px;position: relative;color: var(--mcolor)}


.under main h5{font-size: 24px;color: var(--mcolor);color: var(--mcolor)}
.under main h6{font-size: 20px;position: relative;color: var(--mcolor)}

.under main #ez-toc-container a{font-size: var(--mfont-size)}


/*==========================================================
                        FONT FAMILY
==========================================================*/

/*==========================================================
                      MAIN - CONTENT
==========================================================*/
.under main #content{padding: 0 0 120px}
.under main section{padding:0 0 80px;margin-bottom:0}
.under main section:last-child{padding:0}
.under main ol li{list-style: decimal;}
.under main .sec_list_cate{padding-bottom: 34px}

/* LINK + BUTTON TOP */
.under main .link{text-decoration: underline;color: var(--mcolor);}

/*============ TOP INFO ============ */
.under main #top_info{height:310px;width:100%;max-width:1920px;margin:0 auto;background:url('../images/top_info_bg.jpg') no-repeat center /cover;}
.under main #top_info .inner{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}

/*==========================================================
                    T O P I C   P A T H
==========================================================*/
.under main #topic_path{margin-bottom:30px}
.under main #topic_path ul{display:block;padding:10px 0}
.under main #topic_path li{display:inline;position: relative;}
.under main #topic_path li:not(:last-child)::after{content:">";position:relative;display: inline-block;margin: 0 5px 0 10px;top: 0;pointer-events: none;color: var(--txt)}
.under main #topic_path li{color: var(--mcolor);}


/*============ LIST ANCHOR LINK ============ */
.under main .list_anchor{display: flex; align-items: center; flex-wrap: wrap; justify-content: center;width:100%;margin-bottom: 30px;}
.under main .list_anchor .btn{margin: 0 10px 15px}
.under main .list_anchor:last-child{margin-bottom: -15px;}

.under main .list_cat_btn{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;width: 100%;margin: 0 -15px 15px;}
.under main .list_cat_btn li{margin: 0 15px 15px}
.under main .list_cat_btn .van-hoa{order: 2}
.under main .list_cat_btn li a{font-size: var(--mfont-size);font-weight: 700;width: 160px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50px;background: var(--mcolor);color: #fff}
.under main .list_cat_btn li.tax_active a{background: var(--scolor)}


/*==========================================================
                        T A B L E
==========================================================*/
.under main table.td_top td{vertical-align:top}
.under main table.tb_fix{table-layout: fixed;}

.under main table{margin-bottom: 10px;}
.under main table.mailform th,
.under main table th{background:#fff;color:var(--mcolor);font-weight:700;font-size: 18px;}
.under main table.mailform th span{color:#fff}
.under main table.mailform td .info{color:var(--mcolor)}

.under main table td{border-color: var(--mcolor);background:#fff;}
.under main table th,
.under main table td{padding:15px;}
.under main table img{display:block;margin:auto;}

.under main table th{border-color: var(--mcolor);border-right-color: #fff;}
.under main table tr th:first-child{border-left-color: var(--mcolor);}
.under main table tr th:last-child{border-right-color: var(--mcolor);}
.under main table.mailform th,
.under main table.tb_block th{border-color: var(--mcolor);border-bottom-color: #fff;}
.under main table.mailform tr:first-child th,
.under main table.tb_block tr:first-child th{border-top-color: var(--mcolor);}  
.under main table.mailform tr:last-child th,
.under main table.tb_block tr:last-child th{border-bottom-color: var(--mcolor);}

.under main table.woocommerce-checkout-review-order-table td.product-total,
.under main table.woocommerce-checkout-review-order-table th.product-total,
.under main table.woocommerce-checkout-review-order-table tr.order-total td{border-left: 0}
.under main table.woocommerce-checkout-review-order-table th.product-name,
.under main table.woocommerce-checkout-review-order-table tr.order-total th{border-right-color: var(--mcolor)}


/*============ LIST ============ */
.under main .in_block{display: inline-block;}
/* LIST 01 */
.under main .post_detail_content ul,
.under main .list01{margin-bottom: 30px;}
.under main .post_detail_content ul:not([class^="ez-toc"]) li,
.under main .list01 li{display:block;padding-left:25px;margin-bottom:5px;position:relative}
.under main .post_detail_content ul:not([class^="ez-toc"]) li::before,
.under main .list01 li::before{background:var(--mcolor);width:15px;height:3px;position:absolute;top:12px;left:0;content:''}

/* LIST 02 */
.under main .list02{margin-bottom: 30px;}
.under main .list02 li{counter-increment: li; padding-left: 30px;position: relative;margin-bottom: 10px;}
.under main .list02 li::before{ content: counter(li);position: absolute;width: 22px;height: 22px;display: flex;justify-content: center;align-items: center;border-radius: 50%;left: 0; top: 2px; background-color: var(--mcolor);font-size: 12px;font-weight: bold;color: #FFF;line-height: 22px;}

/* LIST CHECK */
.under main .list_check{margin-bottom: 30px;}
.under main .list_check li{display:block;padding-left:25px;margin-bottom:5px;position:relative}
.under main .list_check li::before{content: ''; display: block; position: absolute; top: 5px; left: 5px; width: 7px; height: 15px; border: solid var(--mcolor); border-width: 0 2px 2px 0; transform: rotate(45deg);}

/* STEP LIST */
.under main dl.list_step{box-sizing: border-box;margin-bottom: 120px;position: relative;}
.under main dl.list_step::before{content: '';position: absolute;border-style: solid;border-width: 40px 90px 0 90px;border-color: var(--mcolor) transparent transparent transparent;left: calc(50% - 90px);bottom: -80px}
.under main dl.list_step:last-child::before{display: none;}
.under main dl.list_step:last-child {margin-bottom: 0}
.under main dl.list_step dt {display: flex;align-items: center;background: var(--mcolor);border-radius: 10px 10px 0 0;}
.under main dl.list_step.step_center dt{justify-content: center;padding: 0 30px}
.under main dl.list_step dt p{font-size: 22px;font-weight: 500;border-bottom: none;color: #fff;margin-bottom: 0}
.under main dl.list_step dt .step_num{position: relative;font-size: 24px;top: 0;font-weight: 700;padding: 5px 15px;}
.under main dl.list_step dd {padding: 20px;position: relative;border: 5px solid var(--mcolor);border-top: 0;border-radius: 0 0 10px 10px;background: var(--scolor)}

/*  FAQ LIST */
.under main .faq_box01 dl{margin-bottom: 15px;}
.under main .faq_box01 dl:last-child{margin-bottom: 0}
.under main .faq_box01 dl>dt{padding:15px 50px 15px 20px;font-size: 18px;color: #fff;font-weight: 700;position: relative;cursor: pointer;}
.under main .faq_box01 dl>dt.active::before{transform: rotate(90deg);opacity: 0}
.under main .faq_box01 dl>dt::before{content: '';position: absolute;width: 1px;height: 32px;right: 30px;top: calc(50% - 16px);background: #fff;transition: .3s}
.under main .faq_box01 dl>dt::after{content: '';position: absolute;width: 32px;height: 1px;right: 15px;top: 50%;background: #fff;}
.under main .faq_box01 dl>dt{background: var(--mcolor);transition: .3s}
.under main .faq_box01 dl .d-flex{display: flex;align-items: flex-start;}
.under main .qa_ttl{font-size: 30px;font-weight: 500;margin: 0 20px 0 0;line-height: 1.1em;}
.under main dl dt p{font-size: 18px;font-weight: 700;color: #fff}
.under main .faq_box01 dl>dt .qa_ttl{color: #fff;}
.under main .faq_box01 dl>dd{padding: 20px 50px 20px 20px;display: none;background: var(--l_blue);color: var(--txt)}
.under main .faq_box01 .list01 li{color: #fff}
.under main .faq_box01 .list01 li::before{background: #fff}

/*============ FRAME ============ */
/* FRAME 01 */
.under main .frame01{border:3px solid var(--mcolor);padding:50px 30px;background:var(--mcolor);border-radius:10px;margin-bottom: 50px;}

/* FRAME 02 */
.under main .frame02{border: 1px solid #e6e6e6;padding: 25px;background: var(--scolor);margin-bottom: 50px;}

/* FRAME PICKUP */
.under main .frame_pick{border: 1px solid #000;padding: 25px;background: var(--scolor);margin-bottom: 50px;}
.under main .frame_pick .pick_ttl{font-size: 24px;}
.under main .frame_pick .pick_ttl span{font-size: 36px;display: block;}

/* IFRAME BOX */
.under main .box_ytb{width: 900px;height: auto; margin: 0 auto;aspect-ratio: 16/9;max-width: 100%;}
.under main .box_ytb iframe{width:100%;height:100%;border:none;outline: none;}

/*FRAME readmore*/
.under main .frame_readmore{padding: 15px 20px;border-left: 3px solid var(--mcolor);background: rgba(191,219,247,0.2);}


/* ===========  PAGINATION ===========  */
.under main .wp_pagination,
.woocommerce-pagination ul.page-numbers{display: flex;justify-content: center;flex-wrap: wrap;text-align: center;margin: 30px auto 0}
.under main .wp_pagination,
.woocommerce-pagination{margin: 0 10px}
.under main .wp_pagination .page-numbers,
.woocommerce-pagination ul.page-numbers span.page-numbers,
.woocommerce-pagination ul.page-numbers a.page-numbers{width:40px;height: 40px;text-align: center;border:1px solid  var(--mcolor);background: #fff;display: flex;color: var(--mcolor);justify-content: center;align-items: center;border-radius: 5px;margin: 0 5px}
.under main .wp_pagination .prev,
.under main .wp_pagination .next{width: 80px}
.under main .wp_pagination a:hover,
.under main .wp_pagination a.active,
.woocommerce-pagination ul.page-numbers span.page-numbers.current,
.woocommerce-pagination ul.page-numbers a.page-numbers:hover,
.under main .wp_pagination .current{background: var(--mcolor);color: #fff;}
.under main .wp_pagination a.active{pointer-events: none;}
.under main .wp_pagination a.disabled {display: none}

.under main .btn_box{display: flex;justify-content: center;align-items: center;margin: 0 -10px 30px}
.under main .btn_box .btn{margin: 0 10px}


/*POST LIST*/
.under main .post_list{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px;}
.under main .post_img{display: flex;align-items: center;justify-content: center;height: 250px;background: #cccccc;margin-bottom: 15px}
.under main .post_img img{width: 100%;height: 100%;object-fit: cover;}
.under main .post_content{font-size: var(--mfont-size);display: flex;flex-direction: column;}
.under main .post_date{font-size: 80%;line-height: 1.5em;}
.under main .post_ttl{font-size: 120%;line-height: 1.5em;font-weight: 700;color: var(--mcolor);transition: .3s;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box;margin-bottom: 10px;height: 29px}
.under main .post_des{line-height: 1.5em;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box;margin-bottom: 10px;max-height: 39px;font-size: 80%}
.under main .post_list li a{border-radius: 10px;padding: 10px;transition: .3s;background: rgba(191,219,247,0.5);display: block;height: 100%}
.under main .sec_full{width: 100%}

.under main .post_list_shades{grid-template-columns: repeat(1,1fr);grid-gap: 30px;max-width: 800px}
.under main .post_img02{height: 440px}
.under main .post_list_shades li a{background: #fff;border-bottom: 1px dashed var(--txt);border-radius: 0;padding-bottom: 30px}

/*POST DETAIL*/
.under main .post_ct_ttl01{font-size: var(--mfont-size);font-weight: 700;color: var(--mcolor)}
.under main .post_ct_ttl01 .big{font-size: 120%}
.under main .post_detail_content .aligncenter{display: flex;margin-left: auto;margin-right: auto;}
.under main .post_detail_content .alignright{display: flex;margin-left: auto;margin-right: 0;}
.under main .list_anchor_single{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;margin-top: 30px}
.under main .list_anchor_single li{margin: 0;}
.under main .btn_single a{text-decoration: underline;position: relative;display: inline-block;padding-right: 15px}
.under main .btn_single a:hover{color: var(--scolor)}
.under main .btn_single a.prev_ic{padding-left: 15px;padding-right: 0}
.under main .btn_single a::before{content: '';position: absolute;width: 8px;height: 8px;border-top: 2px solid CurrentColor;border-right: 2px solid CurrentColor;transform: rotate(45deg);top: calc(50% - 4px);right: 0}
.under main .btn_single a.prev_ic::before{border-left: 2px solid CurrentColor;border-right: none;transform: rotate(-45deg);left: 0;right: initial;}
.under main .section_container_shades{width: 100%;max-width: 800px;margin: 0 auto}
.under main .post_detail_content{text-align: justify;}

/*FORM*/
.under main .section_form .label_form{font-weight: 700;display: block;margin-bottom: 5px}
.under main .form_box{line-height: 1.3em}
.under main .section_form .wpcf7-form-control-wrap{display: block;}
.under main .section_form label{display: inherit;}
.under main .section_form{width: 100%;max-width: 400px;margin: 0 auto}
.under main .section_form input{border: 1px solid #cccccc;height: 40px;border-radius: 5px;padding: 0 15px;font-size: var(--mfont-size);width: 100%}
.under main .section_form textarea{border: 1px solid #cccccc;border-radius: 5px;padding: 15px;font-size: var(--mfont-size);width: 100%}
.under main .section_form .btn_form{border: none;background: var(--mcolor);color: #fff;cursor: pointer;transition: .3s}
.under main .section_form .btn_form:hover{background: var(--scolor)}
.under main .wpcf7-response-output{font-size: var(--mfont-size)}

/* RESET */
.under main .post_detail_content ul:last-child,
.under main table:last-child,
.under main .list_faq:last-child,
.under main .list_faq dl:last-child,
.under main .list01:last-child,
.under main .list01 li:last-child,
.under main .list02:last-child,
.under main .list02 li:last-child,
.under main .list_check:last-child,
.under main .list_check li:last-child,
.under main .list_step:last-child,
.under main .list_step dl:last-child,
.under main section p:last-child,
.under main p:last-child,
.under main .frame01:last-child,
.under main .frame02:last-child,
.under main .frame_pick:last-child{margin-bottom: 0}


/* EGDE */
@supports (-ms-ime-align: auto) {
}

/* FIREFOX */
@-moz-document url-prefix() {
}

/* Safari 10.1+ (which is the latest version of Safari at this time) */
@media not all and (min-resolution: 0.001dpcm) {
}