/*
===========================
    Fonts
===========================
*/
@font-face {
    font-family: Roboto;
    src: url('https://849010.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/font/Roboto-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('https://58cb93.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/font/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('https://31f633.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/font/Roboto-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('https://a4e9e4.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/font/Roboto-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    src: url('https://20a89e.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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: #fff;
}
body[data-hide] {
    height: 100vh;
    overflow: hidden;
}

* {
    font-family: "Roboto", tahoma, sans-serif, arial;
    color: #000;
    line-height: 1.35;
    font-size: 1.3rem;
    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('https://310a39.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-star-0.png')}
.fs-star [data="1"] {background-image: url('https://f23aa8.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-star-1.png')}
.fs-star [data="5"] {background-image: url('https://24ed7f.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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: #ff4cc9
}


.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: #ff4cc9;
    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: #ff4cc9;
    margin-top: .3em;
}

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

[class*=fs-product] a:hover .p-title {
    color: #ff4cc9
}

[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: #000
}


[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: #ff4cc9;
    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: #ff4cc9;
}


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

/* ---------- Frame */
.page-frame {
    margin-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;
}

.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: #ff99e0}

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


.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 #b3b3b3;
    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('https://384b59.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-display-2.png')}
.fs-list-head .tool-display label[for=tool-display-3] {background-image: url('https://ce57a6.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-display-3.png')}

.fs-list-head .tool-display input:checked+label {background-color: #b3b3b3}
.fs-list-head [id=tool-display-2]:checked+label {background-image: url('https://345461.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-display-2-hover.png')}
.fs-list-head [id=tool-display-3]:checked+label {background-image: url('https://d641d0.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-display-3-hover.png')}

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

.fs-list-head .tool-sort .fs-select {border-color: #b3b3b3}

.fs-list-head .tool-sort .direct {
    width: 3rem;
    height: 3rem;
    border: solid thin #b3b3b3;
    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: #b3b3b3;
    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: 96rem;
    margin: auto;
    left: 0;
    right: 0;
    float: none;
}

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


#fb-chat {
    width: 28rem;
    position: fixed;
    right: 2rem;
    bottom: 0;
    z-index: 100;
}

#fb-chat .fb-head {
    width: 100%;
    height: 4rem;
    background: #ff99e0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#fb-chat .fb-head>label {
    float: left;
    height: 100%;
    line-height: 4rem;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    box-sizing: border-box;
}

#fb-chat .fb-head label:nth-child(1) {
    padding-left: 5rem;
    background-position: 2rem center;
    background-repeat: no-repeat;
    background-image: url('https://ca82f7.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-chat.png');
    background-size: auto 40%;
}

#fb-chat .fb-head label:nth-child(2) {
    width: 4rem;
    float: right;
}

#fb-chat .fb-head label:nth-child(2):before,
#fb-chat .fb-head label:nth-child(2):after {
    content: '';
    border-width: .2rem;
    border-color: #fff;
    height: 25%;
}

#fb-chat .fb-head[state=show]+div {display: block}

#fb-chat .fb-page {
    display: none;
}


/*
---------------------------
    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('https://2e9168.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/logo.png');
    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('https://d34879.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-user.png')}
header .tool .login:hover {background-image: url('https://0b32aa.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-user-hover.png')}

header .tool .love {background-image: url('https://cb97fc.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-love.png')}
header .tool .love:hover {background-image: url('https://05ccd5.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-love-hover.png')}

header .tool .bag {background-image: url('https://4f692e.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-bag.png')}
header .tool .bag:hover {background-image: url('https://5d8fd2.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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('https://9b7c7c.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-search.png');
    border: none;
    margin-left: 5rem;
    padding-left: 3rem;
    box-sizing: border-box;
    border-bottom: dashed thin #d9d9d9;
}

header input:focus {background-image: url('https://848f89.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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-weight: 500;
    font-size: .7rem;
    letter-spacing: .05rem;
    color: #ff4cc9;
    text-transform: uppercase;
    cursor: pointer;
}

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



/*
---------------------------
    Footer
---------------------------
*/
footer * {float: left}

footer>*,
footer .s-services>* {
    clear: both;
    width: 100%
}


footer .s-services {
    background: #e5e5e5;
}

footer .s-services .title {
    margin: 6rem 0;
}

footer .s-services .content {
    margin-bottom: -5rem;
}

footer .s-services .content a {
    width: calc((96rem / 3) - 4rem);
    width: -webkit-calc((96rem / 3) - 4rem);
    margin: 0 2rem;
    transition: .3s ease-out;
    position: relative;
}

