/* Let's get this party started */
::-webkit-scrollbar {
    width: 7px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.6); 

}
 
/* Handle */
::-webkit-scrollbar-thumb {

 background: rgba(30,115,190,1); 
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.6); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(30,115,190,1); 
}

html, body, p, ul, ol, blockquote, span {font-family: 'Mulish', sans-serif !important; text-align: justify;}
/* .header-main {display: none !important} */
.nav-center {text-align: center}
.nav-center img {padding: 10px; max-width: 55% !important}
@media (max-width: 849px) {
    [data-show="hide-for-medium"], .hide-for-medium {
        display: block !important;
    }
}

.johnny-h1 {
    font-family: "Spicy Rice", serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    font-size: 30px;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 50%;
    padding-top: 10px;
	    text-shadow: 2px 1px 3px #000;
}

.johnny-h2 {
   font-family: "Neucha", serif;
  font-weight: 400;
  font-style: normal;
	    color: #000;
    font-size: 22px;
	text-shadow: 1px 1px 3px #fff;
}

.johnny-header-top-bar {
	background: url(https://hoianspa.beauty/wp-content/uploads/2025/01/Spa-Background-Top.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
	margin-bottom: 15px;
	padding: 10px;
	padding-bottom: 17px;
	text-align: center;
}

.johnny-google a {
	background: orange;
    padding: 5px;
    margin-right: 10px;
    font-weight: 700;
    box-shadow: 2px 1px 5px #fff;
    padding-left: 7px;
    padding-right: 7px;
	color: #fff;
}

.johnny-contact a {
	background: orange;
    padding: 5px;
    margin-left: 10px;
    font-weight: 700;
    box-shadow: 2px 1px 5px #fff;
    padding-left: 7px;
    padding-right: 7px;
	color: #fff;
}

.page-wrapper {
    padding-top: 15px;
    padding-bottom: 0px;
}
.johnny-contact a:hover, .johnny-google a:hover {background: yellow; color: blue}


.languagetop {text-align: center; margin-bottom: 15px}
.languagetop a {
    color: green;
    margin-right: 10px;
	font-size: 12px;
    font-weight: 700;
}

.languagetop a:hover {color: blue}

.languagetop a:last-child {
    margin-right: 0;
}
li {line-height: 120%}
li::marker {
  color: #0f4900;
}

ul.johnny-promo {
  list-style-type: square;

}
ul li {	  font-family: "Barlow Condensed", serif;
  font-weight: 500;
  font-style: normal;
    font-size: 18px;
    text-align: justify;
}
.row-a-title {
	margin-top: 15px !important;
	margin-bottom: 0;
}
.muc-a, .muc-b {color: #0f4900; padding: 5px; padding-left: 8px; padding-right: 8px}
.muc-a {background: #ebebeb}
.muc-b {background: #c3c3c3}

.nav>li {text-align: center}

@media screen and (max-width: 849px) {
    .coll-aloha .col {
        padding-bottom: 10px;
    }
}



.johnny-promo2 {margin-bottom: 0; margin-top: 10px}

.contactuspage ul {
    padding-left: 0;
}

    
	
	 .contactuspage ul li {
        border-bottom: 1px solid #c0c0c0;
    }


.contactuspage ul { margin-bottom: 0;     padding-right: 15px;}
.contactuspage li {
    list-style: none;
}
.contactuspage li {
   font-family: "Barlow Condensed", serif;
    font-size: 19px;
    line-height: 150%;
	margin-left: 0;
}
p.aloha-footer {text-align: center !important; margin-bottom: 0}

.contactuspage li .fas {margin-right: 5px}
.contactuspage {border: 2px solid green;     padding-top: 10px;}

.see-menu {    background: green; padding: 5px; margin-bottom: 10px}
.see-menu a {
	font-size: 1rem;
    color: #fff !important;    
    font-weight: 500;
}
.see-menu a:hover {color: yellow !important}

.contactuspage ul li {font-weight: 400}

div.licontact2  {
    background: #fff url(https://hoianspa.beauty/wp-content/uploads/2025/01/greentea-11.jpg);
    background-size: cover;
    background-repeat: no repeat;
    background-position: center right;
    box-shadow: 1px 1px 10px #f8ee7e;
    padding: 12px;
}

.licontact2 li:before {
    color: #097200;
}

.licontact2 li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f14a";
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    font-weight: 900;
	
}

.licontact2 ul {margin-bottom: 0}
.licontact2 ul li:last-child {margin-bottom: 0;}
.licontact2 ul li { font-weight: 400 !important; list-style: none; margin-left: 5px}

.col {padding-bottom: 20px}
.ctf7-col, form {padding-bottom: 0 !important}

.johnny-header-top-bar span, .johnny-header-top-bar p {text-align: center}

.footer-call {
    position: fixed;
    width: 100% !important;
    background: #1e73be;
    display: inline-flex;
    left: 0;
    bottom: 0px;
    z-index: 99;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.75);
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.75);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.footer-call-div1 {
    border-right: 1px dotted #fff;
}
.footer-call-div1, .footer-call-div2 {
    display: inline-block;
    width: 49.4%;
    text-align: center;
	padding-top: 5px; 
	padding-bottom: 2px;
}

.footer-call .col {padding-bottom: 0}

.footer-call a {
	 font-family: "Neucha", serif;
  font-weight: 400;
  font-style: normal;
	color: #fff;
	font-size: 15pt;
}

.footer-call a:hover {color: orange}

@media screen and (min-width: 550px) {
	.footer-call {display: none}

}

.back-to-top {

    bottom: 50px;
    right: 10px;
}
@media screen and (max-width: 549px) {
.copyright-footer {margin-bottom: 40px}
	}

#icon-fixed ul li {list-style: none}


#icon-fixed ul li {
    margin-bottom: 4px;
}

#icon-fixed img
{filter: drop-shadow(2px 2px 4px #000);}

#icon-fixed ul li {
    padding-bottom: 15px;
}

#icon-fixed {
    position: fixed;
    right: 10px;
    bottom: 100px;
    z-index: 10000;
}

#icon-fixed ul li.line139 a img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 4px solid #06c755;
    background: #06c755;
}
#icon-fixed ul li a img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 4px solid #0180c7;
    background: #0180c7;
}

