:root {
    --color-primary: #1D5D9B;
    --color-primary-rgb: 29, 93, 155;
    --color-primary-light:  #75C2F6;
    --color-primary-light-rgb: 117, 194, 246;
    --color-secondary:  #FFA62B;
    --color-secondary-light: #F4D160;

    --text-size: 1.4rem;
    --text-height: 1.5;
    --text-color: #0d0d0d;
    --text-color-desc: #8c8c8c;
    --text-color-light: #fafafa;
}

@font-face {
    font-family: roboto;
    src: url('fonts/roboto.ttf');
}
@font-face {
    font-family: hLight;
    src: url('fonts/helvetica-neue-light.ttf');
}

@font-face {
    font-family: hRegular;
    src: url('fonts/helvetica-neue-regular.ttf');
}

@font-face {
    font-family: hBold;
    src: url('fonts/helvetica-neue-bold.ttf');
}


/*---------- TAG ---------------*/
html {font-size: 62.5%;}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

* {
    font-family: hRegular, tahoma, sans-serif, arial;
    text-align: justify;
	font-size: 1.25rem;
    color: #555;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {color: var(--color-primary)}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

input[type=password],
input[type=text] {
	background: #fff;
	border-radius: 0.2rem;
	border: solid 0.1rem #e1e1e8;
	box-sizing: border-box;
	color: #666;
	width: 100%;
    height: 4rem;
    padding: 0 1rem;
    outline: none;
}

input[type=password]:focus,
input[type=text]:focus {
    border: solid 0.1rem var(--color-primary);
    color: #000 !important
}


/*---------- CLASS ---------------*/
.clear {width: 100%; height: 0; clear: both}

.divTable {
    width: 100%;
    display: table;
}

.divTable>div {display: table-row}

.divTable>div.head {
    position: sticky;
    top: 0;
    z-index: 10;
}

.divTable>div.head span {
    height: 4rem;
    vertical-align: middle;
    background: #333 !important;
    color: #fff !important;
    border-right: solid 0.1rem #fff !important;
	padding: 1rem !important;
}

.divTable>div.head span:last-child {border-right: none}

.divTable>div>span {
    display: table-cell;
    padding: 1rem;
    vertical-align: middle;
    height: 8rem;
    box-sizing: border-box;
    border-top: solid 0.1rem transparent;
    border-bottom: solid 0.1rem transparent;
}

.divTable.records>div:hover>span{
    background: #ededf4;
    border-top: solid 0.1rem #e1e1e8;
    border-bottom: solid 0.1rem #e1e1e8;
    box-sizing: border-box;
}


/*---------- CONTENT ---------------*/
#head,
#content{
    float: left;
    clear: both;
    width: 100%;
    padding: 0 3rem;
}

#head *,
#foot * {
    letter-spacing: 0.02rem;
    color: #555;
}

#head {padding-top: 1rem}

#head a {
    line-height: 3rem;
    padding: 0 1.7rem;
    margin: 0.5rem;
    display: inline-block;
    background-color: #f2f2f2;
    color: var(--color-primary);
	font-size: 1.1rem;
    border-radius: .2rem;
}

#head a.active,
#head a:hover {
    background: var(--color-primary);
    color: #fff;
}


#content .index {
    margin: 10rem 0;
    width: 40vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#content .index>* {
    width: 100%;
    text-align: center;
    display: block;
}

#content .index a {
    text-transform: uppercase;
    font-size: 3.6rem;
    color: var(--color-primary);
    font-family: hBold;
}

#content .index input {
    width: 100%;
    margin-top: 2rem;
}

#content .search form *,
#content .search .logo *,
#content .search .info * {float: left}

#content .search form {width: 50rem}

#content .search .logo {
    float: right;
    width: auto
}

#content .search .logo span {
    line-height: 4rem;
    font-size: 2.4rem;
    color: #999;
    font-family: hLight;
    display: inline-block;
}

#content .search .logo span:last-child {
    text-transform: uppercase;
    font-size: 3.6rem;
    color: var(--color-primary);
    font-family: hBold;
    margin-left: 1rem;
}

#content .search .info div {
    line-height: 4rem;
    margin-right: 2rem;
}

#content .search .info span:first-child:after {
    content: ":";
    margin: 0 0.3rem;
}