footer .s-services .content .vr-slide-frame {
    float: none
}
/*
footer .s-services .content a:hover {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    box-shadow: 0 0 2rem rgba(0,0,0,.2);
}
*/

footer .s-services .content a span {position: relative}

footer .s-services .content a label {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-weight: 500;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    background: #ff99e0;
}


footer .s-contact {
    margin-top: 15rem;
    margin-bottom: 7rem;
}

footer .s-contact .pack {
    width: calc((100% / 3) - 4rem);
    width: -webkit-calc((100% / 3) - 4rem);
    margin: 0 2rem;
}

footer .s-contact .pack * {
    float: left;
    clear: both;
}

footer .s-contact .pack>label,
footer .s-contact .pack>div>label {
    text-transform: uppercase;
}

footer .s-contact .pack>label {
    font-size: 1.5em;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: solid .3rem #b3b3b3;
}

footer .s-contact .pack>div>label {
    font-size: 1.2em;
    margin-bottom: 1rem;
}

footer .s-contact .pack span {
    color: #666;
    font-weight: 300;
    letter-spacing: .05rem;
    line-height: 1.5;
}

footer .s-contact .pack .social {
    margin-top: 2rem
}

footer .s-contact .pack .social a {
    width: 3rem;
    height: 3rem;
    border: solid .2rem #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 40%;
    display: inline-block;
    margin-left: 1rem;
    clear: none;
}

footer .s-contact .pack .social a:first-child {margin-left: 0}

footer .s-contact .pack .social .facebook {background-image: url('https://2ff6a4.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-social-facebook.png')}
footer .s-contact .pack .social .youtube {background-image: url('https://ea4861.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-social-youtube.png')}
footer .s-contact .pack .social .google {background-image: url('https://aa492f.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-social-google.png')}
footer .s-contact .pack .social .instagram {background-image: url('https://ae1094.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-social-instagram.png')}


footer .s-copyright {
    height: 6rem;
    line-height: 6rem;
    border-top: solid thin #e5e5e5;
    text-align: center;
    margin-bottom: 5em;
}

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;
    margin-top: 8rem;
}


/* ---------- Main navigation */
#nav-main {
    height: 6rem;
    border-bottom: solid thin #e5e5e5;
    border-top: solid thin #e5e5e5;
    background: #fff;
    transform-origin: top;
    -webkit-transform-origin: top;
    transition: .5s;
	text-align: center;
    font-size: 0;
}

#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: #ff99e0}

#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: #ff99e0;
    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: #ff99e0}

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

#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: #ff99e0}

#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 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: #b3b3b3;
}

#page-product-detail .pd-info .price {
    font-size: 1.3em;
}

#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: #000;
    color: #fff;
    font-size: 1.4rem;
}

#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('https://23501b.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-bt-share.png')}
#page-product-detail .pd-info .bt-love label {background-image: url('https://05ccd5.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-love-hover.png')}
#page-product-detail .pd-info .bt-love.loved label {background-image: url('https://1ad3b9.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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 #b3b3b3;
    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('https://310a39.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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('https://f23aa8.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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: #b3b3b3;
    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 #b3b3b3;
    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: #ff4cc9;
    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 #b3b3b3;
}

#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('https://23501b.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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 #b3b3b3;
    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 #b3b3b3;
    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 #b3b3b3;
    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: #b3b3b3;
}


#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('https://2e9168.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/logo.png');
    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('https://2ff6a4.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/image/icon-social-facebook.png')}
#popup-contact .social .youtube {background-image: url('https://ea4861.claudeassets.com/20260410115814im_/https://www.myphamhoamai.com/theme/style/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: 20%;
    height: .5rem;
    background: #000;
    display: block;
    margin: 1.5rem 0;
}

#popup-contact .info div>* {
    float: left;
    clear: both;
    margin-top: .3em;
}

#popup-contact .info>div:first-of-type{float: left}



#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: #ff4cc9;
}

#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 #b3b3b3;
    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: #ff4cc9;
    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;
    --color-medium: #000;

    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-medium);
    color: #fff;
    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;
}

/*
     FILE ARCHIVED ON 03:21:36 Aug 19, 2024 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 09:39:46 Jul 07, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.915
  exclusion.robots: 0.108
  exclusion.robots.policy: 0.09
  esindex: 0.015
  cdx.remote: 7.259
  LoadShardBlock: 195.871 (3)
  PetaboxLoader3.datanode: 155.653 (5)
  PetaboxLoader3.resolve: 381.226 (3)
  load_resource: 348.659
  loaddict: 47.693
*/