:root {
    --black-max: #050505;
    --black-alpha: rgba(0, 0, 0, 0);
    --black-alpha-05: rgba(0, 0, 0, .05);
    --black-alpha-10: rgba(0, 0, 0, .1);
    --black-alpha-15: rgba(0, 0, 0, .15);
    --black-alpha-20: rgba(0, 0, 0, .2);
    --black-alpha-25: rgba(0, 0, 0, .25);
    --black-alpha-30: rgba(0, 0, 0, .3);
    --black-alpha-35: rgba(0, 0, 0, .35);
    --black-alpha-40: rgba(0, 0, 0, .4);
    --black-alpha-45: rgba(0, 0, 0, .45);
    --black-alpha-50: rgba(0, 0, 0, .5);
    --black-alpha-55: rgba(0, 0, 0, .55);
    --black-alpha-60: rgba(0, 0, 0, .6);
    --black-alpha-65: rgba(0, 0, 0, .65);
    --black-alpha-70: rgba(0, 0, 0, .7);
    --black-alpha-75: rgba(0, 0, 0, .75);
    --black-alpha-80: rgba(0, 0, 0, .8);
    --black-alpha-85: rgba(0, 0, 0, .85);
    --black-alpha-90: rgba(0, 0, 0, .9);
    --black-alpha-95: rgba(0, 0, 0, .95);

    --white-max: #fafafa;
    --white-alpha: rgba(255, 255, 255, 0);
    --white-alpha-05: rgba(255, 255, 255, .05);
    --white-alpha-10: rgba(255, 255, 255, .1);
    --white-alpha-15: rgba(255, 255, 255, .15);
    --white-alpha-20: rgba(255, 255, 255, .2);
    --white-alpha-25: rgba(255, 255, 255, .25);
    --white-alpha-30: rgba(255, 255, 255, .3);
    --white-alpha-35: rgba(255, 255, 255, .35);
    --white-alpha-40: rgba(255, 255, 255, .4);
    --white-alpha-45: rgba(255, 255, 255, .45);
    --white-alpha-50: rgba(255, 255, 255, .5);
    --white-alpha-55: rgba(255, 255, 255, .55);
    --white-alpha-60: rgba(255, 255, 255, .6);
    --white-alpha-65: rgba(255, 255, 255, .65);
    --white-alpha-70: rgba(255, 255, 255, .7);
    --white-alpha-75: rgba(255, 255, 255, .75);
    --white-alpha-80: rgba(255, 255, 255, .8);
    --white-alpha-85: rgba(255, 255, 255, .85);
    --white-alpha-90: rgba(255, 255, 255, .9);
    --white-alpha-95: rgba(255, 255, 255, .95);

    --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; /* #FBEEAC; */

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

/*
===========================
    Fonts
===========================
*/
@font-face {
    font-family: Roboto;
    src: url('font/Roboto-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('font/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('font/Roboto-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('font/Roboto-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('font/Roboto-Black.ttf');
    font-weight: 900;
    font-style: normal;
}



/*
===========================
    Global
===========================
*/

html {font-size: 62.5%;}

html,
body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #fafafa;
}
body {
    background-image: linear-gradient(45deg, rgba(var(--color-primary-light-rgb), .5), var(--white-alpha));
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body[data-hide] {
    height: 100vh;
    overflow: hidden;
}

main {
    background: #fff
}

* {
    font-family: "Roboto", tahoma, sans-serif, arial;
    color: var(--text-color);
    line-height: var(--text-height);
    font-size: var(--text-size);
    outline: none;
}

a {text-decoration: none}

h1, h2, h3 {
    font-weight: 500;
    margin: 0;
    padding: 0;
}

input[type=text],
input[type=password],
textarea {
    box-sizing: border-box
}



/*
--------------------------------
    Class
--------------------------------
*/
.clear {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}


.divTable {display: table; width: 100%}
.divTable>div {display: table-row}
.divTable>div>span {display: table-cell; vertical-align: middle}


.paragraph * {
    float: none;
    max-width: 100%;
    text-align: justify;
}

.paragraph img {
    height: auto !important;
}



.fb-comments {
	width: 100%;
	margin-top: 6rem;
}
.fb-comments iframe {
	width: 100% !important;
}



/*
--------------------------------
    ARROW
--------------------------------
*/
[class*=fs-arrow] {
    position: relative;
    box-sizing: border-box;
}

[class*=fs-arrow]:before,
[class*=fs-arrow]:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


.fs-arrow-up:before,
.fs-arrow-up:after,
.fs-arrow-down:before,
.fs-arrow-down:after {
    width: 0;
    height: 30%;
    border-left-style: solid;
    border-left-width: inherit;
    border-left-color: inherit;
}


.fs-arrow-left:before,
.fs-arrow-left:after,
.fs-arrow-right:before,
.fs-arrow-right:after {
    width: 30%;
    height: 0;
    border-top-style: solid;
    border-top-width: inherit;
    border-top-color: inherit;
}

/* ------------------ */

.fs-arrow-down:before,
.fs-arrow-down:after {
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
}

.fs-arrow-down:before {
    transform: translate3d(-30%,0,0) rotate(45deg);
    -webkit-transform: translate3d(-30%,0,0) rotate(45deg);
}

.fs-arrow-down:after {
    transform: translate3d(30%,0,0) rotate(-45deg);
    -webkit-transform: translate3d(30%,0,0) rotate(-45deg);
}

/* ------------------ */

.fs-arrow-up:before,
.fs-arrow-up:after {
    transform-origin: top;
    -webkit-transform-origin: top;
}

.fs-arrow-up:before {
    transform: translate3d(-30%,0,0) rotate(-45deg);
    -webkit-transform: translate3d(-30%,0,0) rotate(-45deg);
}

.fs-arrow-up:after {
    transform: translate3d(30%,0,0) rotate(45deg);
    -webkit-transform: translate3d(30%,0,0) rotate(45deg);
}

/* ------------------ */

.fs-arrow-left:before,
.fs-arrow-left:after {
    transform-origin: left;
    -webkit-transform-origin: left;
}

.fs-arrow-left:before {
    transform: translate3d(0,30%,0) rotate(-45deg);
    -webkit-transform: translate3d(0,30%,0) rotate(-45deg);
}

.fs-arrow-left:after {
    transform: translate3d(0,-30%,0) rotate(45deg);
    -webkit-transform: translate3d(0,-30%,0) rotate(45deg);
}

/* ------------------ */

.fs-arrow-right:before,
.fs-arrow-right:after {
    transform-origin: right;
    -webkit-transform-origin: right;
}

.fs-arrow-right:before {
    transform: translate3d(0,30%,0) rotate(45deg);
    -webkit-transform: translate3d(0,30%,0) rotate(45deg);
}

.fs-arrow-right:after {
    transform: translate3d(0,-30%,0) rotate(-45deg);
    -webkit-transform: translate3d(0,-30%,0) rotate(-45deg);
}



/*
--------------------------------
    SELECT
--------------------------------
*/
.fs-select {
    width: auto;
    height: 3rem;
    border: solid 1px #000;
    box-sizing: border-box;
    position: relative;
    display: block;
}

.fs-select:before,
.fs-select:after{
    content: '';
    height: 30%;
    border-left-style: solid;
    border-left-width: .1rem;
    border-left-color: inherit;
    position: absolute;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
}

.fs-select:before {
    transform: translate3d(-25%,0,0) rotate(45deg);
    -webkit-transform: translate3d(-25%,0,0) rotate(45deg);
}

.fs-select:after {
    transform: translate3d(25%,0,0) rotate(-45deg);
    -webkit-transform: translate3d(25%,0,0) rotate(-45deg);
}

.fs-select:hover:before,
.fs-select:hover:after {background: #f230d2}

.fs-select select {
    width: 100%;
    height: inherit;
    border: none;
    box-shadow: none;
    font-size: inherit;
    background: transparent;
    padding: 0 3rem 0 1rem;
    position: relative;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.fs-select select:hover {color: #f230d2}

.fs-select option {
    float: left;
    padding: 1rem;
}


/*
--------------------------------
    STAR
--------------------------------
*/
.fs-star label {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 .1rem;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: none !important;
    vertical-align: middle
}

.fs-star [data="0"] {background-image: url('image/icon-star-0.png')}
.fs-star [data="1"] {background-image: url('image/icon-star-1.png')}
.fs-star [data="5"] {background-image: url('image/icon-star-5.png')}


/*
--------------------------------
    COVER IMAGE
--------------------------------
*/
[class*="fs-cover"] {
    width: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

[class*="fs-cover"]>img {display: none}

[class*="fs-cover-1-1"] {padding-bottom: 100%}
[class*="fs-cover-2-3"] {padding-bottom: 150%}
[class*="fs-cover-4-3"] {padding-bottom: 75%}
[class*="fs-cover-16-9"] {padding-bottom: 56.25%}



/*
--------------------------------
    PRODUCT ELEMENTS
--------------------------------
*/
.p-slider .frame {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}
.p-slider .vr-slide-frame-menu {
    width: 100%;
    display: block;
}
.p-slider .vr-slide-frame-menu label {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin: 0 .2em;
    position: relative;
    cursor: pointer;
    float: none;
}
.p-slider .vr-slide-frame-menu label:before {
    content: '';
    width: 30%;
    height: 30%;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.p-slider .vr-slide-frame-menu label[data-active]:before {
    background: var(--color-primary)
}


.fs-product-2 a {
    width: 47%;
}
.fs-product-3 a {
    width: 30%;
}

[class*=fs-product] {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

[class*=fs-product] a {
    transition: .3s ease-out;
    text-align: center;
    margin-top: 3em;
}
[class*=fs-product] a > * {
    display: block;
}

[class*=fs-product] [class^=fs-cover] {
    position: relative;
    background-origin: border-box;
    background-size: contain;
}
[class*=fs-product] [class^=fs-cover]:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s ease-out;
    z-index: 2;
}
[class*=fs-product] a:hover [class^=fs-cover]:before {
    opacity: .25
}

[class*=fs-product] .fs-star {
    margin-top: 1rem !important;
    margin-bottom: 1rem;
}

[class*=fs-product] .p-status {
    text-transform: uppercase;
    font-size: .7em;
	color: var(--color-secondary);
    margin-top: .3em;
}

[class*=fs-product] .p-title {
    margin-top: 1em;
    box-sizing: border-box;
    padding: 0 1em;
	letter-spacing: .02em;
}

[class*=fs-product] a:hover .p-title {
    color: var(--color-primary)
}

[class*=fs-product] .p-sale {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
    margin-top: 0 !important;
}

[class*=fs-product] .p-price {
    font-weight: normal;
    color: var(--color-primary)
}


[class*=fs-product] .p-button {
    display: inline-block;
    padding: 1em 2em;
    border: solid .15rem #999;
    box-sizing: border-box;
    text-transform: uppercase;
    color: #999;
    font-size: 1rem;
    transition: .3s;
    margin-top: 2em;
}

[class*=fs-product] .p-button:hover {
    border-color: #000;
    color: #000;
}
[class*=fs-product] .p-button.remove + .p-button.add {
    margin-top: 1em;
}



/*
--------------------------------
    ARTICLE ELEMENTS
--------------------------------
*/
.fs-article * {
    float: left;
    transition: .3s ease-out;
}

.fs-article a div {
    position: relative;
    box-sizing: border-box;
    transition: .3s ease-out;
    border: solid thin transparent;
}

.fs-article a div:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s ease-out;
}

.fs-article a:hover div:before {opacity: .25}

.fs-article a span {
    width: 10rem;
    height: 8rem;
    background: #fff;
    position: absolute;
    left: 2rem;
    bottom: -2rem;
    z-index: 2;
}

.fs-article a label {
    clear: both;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
}

.fs-article a label:nth-child(1) {
    font-size: 4rem;
    font-weight: 300;
    top: 5%;
}

.fs-article a label:nth-child(2) {
    bottom: 15%;
    font-size: 1rem;
    color: #666;
}

.fs-article a h1 {
    margin-top: 4rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
}

.fs-article a:hover h1 {
    color: var(--color-primary);
}


/*
--------------------------------
    LIST STYLE
--------------------------------
*/

/* ---------- Frame */
.page-frame {
    padding-bottom: 10rem;
    position: relative;
}

.page-frame #nav-product {
    width: 26rem;
    max-height: 100vh;
	overflow: auto;
}

.page-frame>section {
    width: calc(100% - 28rem);
    width: -webkit-calc(100% - 28rem);
    float: right;
    padding-top: 4rem;
    padding-right: 2rem;
}

.page-frame>section>* {
    float: left;
    clear: both;
    width: 100%;
}


/* ---------- Title */
.fs-list-head {margin-bottom: 6rem}

.fs-list-head * {float: left}

.fs-list-head .title {
    white-space: nowrap;
}

.fs-list-head .title a {
    text-transform: uppercase;
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
    color: #000;
    line-height: 3rem;
    transition: .3s ease-out;
}

.fs-list-head .title a:hover {color: var(--color-primary)}

.fs-list-head .title a:nth-child(n+2):before {
    content: '/';
    float: left;
    margin: 0 1rem;
    color: var(--text-color-desc);
}


.fs-list-head .tool {float: right}

.fs-list-head .tool-display input {display: none}

.fs-list-head .tool-display label {
    width: 3rem;
    height: 3rem;
    border: solid thin var(--text-color-desc);
    box-sizing: border-box;
    float: left;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 38%;
    transition: .3s;
}


.fs-list-head .tool-display label[for=tool-display-2] {background-image: url('image/icon-display-2.png')}
.fs-list-head .tool-display label[for=tool-display-3] {background-image: url('image/icon-display-3.png')}

.fs-list-head .tool-display input:checked+label {background-color: var(--text-color-desc)}
.fs-list-head [id=tool-display-2]:checked+label {background-image: url('image/icon-display-2-hover.png')}
.fs-list-head [id=tool-display-3]:checked+label {background-image: url('image/icon-display-3-hover.png')}

.fs-list-head .tool-sort {margin-left: 4rem}

.fs-list-head .tool-sort .fs-select {border-color: var(--text-color-desc)}

.fs-list-head .tool-sort .direct {
    width: 3rem;
    height: 3rem;
    border: solid thin var(--text-color-desc);
    margin-left: .5rem;
}



.fs-list-head.center,
.fs-list-head.center>* {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0;
}

.fs-list-head.center>*>* {
    display: inline-block;
    float: none;
}

.fs-list-head.center .title a {
    font-size: 2.5rem;
}

.fs-list-head.center .tool {
    margin-top: 3rem;
}

.fs-list-head.center .tool-sort {margin-left: 0}




/* ---------- Page */
.fs-list-page {
    margin-top: 5rem;
    border-top: solid thin #e5e5e5;
    text-align: center;
    font-size: 0;
    padding-top: 4rem;
}

.fs-list-page>* {
    display: inline-block;
    text-transform: uppercase;
}

.fs-list-page a {
    color: var(--text-color-desc);
    transition: .3s;
}

.fs-list-page a:hover {color: #000}

.fs-list-page span {
    margin: 0 3rem;
    padding: 0 2rem;
    border: solid thin #e5e5e5;
    border-top: none;
    border-bottom: none;
	font-weight: bold;
}



/*
===========================
    General
===========================
*/
/*
---------------------------
    Wrap
---------------------------
*/
#wrap {
    width: 114rem;
    margin: auto;
    left: 0;
    right: 0;
    float: none;
}

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


/*
---------------------------
    Header
---------------------------
*/
header {
    height: 16rem;
    position: relative;
    /* box-shadow: 0 .2rem .2rem rgba(0,0,0,.1); */
}

header>* {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

header .tool {
    width: 70%;
}

header .logo {
    width: 30%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 40%;
    background-image: url('svg/logo.svg');
    right: 0;
}

header .tool * {float: left}

header .tool>* {
    height: 5rem;
    display: inline-block;
    position: relative;
}

header .tool a>label:first-child,
header .tool input {
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 30%;
    background-color: transparent;
    transition: .3s;
}

header .tool a>label:first-child {
    width: 6rem;
    background-position: center;
    cursor: pointer;
}

header .tool .login {background-image: url('image/icon-user.png')}
header .tool .login:hover {background-image: url('image/icon-user-hover.png')}

header .tool .love {background-image: url('image/icon-love.png')}
header .tool .love:hover {background-image: url('image/icon-love-hover.png')}

header .tool .bag {background-image: url('image/icon-bag.png')}
header .tool .bag:hover {background-image: url('image/icon-bag-hover.png')}

header .tool .bag-value:before {
    content: attr(data-cart-count);
    text-align: center;
}


header input {
    width: 40rem;
    background-position: left center;
    background-image: url('image/icon-search.png');
    border: none;
    margin-left: 5rem;
    padding-left: 3rem;
    box-sizing: border-box;
    border-bottom: dashed thin var(--color-primary);
}

header input:focus {background-image: url('image/icon-search-hover.png');}


header .tool a :nth-child(2)
{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 1;
    font-size: .8em;
    letter-spacing: .05rem;
    color: var(--color-primary);
    cursor: pointer;
}
header .tool a:first-child :nth-child(2) {
    font-size: 1rem;
}

header .tool a:hover :nth-child(2) {
    color: #000;
}



/*
---------------------------
    Footer
---------------------------
*/
footer {
    background: linear-gradient(
            to bottom,
            rgba(var(--color-primary-light-rgb), .4),
            #fff
    );
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

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

footer .s-contact .pack .social .facebook {background-image: url('image/icon-social-facebook.png')}
footer .s-contact .pack .social .youtube {background-image: url('image/icon-social-youtube.png')}
footer .s-contact .pack .social .google {background-image: url('image/icon-social-google.png')}
footer .s-contact .pack .social .instagram {background-image: url('image/icon-social-instagram.png')}

footer .s-info {
    text-align: center;
}
footer .s-info h2 {
    font-size: 2em;
    color: var(--color-primary);
    line-height: 1;
}
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;
    margin-bottom: 5rem;
}

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

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



/*
---------------------------
    Container
---------------------------
*/
main {
    box-sizing: border-box;
}


/* ---------- Main navigation */

#nav-main {
    width: 100%;
    height: 6rem;
    border-bottom: solid thin #e5e5e5;
    background: #fff;
    transform-origin: top;
    -webkit-transform-origin: top;
    transition: .5s;
    text-align: center;
    font-size: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

#nav-main[state=fixed] {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}

#nav-main a {
    height: 100%;
    text-align: center;
    display: inline-block;
    position: relative;
    transition: .5s;
	margin: 0 4rem;
}

#nav-main a.active label {color: var(--color-primary)}

#nav-main label {
    height: 6rem;
    display: inline-block;
    font-weight: 500;
    line-height: 6rem;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    color: #333;
}


#nav-main label:after {
    content: '';
    width: 0;
    height: .4rem;
    background: var(--color-primary);
    position: absolute;
    left: 50%;
    top: -.2rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: .3s ease-out;
}

/*
#nav-main a:before {
    width: .4rem;
    height: .4rem;
    float: left;
    left: -.2rem;
    background: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
*/

#nav-main a:first-child:before {display: none}

#nav-main a:hover label {color: var(--color-primary)}

#nav-main a:hover label:after {width: 100%}


/* ---------- Product navigation */

#nav-product {
    width: 32rem;
    height: 100%;
    position: absolute;
    top: 0;
    font-size: 0;
    background: #fff;
    transition: .5s;
    display: none
}

#nav-product[state*=fixed] {
    position: fixed;
    bottom: 0;
    z-index: 10;
}

#nav-product[state=fixed] {height: 100vh !important;}

#nav-product[state=fixed-header] {
    height: calc(100vh - 5rem) !important;
    height: -webkit-calc(100vh - 5rem) !important;
}

#nav-product>input {display: none}


#nav-product>label {
    width: calc(99.99%/3);
    width: -webkit-calc(99.99%/3);
    height: 4rem;
    background: #F2F2F2;
    border-top: solid .3rem #F2F2F2;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 4rem;
    transition: .3s;
}