#icon-fixed ul li.whatapp-ka a img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 4px solid #fbe300;
    background: #fbe300;
}

#icon-fixed ul li.whatapp-new a img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 4px solid #65bc54;
    background: #65bc54;
}

.wpcf7 .wpcf7-not-valid-tip {margin-bottom: 10px}
.wpcf7-not-valid-tip {font-size: .8em}

input::placeholder {font-size: 11pt}

.text-share p {font-size: 11pt; line-height: 130%}

.tblkeyword a.keyword {
    background: #727272;
    padding: 5px;
    color: #fff;
    font-size: 10pt;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
	line-height: 250%;
	    white-space: nowrap;
    overflow: hidden;
	margin-right: 5px;
}

.tblkeyword a:hover {color: blue;  background: #aeaeae;}
.tblkeyword {text-align: left; margin-top: 35px}

@media (max-width: 549px) {
    .page-id-1146 h3.section-title.section-title-center {
        font-size: 1.2em;
    }
	 .page-id-1181 h3.section-title.section-title-center {
        font-size: 1.2em !important;
    }
	.page-id-1181 .see-menu a {
        font-size: 1.05rem !important;
    }
}

 .page-id-1146 ul li
{
  font-family: "Noto Sans TC", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
	font-size: 15px;
}

 .page-id-1181 ul li
{
 font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
	font-size: 16px;
}

.gt_switcher {margin: 0 auto; width: 130px !important; float: right; border: 1px solid #1e73be;}

.gt_switcher .gt_selected a {width: 115px !important; border: 1px solid #1e73be;}
.grecaptcha-badge {visibility: hidden}

.see-menu2 ul li {
   
    font-weight: 400;
   
    font-size: 17px;
  
}

.font-tdogiua a {
    font-size: 19px;
  
    font-family: "Barlow Condensed", serif;
    font-weight: 600;
    background: #e1e1e1;
    padding: 10px;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 32px;
    line-height: 180%;
}
.massage-info {
    text-transform: initial;
    font-size: 15px;
    text-align: left;
    text-shadow: none;
    line-height: 150%;
    padding: 10px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 10px !important;
    box-shadow: 1px 1px 10px #c0c0c0;
    background: rgba(255, 255, 255, 0.5);
}


del.giamgia30O {
    color: #272727;
    font-weight: 500;
	font-size: 22px;
}
del.giamgia30O:after {
    content: "\A";
    white-space: pre;
}

.gia-tdogiua 
{
  
    font-size: 22px;
    font-weight: 500;
    color: red;
	    font-family: "Barlow Condensed", serif;
}

th.font-tdogiua {padding-top: 10px; border-bottom: 1px solid green}
.see-menu2 ul {margin-bottom: 0}
.home-return a {
    float: left;
    font-size: 16px;
    text-transform: uppercase;
   
	color: #fff;
    background: #1e73be;
    padding-left: 7px;
    padding-right: 7px;
    font-family: "Barlow Condensed", serif;
	font-weight: 500;
}
.home-return {float: left}
.home-return a:hover {color: yellow}
.page-id-1209 .languagetop, .page-id-1260 .languagetop, .page-id-1290 .languagetop, .page-id-1315 .languagetop, .page-id-1356 .languagetop, .page-id-1388 .languagetop {min-height: 21px}

.wpcf7 form .wpcf7-response-output {
    margin: 1em 0.5em 1em !important;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2 !important;
}

.fonttd-bd td {padding-top: 10px;    border-bottom: 1px solid green; text-transform: uppercase; letter-spacing: .05em;}
.tbl-waxing table td {padding-top: 10px;    border-bottom: 1px solid green; text-transform: uppercase; letter-spacing: .05em;}
tr.tbl-coll-2 td {padding-top: 10px;    border-bottom: 1px solid green; text-transform: uppercase; letter-spacing: .05em;}
.fonttd-bd td.gia-tdogiua, .tbl-waxing table td.gia-tdogiua, tr.tbl-coll-2 td.gia-tdogiua {text-transform: lowercase}
.fonttd-bd td span
{line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase; font-weight: 700}
.phut-tdogiua {padding: .5em; padding-left: .5em !important}
.tg-0lax.tg-khanhax {padding-top: 20px}
.tg-0lax.tg-khanhax li {margin-bottom: 20px; list-style: none}
.tg-0lax.tg-khanhax li:last-child {margin-bottom: 0}

@media (max-width: 549px) {
    h3 {
        font-size: 1.2em;
    }
}



/* Korean */
.fonttd-bd tr.td-giua-ngoaile td {border-bottom: 1px solid #ececec;}

.page-id-1260 .see-menu2 ul li {
    font-weight: 400;
    font-size: 15px;
}

.page-id-1260 ul li {font-family: inherit; font-size: 15px}

.onlyrights {
    position: fixed;
    z-index: 8;
    bottom: 50%;
    left: 0;
    opacity: 0.8;
}

@media only screen and (max-width: 500px) {
    .onlyrights img.onlyrights-img {
        max-width: 92%;
    }
}

@media screen and (max-width: 405px) {
	.page-id-1260 .massage-info {font-size: 14px !important;}
	.page-id-1260 .gia-tdogiua, .page-id-1260 del.giamgia30O {font-size: 20px !important}
}
.dong-korean {margin-left: 4px; font-size: 10pt}
/* end Korean */

/* Taiwan */
.dong-taiwan {margin-left: 4px; font-size: 11pt}

/* End Taiwan */

/* Formenu */
.header-main {height: auto}
.header-main #logo {display: none !important}
@media screen and (max-width: 1024px) {
	.header-main .header-nav {display: none !important}
}

@media screen and (max-width: 849px) {
.header-main {
    position: absolute !important;
    top: 20px;
    z-index: 999;
}
	
	.mobile-nav .button.icon.is-small {

    border-color: #fff;
}

.button.primary:not(.is-outline) {background: #0aaeb4}
	
	.header.show-on-scroll, .stuck .header-main {    height: auto !important;}
}
	
	@media (max-width: 549px) {
    .header-main {
        height: auto;
		 top: 8px;
    }
		.header.show-on-scroll, .stuck .header-main {    height: auto !important;}
}

@media (max-width: 400px) {
.footer-call-div1, .footer-call-div2 {

    width: 49%;

}}

/* end for menu */
.tendoanhnghiep {
	font-size: 15px !important;
	color: green;
	text-align: center;
}

/* for shampoo */
.page-id-1412 #top-bar {border-bottom: 1px solid #fff}
.page-id-1412 #top-bar {background: #6f3b16}
.page-id-1412 .button.primary:not(.is-outline) {background: #a66926}

@media screen and (max-width: 549px) {
   .page-id-1412 .y90 {
        bottom: 15%;
    }
}

 .page-id-1412 p.lead,  .page-id-1412 a.lead  {
    font-size: 1.5em;
}

.page-id-1412 p.gt-01 {font-size: 11pt !important; margin-bottom: 0}
.page-id-1412 p.gt-01:last-child {margin-bottom: 15px}
.page-id-1412 .bannerlast .col {padding-bottom: 0 !important}

.page-id-1412 .cot-so-3 {background: rgba(0,0,0,0.6); margin-bottom: 10px}
.page-id-1412 .y90 .button {font-size: 1.2em}

/* language */

.nav-wrapper {
  width: 100%;
  padding-top: 6px;
	padding-left: 15px;
	   text-align: left;
	color: #fff;
	max-height: 35px;
}

  .sl-nav {
  display: inline;
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.sl-nav li {
  cursor: pointer;
  padding-bottom:10px;
}
.sl-nav li ul {
  display: none;
}
.sl-nav li:hover ul {
  position: absolute;
  top:29px;
  right:-15px;
  display: block;
  background: rgba(255,255,255,1);
  width: 138px;
  padding-top: 0px;
  z-index: 1;
  border-radius:5px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.sl-nav li:hover .triangle {
  position: absolute;
  top: 15px;
  right: -10px;
  z-index:10;
  height: 14px;
  overflow:hidden;
  width: 30px;
  background: transparent;
}
.sl-nav li:hover .triangle:after {
  content: '';
  display: block;
  z-index: 20;
  width: 18px;
  transform: rotate(45deg) translateY(0px) translatex(10px);
  height: 18px;
  background: rgba(255,255,255,0.7);
  border-radius:2px 0px 0px 0px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 15px 15px;
  padding-bottom:0;
  z-index: 2;
  font-size: 15px;
  color: #3c3c3c;
}
.sl-nav li ul li:last-of-type {
  padding-bottom: 15px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover, .sl-nav li ul li span.active {
  color: #146c78;
}
.sl-flag {
  display: inline-block;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
  width: 15px;
  height: 15px;
  background: #aaa;
  border-radius: 50%;
  position: relative;
  top: 2px;
  overflow: hidden;
}
.flag-kr {
background: url('https://traditionalspahoian.com/wp-content/uploads/flag/kr.png');
  background-size: cover !important;
  background-position: center center;
}
.flag-usa {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/en.png');
}
.flag-jp {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/jp.png');
}
.flag-th {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/th.png');
}
.flag-es {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/sp.png');
}
.flag-cn {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/cn.png');
}
.flag-vn {
  background-size: cover !important;
  background-position: center center;
  background: url('https://traditionalspahoian.com/wp-content/uploads/flag/vn.png');
}
/* end language */

.ngon-ngu {
    position: absolute;
    z-index: 10;
    top: 25%;
    right: 50px;
}

	@media (max-width: 767px)
	{
		.ngon-ngu {
    position: absolute;
    z-index: 10;
    top: 75px;
    right: 30px;
}
}

.shampoo-ftc.footer-call {background: #6f3b16}
.ngon-ngu-sham {font-size: 9pt; margin-right: 2px}
.minibars {margin-top: -100px}


.page-id-1474 #header, .page-id-1474 .onlyrights, .page-id-1474 #icon-fixed, .page-id-1474 .footer-wrapper {display: none}
.page-id-1481 #header, .page-id-1481 .onlyrights, .page-id-1481 #icon-fixed, .page-id-1481 .footer-wrapper {display: none}
@media (max-width: 849px) {
   body.page-id-1474, body.page-id-1481 {
        overflow-x: scroll;
	   background: #fff;
    }
}