#content .search .info span:last-child {font-family: hBold;}

#content .search .divTable {margin-top: 1rem}
#content .search span {text-align: right}
#content .search .col-no {width: 5rem; text-align: center}
#content .search .col-code {width: 12rem; text-align: left}
#content .search .col-cover {width: 5rem; text-align: center}
#content .search .col-info {text-align: left}
#content .search .col-group {width: 10rem; text-align: left}
#content .search .col-taxonomy {width: 12rem; text-align: left}
#content .search .col-symbol {width: 6rem; text-align: left}
#content .search .col-quality {width: 7rem; text-align: left}
#content .search .col-store {width: 10rem; text-align: left}
#content .search .col-size {width: 7rem; text-align: left}
#content .search .col-kpb,
#content .search .col-net {width: 7rem}
#content .search .col-stock-kg,
#content .search .col-stock-box {width: 7rem}
#content .search .col-total {width: 10rem}

#content .search .divTable>div:hover {
    background: #f3f3f3;
    box-shadow: 0 .1rem .15rem rgba(0,0,0,.15);
}

#content .search .divTable img {
    max-width: 8rem;
    max-height: 8rem;
}

#content .search .divTable span * {
    float: left;
    clear: both;
}

#content .search .divTable span a {
	color: #000;
	font-family: hBold;
	font-size: 1.4rem;
	margin-bottom: .5rem;
}

#content .search .divTable span a:hover {color: var(--color-primary)}

#content .search .page {
    text-align: center;
    line-height: 5rem;
    text-transform: uppercase;
    margin: 2rem 0;
}

#content .search .page a {color: #000}
#content .search .page a:hover {color: var(--color-primary)}

#login {
    width: 29rem;
    height: 19rem;
    background: #e5e5e5;
    position: fixed;
    left: -26rem;
    top: 50%;
    margin-top: -9.5rem;
    padding: 2rem 6rem 2rem 2rem;
    box-sizing: border-box;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0, 0.2);
    transition: 0.5s;
    z-index: 10;
}

#login[state=show] {
    left: 0;
}

#login>a {
    width: 19rem;
    height: 3rem;
    background: #000;
    color: #fff ;
    text-transform: uppercase;
    line-height: 3rem;
    text-align: center;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 100%;
    transform: rotate(90deg);
    transform-origin: 0 0 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 0 0;
    cursor: pointer;
}

#login>form {text-align: center}

#login>form>* {float: left; clear: both; margin-bottom: 1rem;}

#login input[type=text],
#login input[type=password] {
    border: solid .1rem #d9d9d9;
}

#login input[type=submit] {
    float: none;
    width: 60%;
    height: 4rem;
    border-radius: 0.2rem;
    background: #333;
    text-align: center;
    margin-top: 1rem;
    color: #fff;
    border: none;
    transition: .3s ease-out;
    box-shadow: 0 .1rem .1rem rgba(0,0,0,.2);
}

#login input[type=submit]:hover {
    background: var(--color-primary);
}


#search {
    width: 100%;
    margin: 5rem 0;
    height: 4rem;
}

#search * {float: left}

#search form {
    width: 40vw;
    min-width: 32rem;
}

#search .logo {
    float: right;
    width: 50vw;
    text-transform: uppercase;
    font-size: 3.6rem;
    color: var(--color-primary);
    font-family: hBold;
    margin-left: 1rem;
}
#content .search .data > :not(.head) > span{
    border-top: thin solid #d9d9d9;
}



/* --------------------
        DETAIL
---------------------- */
#detail {
    float: left;
    width: 100%;
    padding: 4rem 0;
    border-top: dotted 0.1rem #999;
}

#detail .image {float: left; width: 52%}

#detail .image img {
    float: left;
    width: 100%;
    margin-bottom: 0.2rem;
    cursor: zoom-in;
}


#detail .info {
    float: right;
    width: 45%;
}

#detail .info>*,
#detail .properties>* {float: left}

#detail .info>* {
    float: left;
    width: 100%;
}

#detail .info h1 {
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 4rem;
}

#detail .properties * {color: #666}
#detail .properties ul {margin-right: 5rem}
#detail .properties ul li {line-height: 2rem}

#detail .properties span {
    line-height: 5rem;
    font-size: 3rem;
}