#nav-product>label:hover {
    background: #e5e5e5;
}

#nav-product>input:checked+label {
    background: #fff;
    color: #000;
    font-weight: bold;
}

#nav-product>div {
    width: 100%;
    height: calc(100% - 4rem);
    height: -webkit-calc(100% - 4rem);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    display: none;
    font-size: 0;
}

#nav-product [id=nav-tabs-group]:checked ~ .nav-tabs-group,
#nav-product [id=nav-tabs-brand]:checked ~ .nav-tabs-brand,
#nav-product [id=nav-tabs-care]:checked ~ .nav-tabs-care {
    display: block;
}


/* ---------- GROUP NAVIGATION */
#nav-product .nav-tabs-group,
#nav-product .nav-tabs-group * {float: left}

#nav-product .nav-tabs-group a {
    width: 100%;
    padding: .5rem;
    box-sizing: border-box;
    position: relative;
}

#nav-product .nav-tabs-group * {transition: .3s ease-out;}

#nav-product .nav-tabs-group label:nth-child(1) {
    width: 5rem;
    height: 3.75rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#nav-product .nav-tabs-group a:after,
#nav-product .nav-tabs-group label:nth-child(2) {
    width: calc(100% - 7rem);
    width: -webkit-calc(100% - 7rem);
}