#detail .properties span:first-child {font-size: 2.5rem; font-family: hLight}
#detail .properties .price {
    font-size: 3rem;
    color: var(--color-primary);
    margin-left: 1rem
}

#detail .properties button {
    float: right;
    height: 5rem;
    line-height: 5rem;
    padding: 0 5vw 0 3vw;
    background-color: #f2f2f2;
    background-position: 90% center;
    background-image: url('images/icon-fb.png');
    background-repeat: no-repeat;
    text-transform: uppercase;
    transition: 0.5s;
    border: none;
}

#detail .properties button:hover {
    background-color: #ccc;
    color: #fff;
}


#detail .tabs {margin-top: 4rem}

#detail .tabs input {display: none}

#detail .tabs>* {float: left}

#detail .tabs label {
    width: 50%;
    height: 5rem;
    background: #f2f2f2;
    color: #666;
    text-align: center;
    text-transform: uppercase;
    line-height: 5rem;
    border-bottom: solid 0.2rem #ccc;
    box-sizing: border-box;
    transition: 0.5s;
}

#detail .tabs input:checked + label {
    background: #fff;
    border-left: solid 0.2rem #ccc;
    border-top: solid 0.2rem #ccc;
    border-right: solid 0.2rem #ccc;
    border-bottom: none;
    font-family: hBold;
    color: #333;
}

#detail .tabs .cons {
    width: 100%;
    position: relative;
}

#detail .tabs .cons>div {
    width: 100%;
    display: none;
    transition: 0.5s;
    box-sizing: border-box;
    padding: 2rem 1rem;
    color: #444;
    font-size: 1.4rem;
}

#detail .tabs .cons>div img {
    width: 100%;
}

#detail .tab-1:checked ~ .cons .con-1,
#detail .tab-2:checked ~ .cons .con-2 {
    display: block;
}




#home {
    float: left;
    width: 100vw;
    height: 100vh;
    background: #f2f2f2;
}

#homeL {
    width: 40%;
    height: inherit;
}

#homeC {
    width: 26%;
    height: inherit;
}


#home * {
    float: left;
}

#home .box>a{
    width: 100%;
    display: block;
    border: solid 0.1rem #f7f7f7;
    transition: 0.5s;
}

#home .box>a:hover {background: #ccc}

#home .box>a * {
    float: left;
    clear: both;
}

#home .box span {
    width: 100%;
    height: 40%;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

#home .box span:before,
#home .box span:after {
    transition: 0.5s;
}

#home .box span:before {
    content: "";
    float: left;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#homeL span:before {height: 60%}
#homeC span:before {height: 60%}

#homeL a:hover span:before {height: 70%}
#homeC a:hover span:before {height: 70%}

#homeL .cosmetic-top span:before {background-image: url('images/wholesale.png')}
#homeL .cosmetic-bot span:before {background-image: url('images/retail.png')}
#homeC .cosmetic-top span:before {background-image: url('images/feather.png')}
#homeC .cosmetic-mid span:before {background-image: url('images/pimple.png')}
#homeC .cosmetic-bot span:before {background-image: url('images/needle.png')}


#home .box span:after {
    float: left;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #f7f7f7;
    font-family: hRegular;
    margin-top: 1.5rem;
}

#homeL span:after {font-size: 2.2vw}
#homeC span:after {font-size: 1.6vw}

#homeL a:hover span:after {font-size: 2vw}
#homeC a:hover span:after {font-size: 1.4vw}

#homeL .cosmetic-top span:after {content: 'mỹ phẩm bán sỉ'}
#homeL .cosmetic-bot span:after {content: 'mỹ phẩm bán lẻ'}
#homeC .cosmetic-top span:after {content: 'triệt lông'}
#homeC .cosmetic-mid span:after {content: 'trị mụn'}
#homeC .cosmetic-bot span:after {content: 'lăn kim'}


#home .box label {
    text-transform: uppercase;
    color: #f7f7f7;
    font-family: hRegular;
    font-size: 2.2vw;
    margin-top: 2rem;
}



#homeL>a {height: 50%}

#homeL .cosmetic-top {background: #45a4e6}
#homeL .cosmetic-bot {background: #e545e6}


#homeC>a {height: 33.333333333%}
#homeC .cosmetic-top {background: #62d941}
#homeC .cosmetic-mid {background: #56bf39}
#homeC .cosmetic-bot {background: #4ba632}


#homeR {
    width: 34%;
    height: 100%;
    padding: 3rem;
}

#homeR>div,
#homeR>div * {float: left}

#homeR>div,
#homeR>div>* {
    width: 100%;
    clear: both;
}

#homeR .name {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.6vw;
    font-family: hBold;
    color: #ff4cff;
    line-height: 6vh;
}

#homeR .hotline {margin: 6vh 0 12vh 0}

#homeR .hotline span {
    text-align: center;
    text-transform: uppercase;
}

#homeR .hotline span:nth-child(1) {
    font-size: 1.6vw;
    line-height: 6vh;
    border-bottom: dotted 0.1rem #ccc;
    color: #333;
}

#homeR .hotline span:nth-child(2) {
    font-size: 2.5vw;
    letter-spacing: 0.2vw;
    color: #ff4cff;
}


#homeR .contact a {float: none}
#homeR .contact>*{
    float: left;
    width: 100%;
    text-align: center;
}

#homeR .contact>span:nth-of-type(1) {
    font-size: 1.6vw;
    margin-bottom: 2vh;
}



#homeR .contact * {
    font-size: 1vw;
    line-height: 3.5vh;
    color: #777;
}


#homeR .time {margin: 12vh 0 0 0}

#homeR .time .title {margin-bottom: 2vh}

#homeR .time .title * {
    width: 100%;
    clear: both;
    text-align: center;
}

#homeR .time .title span:nth-child(1) {
    font-size: 1.8vw;
    text-transform: uppercase;
}

#homeR .time .title span:nth-child(2) {
    font-size: 1.2vw;
    color: #777;
}


#homeR .time .number {position: relative}

#homeR .time .number div {
    width: 21vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

#homeR .time .number span {
    float: left;
    display: inline-block;
    background: #fff;
    border: solid .1rem #d9d9d9;
    box-sizing: border-box;
    text-align: center;
    color: #777;
}

#homeR .time .number span:nth-child(1),
#homeR .time .number span:nth-child(3) {
    width: 8vw;
    height: 8vw;
    border-radius: 4vw;
    line-height: 8vw;
    font-size: 2vw
}

#homeR .time .number span:nth-child(2) {
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    line-height: 5vw;
    margin-top: 1.5vw;
    font-size: 1.2vw;
}



article {width: 100%}

header {
    width: 100%;
    height: 4rem;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    box-shadow: 0 0.3rem 0.3rem rgba(0,0,0, 0.05);
    z-index: 1000;
}

header nav {
    width: 114rem;
    margin: auto;
}

header nav a {
    float: left;
    height: 4rem;
    line-height: 4rem;
    display: inline-block;
    color: #333;
    text-transform: uppercase;
    padding: 0 4rem;
    transition: 0.5s ease-out;
    position: relative;
}

header nav a:hover {
    background: #f7f7f7;
    color: #000;
}
header nav a.active {
    height: 5rem;
    line-height: 5rem;
    background: #62d941 !important;
    color: #fff;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

header nav a:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-width: 0;
    border-bottom-width: 1.2rem;
    border-left-width: 2rem;
    border-right-width: 2rem;
    border-top-color: #62d941;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -2rem;
    opacity: 0;
    transition: 0.5s ease-out;
}

header nav a.active:after {
    opacity: 1;
    top: 100%;
    border-top-width: 1.2rem;
}

header nav a:first-child:after {display: none}


footer {
    background: linear-gradient(
            to bottom,
            rgba(var(--color-primary-light-rgb), .4),
            #fff
    );
    margin-top: 4rem;
    float: left;
    width: 100%;
}

footer .block {
    padding: 6rem 2rem 2rem 2rem;
}