#nav-product .nav-tabs-group label:nth-child(2) {
    color: #666;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 7rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#nav-product .nav-tabs-group a:after {
    content: '';
    border-bottom: solid thin #ededed;
    position: absolute;
    right: 0;
    bottom: 0;
}

#nav-product .nav-basic a:hover,
#nav-product .nav-tabs-group a:hover {background: var(--color-primary)}

#nav-product .nav-tabs-group a:hover:after {display: none}

#nav-product .nav-basic a:hover *,
#nav-product .nav-tabs-group a:hover label:nth-child(2) {color: #fff}



/* ---------- BRAND AND CARE NAVIGATION */
#nav-product .nav-basic a {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    clear: both;
    display: block;
    transition: .3s;
}

#nav-product .nav-basic a label {
    color: #666;
}

#nav-product .nav-basic a:nth-child(n+2) {
    border-top: solid thin #ededed;
}




/* ---------- Banner */
/*#banner {*/
    /*float: right;*/
    /*width: calc(100% - 32rem);*/
    /*width: -webkit-calc(100% - 32rem);*/
    /*padding-bottom: calc((100% - 32rem)/16*9);*/
    /*padding-bottom: -webkit-calc((100% - 32rem)/16*9);*/
    /*position: relative;*/
/*}*/

#banner {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
}