footer .s-info {
    text-align: center;
}
footer .s-info h2 {
    font-size: 2em;
    color: var(--color-primary);
    line-height: 1;
    text-align: center;
}
footer .s-info .items {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
footer .s-info .items > :not(:first-child):before {
    content: '•';
    margin: 0 1rem
}

footer .s-copyright {
    height: 6rem;
    line-height: 6rem;
    text-align: center;
}

footer .s-copyright,
footer .s-copyright * {
    font-size: 1rem;
    letter-spacing: .05rem;
}

footer .s-copyright a {
    float: none;
    color: inherit;
    text-decoration: underline
}




main {
    width: 114rem;
    margin: auto; 
}


main>* {
	float: left;
    width: 100%;
    clear: both;
}

main>*:first-child {margin-top: 4rem}

main h2,
main p {padding: 0 3rem}

main>section>*,
main>section h1,
main>section h1 label{
    width: 100%;
    float: left;
    clear: both;
}

main h1 {
    text-align: center;
    text-transform: uppercase;
    font-family: hBold;
    font-size: 3rem;
    margin-top: 10rem;
}

main h1 b {
    font-size: inherit;
    color: #ffcc00;
    font-family: inherit;
}

main h1 label {
    text-align: inherit;
    font-size: 1.6rem;
    font-family: hRegular;
    padding-top: 1rem;
}

main h2 {
    font-size: 1.8rem;
    font-family: hBold;
    text-transform: uppercase;
    margin-top: 3rem;
}

main h1,
main h2 {color: #000}

main ul {
    padding-left: 4rem;
    list-style: square;
}

main ul li {margin-bottom: 1rem}


.process div {
    float: left;
    width: calc(100%/4 - 0.2rem);
	-webkit-width: calc(100%/4 - 0.2rem);
	-moz-width: calc(100%/4 - 0.2rem);
    height: 15rem;
    display: block;
    background: #56bf39;
    margin: 3rem 0.1rem;
    position: relative;
    font-family: hBold;
}

.process div:after {
    content: '';
    width: 4rem;
    height: 4rem;
    border-radius: 4rem;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2rem;
    margin: auto;
    z-index: 1;
    background: url('images/article/icon-arrow.png') center no-repeat #fff;
}

.process div:last-child:after {display: none}


.process label:first-child {
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    background: #fff;
    border: solid 0.2rem #56bf39;
    position: absolute;
    left: 0;
    right: 0;
    top: -3rem;
    margin: auto;
    text-align: center;
    line-height: 6rem;
    font-size: 3rem;
    font-family: inherit;
    color: #56bf39;
}

.process label:last-child {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 1.8rem;
    font-family: inherit;
    color: #f2f2f2;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}


.contact-article div {
    float: left;
    width: 45%;
    height: 38rem;
}

.contact-article div:first-of-type {
    background: url('images/article/contact-add.png') center no-repeat;
    font-size: 2rem;
    font-family: hBold;
    padding-left: 16rem;
    padding-top: 11rem;
    color: #fff;
}

.contact-article div:last-of-type span {
    width: 100%;
    margin: 0 6rem;
    background: #ccc;
    display: block;
    color: #fff;
}

.contact-article div:last-of-type span:first-of-type {
    height: 15rem;
    background: url('images/article/contact-phone.png') right center no-repeat #56bf39;
    background-origin: content-box;
    padding-right: 3rem;
}

.contact-article div:last-of-type label {
    float: left;
    clear: both;
    width: 100%;
    text-align: right;
    padding-right: 10rem;
    color: inherit;
    text-transform: uppercase
}

.contact-article div:last-of-type label:first-child {font-size: 4rem; font-family: hBold; margin-top: 4rem}
.contact-article div:last-of-type label:last-child {font-size: 1.6rem; font-family: hRegular}

.contact-article div:last-of-type span:last-child {
    height: 22rem;
    background: #758073;
    padding: 0 3rem;
    font-size: 5rem !important;
    text-align: right;
    font-family: hBold;
    padding-top: 5rem;
    color: #ffcc00 !important;
    margin-top: 0.1rem;
}


/* ---------- TRIET LONG ---------- */
#long-uudiem section {margin-top: 7rem}

#long-uudiem .s1 div,
#long-uudiem .s1 div * {float: left}

#long-uudiem .s1 div{
    width: 32rem;
    height: 32rem;
    border-radius: 32rem;
    display: block;
    margin: 0 3rem;
    border: solid 0.2rem #56bf39;
    background-position: center 3rem;
    background-repeat: no-repeat;
}

#long-uudiem .s1 div:nth-child(1) {background-image: url('images/article/long-congnghe.png')}
#long-uudiem .s1 div:nth-child(3) {background-image: url('images/article/long-khachhang.png')}
#long-uudiem .s1 div:nth-child(2) {
    background-image: url('images/article/long-baohanh.png');
    background-position: center;
}

#long-uudiem .s1 div span {
    width: inherit;
    text-align: center;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-family: hBold;
}