#banner div {
    width: 100%;
    font-size: 0;
    text-align: center;
    position: absolute;
    bottom: 3rem;
    z-index: 2;
}


#banner label {
    width: 1rem;
    height: 1rem;
    border: solid thin #fff;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    float: none;
    margin: 0 .7rem;
    transition: .3s ease-out;
    box-shadow: 0 -.1rem .1rem rgba(0,0,0,.1);
}

#banner label[state=active] {
    background: #fff;
}

#banner a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease-in-out;
}

#banner a[state=active] {
    opacity:  1;
    z-index: 1;
}


/*
===========================
    Pages
===========================
*/

/*
---------------------------
    Home
---------------------------
*/
#page-home {
    padding: 0;
    margin-top: 0;
}

#page-home>section,
#page-home .s-data>* {
    width: 100%;
    float: left;
    clear: both;
}

#page-home>section {
    padding: 8rem 0;
    box-sizing: border-box;
}

#page-home .sd-product:nth-of-type(n+2) {
    border-top: solid thin #d9d9d9;;
}

#page-home .s-banner {
    padding: 0;
    background: none;
    border: none;
    position: relative;
}


footer .s-services .title,
#page-home .s-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5em;
    font-weight: normal;
    margin-bottom: 3rem;
    letter-spacing: .1rem;
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    News section
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

#page-home .sd-news {
    border-top-width: .5rem !important;
}

#page-home .sd-news .fs-article a {
    width: calc((96rem / 4) - 4rem);
    width: -webkit-calc((96rem / 4) - 4rem);
    margin: 0 2rem;
}
#page-home .p-slider .frame > a {
    width: 23%
}



/*
---------------------------
    Product
---------------------------
*/

#page-product-favourite .bt-remove {
    text-align: center;
    margin-top: 4rem;
}

#page-product-favourite .bt-remove button {
    float: none;
    width: 50%;
    height: 4rem;
    border: solid .2rem #999;
    color: #999;
    background: transparent;
    text-transform: uppercase;
    font-size: 1rem;
    display: inline-block;
    transition: .3s;
}

#page-product-favourite .bt-remove button:hover {
    border-color: #000;
    color: #000;
}


/*
---------------------------
    Product detail
---------------------------
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Images
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#page-product-detail .pd-images {
    width: 60%;
    height: 0;
    float: left;
    padding-bottom: 45%;
    position: relative;
    text-align: center;
    font-size: 0;
    clear: none;
}

#page-product-detail .pd-images * {
    transition: .5s ease-out;
}

#page-product-detail .pd-images input {display: none}

#page-product-detail .pd-images img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 0;
    opacity: 0;
}

#page-product-detail .pd-images label {
    width: 1rem;
    height: 1rem;
    border-radius: .6rem;
    border: solid thin #fff;
    box-sizing: border-box;
    display: inline-block;
    margin-top: calc((100%*3/4) - 4rem );
    margin-top: -webkit-calc((100%*3/4) - 4rem);
    margin-left: .5rem;
    margin-right: .5rem;
    box-shadow: 0 -.05rem .2rem rgba(0,0,0,.1);
    position: relative;
    z-index: 1;
}

#page-product-detail .pd-images input:checked + label {background: #fff}

#page-product-detail .pd-images input:checked + label + img {opacity: 1}

#page-product-detail .p-slider .frame > a {
    width: 23%
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Information
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#page-product-detail .pd-info {
    width: calc(40% - 3rem);
    width: -webkit-calc(40% - 3rem);
    clear: none;
    float: right
}

#page-product-detail .pd-info .cmd>*,
#page-product-detail .pd-info .info>*,
#page-product-detail .pd-info>* {
    float: left;
    clear: both;
    width: 100%;
}

#page-product-detail .pd-info h1 {
    font-size: 1.5em;
}

#page-product-detail .pd-info div {font-size: 0}

#page-product-detail .pd-info .info {
    margin-top: 3rem;
}

#page-product-detail .pd-info .info>* {
    margin-bottom: 1rem;
}


#page-product-detail .pd-info .info span>label:first-child {
    width: 10rem;
    display: inline-block;
    color: var(--text-color-desc);
}

#page-product-detail .pd-info .price {
    font-size: 1.3em;
    color: var(--color-primary);
    font-weight: 500;
}

#page-product-detail .pd-info .cmd {
    margin-top: 4rem;
}

#page-product-detail .pd-info button {
    background: none;
    border: none;
    margin: 0;
    text-transform: uppercase;
}

#page-product-detail .pd-info .bt-buy {
    height: 6rem;
    background: var(--color-primary);
    color: var(--text-color-light);
}

#page-product-detail .pd-info span [class^=bt] {
    width: 45%;
    height: 4rem;
    border: solid .15rem #000;
    margin-top: 3rem;
}

#page-product-detail .pd-info span [class^=bt] label {
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    padding-left: 1.6rem;
    box-sizing: border-box;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 80%;
}



#page-product-detail .pd-info .bt-share {float: right}

#page-product-detail .pd-info .bt-share label {background-image: url('image/icon-bt-share.png')}
#page-product-detail .pd-info .bt-love label {background-image: url('image/icon-love-hover.png')}
#page-product-detail .pd-info .bt-love.loved label {background-image: url('image/icon-loved.png')}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Content
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#page-product-detail .pd-content {
    margin-top: 5rem;
    text-align: justify;
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Tabs
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#page-product-detail .pd-tabs {
    list-style: none;
    padding: 0;
    margin: 10rem 0 6rem 0;
    border-top: solid thin #000;
    position: relative;
    font-size: 0;
}

#page-product-detail .pd-tabs>input {display: none}

#page-product-detail .pd-tabs>label {
    height: 5rem;
    display: inline-block;
    padding: 0 4rem;
    box-sizing: border-box;
    text-transform: uppercase;
    line-height: 5rem;
    color: #999;
    position: relative;
    top: -5rem;
    transition: .3s ease-out;
}

#page-product-detail .pd-tabs>label:first-of-type {margin-left: 4rem}

#page-product-detail .pd-tabs>input:checked+label {
    background: #fff;
    font-weight: 500;
    border: solid thin #000;
    color: #000;
    border-bottom: none;
}

#page-product-detail .pd-tabs>input:checked+label:after {
    content: '';
    width: 100%;
    height: 0;
    border-bottom: solid .2rem #fff;
    position: absolute;
    left: 0;
    bottom: -.2rem;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    z-index: 0;
}


#page-product-detail .pd-tabs>div {
    width: 100%;
    float: left;
    background: #fff;
    padding: 0 1rem;
    box-sizing: border-box;
    display: none;
}

#page-product-detail .pd-tabs>input[id=pd-review]:checked   ~ .pd-review,
#page-product-detail .pd-tabs>input[id=pd-rate]:checked     ~ .pd-rate,
#page-product-detail .pd-tabs>input[id=pd-qa]:checked       ~ .pd-qa {
    display: block;
}

#page-product-detail .pd-tabs .data {
    max-height: 40rem;
    overflow-y: auto;
}


#page-product-detail .pd-rate * {float: left}

#page-product-detail .pd-review>div>*,
#page-product-detail .pd-review>div,
#page-product-detail .pd-rate .data>div>*,
#page-product-detail .pd-rate .data>div,
#page-product-detail .pd-rate>* {
    clear: both;
    width: 100%
}


#page-product-detail .pd-rate .tool {
    margin-bottom: 4rem;
    text-align: center;
}

#page-product-detail .pd-rate .tool>* {
    height: 3.5rem;
    display: inline-block;
    float: none;
    margin: 0 1rem;
}



#page-product-detail .pd-rate .data>div {
    border-top: solid thin #e5e5e5;
    padding: 1rem 1rem;
    box-sizing: border-box;
}

#page-product-detail .pd-rate .data>div:nth-child(n+2) {margin-top: 2rem}

#page-product-detail .pd-rate .data .title span {
    line-height: 2rem;
}

#page-product-detail .pd-rate .data .title span:nth-child(2) {
    margin-left: 2rem;
    font-weight: bold;
    font-size: 1.4rem;
}

#page-product-detail .pd-rate .data .title span:nth-child(3) {
    float: right;
    font-size: 1rem;
}

#page-product-detail .pd-rate .data .content {
    margin-top: 1rem;
}

#page-product-detail .pd-rate .data .content * {
    float: none;
    color: #666;
}


/* --------------------- */