#long-uudiem .s1 div:nth-child(1) span:nth-child(1) {margin-top: 18rem}
#long-uudiem .s1 div:nth-child(1) span:nth-child(2) {font-size: 3rem}

#long-uudiem .s1 div:nth-child(3) span:nth-child(1) {margin-top: 16rem}
#long-uudiem .s1 div:nth-child(3) span:nth-child(2) {font-size: 7rem}


#long-uudiem .s2>div {
    float: left;
    width: 100%;
    clear: both;
}

#long-uudiem .s2>div span {
    float: left;
    width: 19rem;
    height: 19rem;
    background: #56bf39;
    border-radius: 19rem;
    display: inline-block;
    margin: 0 9.5rem;
    position: relative;
}

#long-uudiem .s2>div:nth-child(2) span:first-child {margin-left: 28.5rem}

#long-uudiem .s2>div label {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    font-size: 1.8rem;
    color: #f2f2f2;
    font-family: hBold;
}

#long-uudiem .s2 span:before,
#long-uudiem .s2 span:after {
    content: '';
    background: #56bf39;
    position: absolute;
    margin: auto;
}

#long-uudiem .s2 .h-line:before,
#long-uudiem .s2 .h-line:after {
    width: 19rem;
    height: 0.1rem;
    top: 0;
    bottom: 0;
}

#long-uudiem .s2 .h-line:before {left: -19rem}
#long-uudiem .s2 .h-line:after {right: -19rem}

#long-uudiem .s2 .v-line:before {
    height: 9.5rem;
    width: 0.1rem;
    left: 0;
    right: 0;
    top: -9.5rem;
}


#long-quytrinh .info div {
    float: left;
    width: 34rem;
    margin: 2rem;
}

#long-quytrinh .info h2 {
    height: 5rem;
    line-height: 5rem;
    padding-left: 5rem;
    border-bottom: dotted 0.1rem #ccc;
    background-position: left center;
    background-repeat: no-repeat;
}

#long-quytrinh .info div:nth-child(1) h2 {background-image: url('images/article/icon-user.png')}
#long-quytrinh .info div:nth-child(2) h2 {background-image: url('images/article/icon-time.png')}
#long-quytrinh .info div:nth-child(3) h2 {background-image: url('images/article/icon-pay.png')}

#long-quytrinh .info p:nth-of-type(2) {font-family: hBold; color: #000}



#long-gia div {
    float: left;
    width: 22.5rem;
    height: 22.5rem;
    border-radius: 22.5rem;
    background: #e9f2e6;
    margin: 3rem;
    display: block;
    overflow: hidden;
}

#long-gia div:nth-of-type(13) {
    margin-left: 30.5rem;
}

#long-gia div span {
    float: left;
    width: 100%;
    clear: both;
    text-align: center;
    display: block;
}

#long-gia div span:nth-child(1),
#long-gia div span:nth-child(3) {height: 8rem}

#long-gia div span:nth-child(1) {
    line-height: 8rem;
    font-size: 2rem;
    font-family: hBold;
    padding-top: 1rem;
}

#long-gia div span:nth-child(2) {
    height: 6.5rem;
    line-height: 6.5rem;
    background: #56bf39;
    box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.4);
    font-size: 2.5rem;
    color: #f2f2f2;
    font-family: hBold;
}

#long-gia div label {
    width: inherit;
    float: left;
    clear: both;
    text-align: center;
}

#long-gia div label:first-child {
    margin-top: 2rem;
    text-decoration: underline;
    font-size: 1.6rem
}


#long-hinh img {
    float: left;
    width: 50%;
    transition: 1s;
    border: solid 1rem #fff;
}

#long-hinh img:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    box-shadow: 0 0 2rem rgba(0,0,0,0.4);
    z-index: 1;
}



/* ---------- TRI MUN ---------- */
#mun h1  {margin: 10rem 0 5rem 0}

#mun-tachai div {
    float: left;
    width: 50%;
    text-align: center;
}

#mun-tachai div:first-child * {
    clear: both;
}