#page-product-detail .pd-rate .post {margin-bottom: 4rem}

#page-product-detail .pd-rate .post textarea {
    width: calc(100% - 20rem);
    width: -webkit-calc(100% - 20rem);
    height: 12rem;
    padding: 2rem;
    border: solid thin var(--text-color-desc);
    resize: none;
}

#page-product-detail .pd-rate .post textarea:focus {
    border-color: #000;
}

#page-product-detail .pd-rate .post .cmd {
    float: right;
    width: 15rem;
}


#page-product-detail .pd-rate .post .star {
    font-size: 0;
}

#page-product-detail .pd-rate .post .star input {display: none}

#page-product-detail .pd-rate .post .star label {
    width: 2rem;
    height: 2rem;
    margin: 0 .1rem;
    display: inline-block;
    background: url('image/icon-star-0.png') center no-repeat;
    background-size: auto 80%;
}

#page-product-detail .pd-rate .post .star label[data='1'] {
    background-image: url('image/icon-star-1.png');
}


#page-product-detail .pd-rate .post .star-box {
    float: left;
    text-align: left;
}

#page-product-detail .pd-rate .post .star-box>* {
    float: left;
    clear: both;
    width: 100%
}

#page-product-detail .pd-rate .post .star-box>label {
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: .9rem;
}

#page-product-detail .pd-rate .post button {
    width: 100%;
    height: 5rem;
    background: var(--text-color-desc);
    text-transform: uppercase;
    color: #fff;
    border: none;
    margin-top: 2.8rem;
    transition: .3s;
}

#page-product-detail .pd-rate .post button:hover {background: #000}


/* --------------------- */


#page-product-detail .pd-review>div {
    border-top: dashed thin var(--text-color-desc);
    box-sizing: border-box;
}

#page-product-detail .pd-review .title {
    font-weight: bold;
    font-size: 1.4rem;
    padding: 1rem;
}

#page-product-detail .pd-review .title:hover {
    color: var(--color-primary);
    cursor: pointer;
    background: #F2F2F2;
}

#page-product-detail .pd-review .content {
    display: none;
    margin-bottom: 4rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

#page-product-detail .pd-review .title[state=show]+.content {display: block}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The same products
~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#page-product-detail .pd-same > * {
    float: left;
    clear: both;
    width: 100%
}

#page-product-detail .pd-same>label {
    text-transform: uppercase;
    font-size: 1.5em;
    border-top: solid thin #000;
    padding: 1em;
}



/*
---------------------------
    Article
---------------------------
*/
#page-article .fs-article a {
    width: calc((100% - 4rem)/3);
    width: -webkit-calc((100% - 4rem)/3);
    margin-left: 2rem;
}

#page-article .fs-article a:nth-child(n+4) {
    margin-top: 4rem;
}

#page-article .fs-article a:nth-child(3n+1) {
    margin-left: 0;
    clear: left;
}

#page-article .fs-article h1 {text-align: left}



/*
---------------------------
    Article detail
---------------------------
*/
#page-article-detail .a-action,
#page-article-detail .a-title {
    text-align: center;
}

#page-article-detail .a-title label {
    text-transform: uppercase;
    font-size: 1.4em;
    font-weight: bold;
}

#page-article-detail .a-action {
    margin: 3rem 0 6rem 0;
    padding-bottom: 4rem;
    border-bottom: solid thin var(--text-color-desc);
}

#page-article-detail .a-action>button {
    display: inline-block;
    border: solid .2rem #000;
    background: transparent;
    padding: .5rem 3rem;
    box-sizing: border-box;
    text-transform: uppercase;
    opacity: .5;
    transition: .3s;
}

#page-article-detail .a-action>button:hover {opacity: 1}

#page-article-detail .a-action>button>label {
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    padding-left: 1.6rem;
    box-sizing: border-box;
    display: inline-block;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-image: url('image/icon-bt-share.png');
}


/*
---------------------------
    Detail
---------------------------
*/
#page-detail .d-title {
    text-align: center;
    font-size: 0;
}

#page-detail .d-title label {
    font-size: 3rem;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding-bottom: 4rem;
    margin-bottom: 6rem;
}

#page-detail .d-title label:after {
    content: '';
    width: 50%;
    border-bottom: solid .5rem var(--text-color-desc);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}




/*
---------------------------
    Care
---------------------------
*/
#page-care .c-title {text-align: center}
#page-care .c-title label {
    font-size: 3rem;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding-bottom: 4rem;
    margin-bottom: 6rem;
}

#page-care .c-title label:after {
    content: '';
    width: 50%;
    border-bottom: solid .5rem var(--text-color-desc);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


#page-care .c-content {margin-bottom: 6rem}


#page-care [class^=group]>* {
    float: left;
    clear: both;
    width: 100%;
}

#page-care [class^=group] .head {
    border-top: solid .2rem var(--text-color-desc);
    margin-bottom: 1.5rem;
    padding: 1.5rem  2rem 0 2rem;
    box-sizing: border-box;
    transition: .3s;
}


#page-care [class^=group] .head>label:nth-child(1) {
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-color-desc);
}