#mun-tachai div:first-child label {
    font-size: 13rem;
    font-family: hRegular;
    letter-spacing: 2.5rem;
    color: #56bf39;
}

#mun-tachai div:last-child span {
    width: 24.5rem;
    height: 24.5rem;
    border-radius: 24.5rem;
    display: inline-block;
    background: #d4e6cf;
    margin: 1rem;
    position: relative;
}

#mun-tachai div:last-child span:before,
#mun-tachai div:last-child span:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
}

#mun-tachai div:last-child span:before {
    width: 0.2rem;
    height: 4rem;
}

#mun-tachai div:last-child span:after {
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    top: 4rem;
}


#mun-tachai div:last-child label {
    width: inherit;
    text-align: center;
    display: block;
    margin-top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}


#mun-quytrinh .process:nth-of-type(1) div {margin-bottom: 0}

#mun-quytrinh .process:nth-of-type(2) div {margin-top: 0.2rem; margin-bottom: 5rem}
#mun-quytrinh .process:nth-of-type(2) div:after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

#mun-quytrinh .process:nth-of-type(2) label:first-child {
    top: auto;
    bottom: -3rem;
}


#mun-cauhoi h2 {
    line-height: 4rem;
    border-bottom: dotted 0.1rem #ccc
}

#mun-cauhoi div {
    float: left;
    width: 45%;
    clear: none;
}

#mun-cauhoi div:nth-child(2n) {clear: both}
#mun-cauhoi div:nth-child(2n+1) {float: right}



#mun-gia * {float: left}

#mun-gia div {
    width: 50%;
    clear: none;
}

#mun-gia div>*{
    clear: both;
    width: 45rem;
    margin: 0 6rem;
    text-align: center;
}

#mun-gia div span:first-child {
    font-family: hBold;
    font-size: 8rem;
    color: #56bf39;
}

#mun-gia div span:last-child {
    height: 22.5rem;
    border-bottom-left-radius: 45rem;
    border-bottom-right-radius: 45rem;
    background: #abb3aa
}

#mun-gia div label {
    width: inherit;
    text-align: center;
    color: #fff;
    font-size: 3rem;
}

#mun-gia div label:first-child {
    font-size: 5rem;
    font-family: hBold;
    margin-top: 5rem;
}


#mun-hinh img {
    width: 100%;
    min-height: 100%;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
}

#mun-hinh span {
    float: left;
    display: inline-block;
    overflow: hidden;
}

#mun-hinh div:first-child span {
    width: 56.8rem;
    height: 42.6rem;
    margin: 0.1rem;
}

#mun-hinh div:first-child span:last-child {float: right}

#mun-hinh div:last-child span {
    width: 22.6rem;
    height: 22.6rem;
    margin: 0.1rem;
}



@media only screen and (max-width: 640px) {
    #home>div {
        float: left !important;
        width: 100%;
        height: auto;
        clear: both;
    }

    #home .box a {height: calc(100vw/16*9)}

    #home .box span {
        width: 50%;
        height: 50%;
    }


    #home .box a:hover span:before,
    #home .box span:before {height: 70%}

    #home .box span:after,
    #home .box a:hover span:after{font-size: 4vw}


    #homeR {margin-bottom: 5rem}
    #homeR .name {font-size: 4vw}

    #homeR .time .title span:nth-child(1),
    #homeR .hotline * {font-size: 4vw !important;}
    #homeR .hotline {margin: 3vw 0}
    #homeR .hotline span:nth-child(1) {line-height: 1.8}

    #homeR .contact * {font-size: 1rem}

    #homeR .contact>span:nth-of-type(1) {
        font-size: 1.5rem;
    }


    #homeR .time {margin: 3vw 0 0 0}
    #homeR .time .title span:nth-child(2) {font-size: 2.5vw}


    #homeR .time .number div {width: 42vw}

    #homeR .time .number span:nth-child(1),
    #homeR .time .number span:nth-child(3) {
        width: 16vw;
        height: 16vw;
        border-radius: 8vw;
        line-height: 16vw;
        font-size: 4vw
    }

    #homeR .time .number span:nth-child(2) {
        width: 10vw;
        height: 10vw;
        border-radius: 5vw;
        line-height: 10vw;
        margin-top: 3vw;
        font-size: 2.4vw;
    }


    #content .index {
        width: 80%
    }
}