#page-care [class^=group] .head>label:nth-child(2) {
    float: right;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 2rem;
}

#page-care [class^=group] .head>label:nth-child(2):hover {
    text-decoration: underline;
    cursor: pointer;
}


#page-care [class^=group] .body {
    border-top: solid thin #e5e5e5;
    padding-top: 4rem;
    margin-bottom: 8rem;
    display: none;
}

#page-care [class^=group] .head[state="show"] {
    border-top-color: #000;
}
#page-care [class^=group] .head[state="show"]>label:nth-child(1) {color: #000}
#page-care [class^=group] .head[state="show"]>label:nth-child(2) {display: none}
#page-care [class^=group] .head[state="show"] ~ .body {display: flex}

    /*
    ===========================
        Popup
    ===========================
    */
/*
---------------------------
    Common styles
---------------------------
*/
#popup-member-login>*,
#popup-buy .contact>*,
#popup-buy .hotline>*,
#popup-buy>* {
    float: left;
    clear: both;
    width: 100%
}


#popup-member-login>button {
    height: 5rem;
    background: #000;
    text-transform: uppercase;
    color: #fff;
    border: none;
}


/*
---------------------------
    Buy
---------------------------
*/
#popup-buy {width: 35rem}


#popup-buy .hotline {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: solid thin #000;
}

#popup-buy .hotline label:nth-child(1) {
    font-weight: bold;
    font-size: 3rem;
}

#popup-buy .hotline label:nth-child(2) {
    text-transform: uppercase;
    font-size: 1rem;
}

#popup-buy .contact>* {
    margin-bottom: .3rem
}



/*
---------------------------
    Member
---------------------------
*/
#popup-member-login {
    width: 30rem;
}

#popup-member-login>h1 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 3rem;
    font-weight: bold;
}

#popup-member-login>input[type=text] {
    height: 3rem;
    border: none;
    border-bottom: dashed thin #000;
    padding: 0 1rem;
    margin-bottom: 1.5rem;
    transition: .3s;
}

#popup-member-login>input[type=text]:focus {
    border-bottom-style: solid;
    font-weight: bold;
}

#popup-member-login>button {margin-top: 3rem}




/*
---------------------------
    Contact
---------------------------
*/
#popup-contact {
    width: 70rem;
    height: auto;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
}

#popup-contact .L {
    width: 50%;
}

#popup-contact .L>*,
#popup-contact .L .content>*
{
    float: left;
    clear: both;
    width: 100%;
}

#popup-contact .L .content {
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#popup-contact .L .content>*
{
    text-align: center;
    margin-top: 1.5rem;
}

#popup-contact .logo a {
    width: 100%;
    height: 10rem;
    background-image: url('svg/logo.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    display: inline-block;
}

#popup-contact .sologan {
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .1rem;
    margin-top: 2rem;
}

#popup-contact .social a {
    width: 4rem;
    height: 4rem;
    border: solid .2rem #000;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 40%;
    transition: .3s ease-out;
}

#popup-contact .social .facebook {background-image: url('image/icon-social-facebook.png')}
#popup-contact .social .youtube {background-image: url('image/icon-social-youtube.png')}




#popup-contact .R {
    width: 50%;
}

#popup-contact .R > * {
    float: left;
    clear: both;
    width: 100%;
}

#popup-contact .info * {text-align: left}

#popup-contact .info h1 {
    font-weight: bold;
    font-weight: normal;
    font-size: 3rem;
    margin: 0;
    padding: 0;
}

#popup-contact .info h1:after {
    content: '';
    width: 40%;
    height: .2rem;
    background: #000;
    display: block;
    margin: 1.5rem 0;
}

#popup-contact .info-item {
    display: grid;
    grid-template-columns: 6rem auto;
    grid-row-gap: .5em;
}
#popup-contact .info-item label {
    font-size: .8em;
    color: var(--text-color-desc)
}



#popup-contact form {margin-top: 4rem}

#popup-contact form>* {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 1.5rem;
}

#popup-contact form>div input:first-child {
    width: 60%;
    float: left;
}
#popup-contact form>div input:last-child {
    width: 30%;
    float: right;
}

#popup-contact form textarea,
#popup-contact form input {
    border: none;
    border-bottom: dashed thin #000;
    outline: none;
    color: #000;
}

#popup-contact form textarea:focus,
#popup-contact form input:focus {
    border-bottom-style: solid;
    font-weight: bold;
}

#popup-contact form input {height: 2rem}

#popup-contact form textarea {
    height: 8rem;
    resize: none;
}

#popup-contact form button {
    margin-top: 2rem;
    width: auto;
    height: 4rem;
    padding: 0 4rem;
    border: solid .2rem #000;
    color: #1a1a1a;
    background: none;
    text-transform: uppercase;
    transition: .3s ease-out;
    margin-bottom: 0;
}

#popup-contact form button:hover {
    background: #000;
    color: #fff;
}



/*
===========================
    Search
===========================
*/
#page-search {
    padding-bottom: 10rem;
}

#search-filter {
    float: left;
    width: 24rem;
}

#search-filter[state*=fixed] {
    position: fixed;
    bottom: 0;
    z-index: 10;
}

#search-filter[state=fixed] {
    height: 100vh !important;
    padding-top: 2rem;
    box-sizing: border-box;
}

#search-filter[state=fixed-header] {
    height: calc(100vh - 7rem) !important;
    height: -webkit-calc(100vh - 7rem) !important;
}

#search-filter .f-list {
    max-height: calc((100vh - 10rem)/2);
    overflow-y: auto;
    overflow-x: hidden;
}
#search-filter[state=fixed-header] .f-list {
    max-height: calc((100vh - 15rem)/2);
}

#search-filter .f-list>*,
#search-filter>div {
    clear: both;
    width: 100%;
    display: block;
}

#search-filter>div:nth-child(n+2) {margin-top: 2rem}

#search-filter .f-title {font-size: 0}

#search-filter .f-title>* {display: inline-block}

#search-filter .f-title h2 {
    width: 70%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

#search-filter .f-title a {
    width: 30%;
    text-transform: uppercase;
    font-size: .9rem;
    text-align: right;
}

#search-filter .f-title a:hover {text-decoration: underline}


#search-filter .f-list label {
    line-height: 2.5rem;
    font-size: 0;
    padding-left: 1rem;
    box-sizing: border-box;
}

#search-filter .f-list label * {
    display: inline-block;
    vertical-align: middle;
}

#search-filter .f-list label input:checked ~ span {
    font-weight: bold;
    color: var(--color-primary);
}

#search-filter .f-list label span {margin-left: .5rem}
#search-filter .f-list label span:nth-of-type(2) {color: #999}
#search-filter .f-list label span:nth-of-type(2):before {content: '('; margin-right: .2rem}
#search-filter .f-list label span:nth-of-type(2):after {content: ')'; margin-left: .2rem}


#search-data {
    width: calc(100% - 27rem);
    width: -webkit-calc(100% - 27rem);
    float: right;
}

#search-data>* {
    float: left;
    clear: both;
    width: 100%;
}

#search-data .head {
    border-bottom: solid .2rem var(--text-color-desc);
    padding-bottom: 2rem;
    margin-bottom: 5rem;
    box-sizing: border-box;
}


#search-data .head .title {
    float: left;
    font-size: 2rem;
    font-weight: 300;
}

#search-data .head .title span {
    font-size: inherit;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0 .5rem;
    float: none;
}

#search-data .head .tool {
    float: right;
}

#search-data .fs-list-page {margin-top: 5rem}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  Bag
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
#bag {
    --bag-width: 48rem;
    --header-height: 8rem;

    width: var(--bag-width);
    height: 100%;
    background: #fff;
    position: fixed;
    right: calc(-1*var(--bag-width));
    top: 0;
    z-index: 110;
    transition: .3s ease-in-out;
}
#bag * {
    box-sizing: border-box;
}
#bag:before {
    content: '';
    background: #000;
    opacity: 0;
    transition: .3s ease-in-out;
}
#bag[data-show] {
    right: 0;
}
#bag[data-show] > * {
    background: #fff;
    position: relative;
    z-index: 1;
}
#bag[data-show]:before {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 0;
    opacity: .4;
}

#bag .cmd {
    text-align: center;
    margin-top: 1.5rem;
}

#bag .btn {
    max-width: 24rem;
    padding: 1.5rem 3rem;
    background: var(--color-primary);
    color: var(--text-color-light);
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: .05em;
    box-shadow: 0 .3rem .3rem rgba(0,0,0,.15);
    cursor: pointer;
    transition: .3s ease-in-out;
}


#bag .head {
    height: var(--header-height);
    border-bottom: solid 1px #f0f0f0
}
#bag .head > :nth-child(1),
#bag .head > :nth-child(3) {
    width: var(--header-height);
}
#bag .head > :nth-child(2) {
    width: calc(100% - 2*var(--header-height));
    text-align: center;
    font-weight: 200;
    font-size: 1.3em;
}

#bag .head i {
    font-size: 1.8em;
}
#bag .head img {
    max-height: 2rem;
}


#bag .body {
    height: calc(100% - var(--header-height) - 12rem);
    overflow-x: hidden;
    overflow-y: auto;
}
#bag .body .item {
    padding: 2rem;
}
#bag .body .item:nth-child(n+2) {
    border-top: dashed 1px #ebebeb;
    padding-top: 2rem;
}
#bag .body .item .cover {
    text-align: center;
}
#bag .body .item .cover img {
    max-width: 70%;
}
#bag .body .item .price {
    font-size: .8em;
    color: #666;
    margin-top: .5rem;
}
#bag .body .item .price sup {
    font-size: 1em;
    color: inherit;
}

#bag .body .item .action {
    margin-top: 1rem;
}
#bag .body .item .action input {
    width: 6rem;
    height: 2.5rem;
    border: solid 1px #ebebeb;
    border-radius: .3rem;
    padding: 0 1rem;
    text-align: center;
}
#bag .body .item .action .remove {
    width: 2em;
    text-align: center;
    cursor: pointer;
}
#bag .body .item .action .remove i {
    font-size: 1.3em;
}

#bag .body .empty {
    width: 80%;
    font-size: 1.3em;
    font-weight: 200;
    color: #999;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#bag .body .stock {
	margin-left: 2rem;
}
#bag .body .stock * {
	font-size: .8em;
	color: #666
}


#bag .foot {
    height: 12rem;
    border-top: solid 1px #f0f0f0;
    padding: 1rem 2rem;
}
#bag .foot .total > :first-child {
    font-size: 1em;
}
#bag .foot .vr-cart-total:after {
    content: 'đ';
    margin-left: .2em;
    vertical-align: super;
    font-size: .8em;
}
#bag .foot .cmd .btn:nth-child(n+2) {
    margin-left: 2rem;
}
#bag .foot [disabled] {
    background: #ccc;
    pointer-events: none;
}


#bag .private {
    width: 100%;
    height: calc(100% - var(--header-height));
    background: #f5f5f5;
    padding: 0 3em;
    position: absolute;
    top: var(--header-height);
    right: calc(-1*var(--bag-width));
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    transition: inherit;
}

#bag .private[data-show] {
    right: 0
}
#bag .private input,
#bag .private textarea {
    width: 100%;
    height: 4.5rem;
    font-size: 1em;
    border: solid 1px #e5e5e5;
    border-radius: .3rem;
    padding: 0 1em;
    background: #fff;
}
#bag .private textarea {
    height: 10rem;
    padding: 1em;
}

#bag .private .back {
    text-align: center;
    margin-bottom: 1em;
    cursor: pointer;
    margin-top: 2em;
}
#bag .private .info > :nth-child(n+2) {
    margin-top: 1em
}

#bag .private .cmd {
	margin-bottom: 3rem;
} 
#bag .private .save {
    display: flex;
    align-items: center;
    font-size: .8em;
    margin-top: 1em;
    margin-bottom: 1.5em;
}
#bag .private .save input {
    width: auto;
    height: auto;
    margin-right: 1em;
}