@font-face{font-family:"uvn-bach-dang-nang";src:url("fonts/uvn-bach-dang-nang.ttf")format("TrueType");font-weight:400;font-display:swap}

@font-face{font-family:"myriad";src:url("fonts/myriadpro-regular.otf")format("OpenType");font-weight:400;font-display:swap}
@font-face{font-family:"myriad";src:url("fonts/myriadpro-bold.otf")format("OpenType");font-weight:700;font-display:swap}
@font-face{font-family:"myriad";src:url("fonts/myriadpro-it.otf")format("OpenType");font-weight:400;font-display:swap;font-style:italic;}
@font-face{font-family:"myriad";src:url("fonts/myriadpro-boldit.otf")format("OpenType");font-weight:700;font-display:swap;font-style:italic;font-weight:bold;}

:root{
	--burger: #C57F21;  /* #FFD336; */
	--black: #1d1d1b;
	--background: #000;
	--yellow: #FFD336;
	--yellow-dark: #C57F21;
	--button: linear-gradient(70deg, #DD863E, #FFD155 50%, #DD863E 100%);
	--button-hover: linear-gradient(70deg, #AA6129, #AF662A 16%, #FAB622 53%, #BF7925 89%);
	--f-main: 'myriad'; /* 'utm-alter-gothic'; */
	--f-title: 'uvn-bach-dang-nang';
	
	--grey: #bdbcbc;
	--grey-light: #F2F2F2;
}
html, body { font-family: var(--f-main); font-size:16px; line-height:1.5em; width:100%; height:auto; position:relative; background:#000; color:#FFF; }
body {opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s; }
/* body.home { background: url(../images/top-bg.jpg) no-repeat top left 100%; } */
h1, h2, h3, h4, h5, h6 { font-family:var(--f-title); line-height:1.3em; font-weight:normal; }
a {color:inherit;}

.table-overflow {display:block; width:100%; overflow-x:auto;}

.container { margin-bottom:30px; }
.container .boundary { max-width:1300px; text-align:center; width:90%; }

.topic-title { display:block; font-family:var(--f-title); color:#000; font-size:1.2em; margin:0; position:relative; text-align:left; margin:30px auto 0; max-width:1520px; z-index:10; }
.topic-title span { display:inline-block; background-image:linear-gradient(70deg, #DD863E, #FFD155 50%, #DD863E 100%); margin:0; padding:7px 70px 7px 20px; border-top-right-radius:15px; border-bottom-right-radius:10px; position:relative; min-width:200px; }
.topic-title span:after { content:""; display:inline-block; width:50px; height:100%; background:url(../images/title-bg.png) top left no-repeat; background-size:auto 100%; position:absolute; top:0; right:-20px; }
.topic-title .vietnamese { background: -webkit-linear-gradient(0, #DD863E, #FFD155 50%, #DD863E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:inline-block; padding-left:20px; font-family:var(--f-main); font-style:italic; font-size:.8em; }

.top-menu { color:#000; height:70px; line-height:70px; position:relative; z-index:9999; margin-bottom:0!important; }
.top-menu .boundary { padding:0 calc(100% - 98%); text-align:left; position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999; }
.top-menu:after { display:block; content:""; background:#C57F22 url(../images/border-bg.jpg) top center no-repeat; width:100%; height:3px; position: absolute; top: 100%; left: 0; z-index:9998; }
.top-menu, .top-menu .boundary { background-color:#000; }

.top-menu .top-menu-bt { display:inline-block; vertical-align:middle; background-image:var(--button); color:#FFF; line-height:1.3em; padding:3px 15px 0; border-radius:5px; float: right; margin: 16px 20px 0 0; font-size: .9em; text-align:center; }
.top-menu .top-menu-bt:hover { background-image:var(--button-hover); }
.top-menu .top-menu-bt span { display:block; font-size:.7em; margin-top:-3px; }

.top-menu .tm-logo { display:inline-block; width:auto; height:35px; vertical-align:middle; }
.top-menu .tm-logo img { width:auto; height:100%; display:inline-block; vertical-align:top; }
.top-menu .tm-hotline { display:inline-block; margin-left:120px; text-align:left; color:var(--yellow); line-height:1.3em; font-size:1.2em; vertical-align:middle; }
.top-menu .tm-hotline.min-hide { display:none; }
.top-menu .tm-hotline a { display:block; color:var(--yellow); font-weight:bold; }
.top-menu .hamburger {float:right; z-index:9999; position:relative; }

.top-menu .tm-content.small-hide { display:none; }
.top-menu .tm-content { display:block; position:absolute; top:-500px; left:0; width:100%; height:auto; margin:0; z-index:9998; background-color:#000; list-style-type:none; padding:20px 0; box-sizing:border-box; transition:left .3s; box-shadow:0 0 5px #FF0; border-bottom:1px solid #FFF; transition:all .5s; }
.top-menu .tm-content.active { top:69px; }
.top-menu .tm-content li { display:block; height:auto; line-height:1.5em; padding:10px; text-align:left; color:#FFF; }
.top-menu .tm-content li a { display:inline-block; padding:5px; }
.top-menu .tm-content li a span { display:block; font-size:.8em; }
.top-menu .tm-content li.active a, .top-menu .tm-content li a:hover { color:var(--yellow-dark)  }

.banner .square-image:before { padding-top:39.47%; }
.banner .owl-prev, .banner .owl-next { position:absolute; top:50%; left: 5px; font-size:2em!important; color:#FFF; transform:translateY(-50%); text-shadow: 0 0 3px #333; }
.banner .owl-next { left: unset; right: 5px; }

.vietnamese-content { color:#999; font-style:italic; }

.introduction .table .col { text-align:left; }
.introduction .table .col p { margin-bottom:30px; }
.introduction img { width:90%; max-width:450px; height:auto;}

.services .services-content { text-align:left; }
.services .services-content p { margin-bottom:30px; }
.services .services-slider { position:relative; }
.services .services-slider:before { display:block; width:100%; content:""; height:auto; padding-top:52.333%; }
.services .services-slider .owl-carousel { position:absolute; top:0; left:-1px; width:100%; height:100%; z-index:1; }
.services .services-slider .owl-carousel .square-image:before { padding-top:52.333%; }
.services .services-slider .owl-nav button { position:absolute; top:50%; left:5px; transform:translateY(-50%); }
.services .services-slider .owl-nav button i { font-size:1.5em; }
.services .services-slider .owl-nav button.owl-next { left:unset; right:5px; }

.services .services-slider .service-title { position:absolute; top:0; right:0; z-index:2; padding-right:15px; text-align:right; font-style:italic; font-size:.9em; box-sizing:border-box; }
.services .services-slider .service-title:after { content:""; position:absolute; display:inline-block; width:5px; height:100%; background-image:var(--button); top:0; right:0; }

.menu { position:relative; }
.menu:after { position:absolute; content:""; top:100%; left:0; width:100%; height:3px; background-image:var(--button); }
.menu .menu-content { text-align:left; }
.menu .menu-items { position:relative; overflow:hidden; }
.menu .menu-items:before { display:block; width:100%; content:""; height:auto; padding-top:100%; }
.menu .menu-items .owl-carousel { position:absolute; top:0; left:-1px; width:100%; height:100%; z-index:1; }

.menu-3 { overflow:hidden; }
.menu-3 .square-image:before { padding-top:52.333%; }
.menu-3 .owl-carousel .owl-stage-outer { overflow:visible; }
.menu-3 .owl-carousel .owl-item { opacity:.3; }
.menu-3 .owl-carousel .owl-item.active { opacity:1; }
.menu-3 .owl-carousel .owl-item .menu-3-title { position:absolute; top:10px; left:0; background:rgba(0,0,0,.7); color:#E7A714; padding:5px 10px; font-style:italic; }

.topic-title.gallery-title { margin-bottom:-50px; }
.gallery { background-color:#333; padding-top:70px; padding-bottom:30px; margin-bottom:0!important; }
.gallery .square-image:before { padding-top:52.333%; }
.gallery .owl-nav button { position:absolute; top:50%; left:5px; transform:translateY(-50%); color:#E7A714!important; }
.gallery .owl-nav button.owl-next { left:unset; right:5px; }
.gallery .owl-nav button i { font-size:2em; }

.our-booking {}
.our-booking .boundary { max-width:700px; background-image:var(--button); padding:3px; border-radius:20px; }
.our-booking form { border-radius:20px; background-color:#000; overflow:hidden; }
.our-booking form .square-image img { top:unset; bottom:-20px; height:auto!important; }
.our-booking form .square-image:before { padding-top:50%; }
.our-booking form .our-booking-title { font-size:2em; background: -webkit-linear-gradient(0, #DD863E, #FFD155 50%, #DD863E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin:20px 0; line-height:1em; }
.our-booking form .our-booking-title span { font-style:italic; font-size:.8em; }
.our-booking form .our-booking-content { padding:10px; }
.our-booking form .textbox, .our-booking form .textarea, .our-booking form .selection { background:transparent; border:0; border-bottom:1px solid #DDD; color:#FFF; resize:none; color:#BBB; }
.our-booking form .selection option { background-color:#000; }
.our-booking form button { background-image:var(--button); text-align:center; padding:5px 15px 3px; border-radius:5px; line-height:1em; text-transform:unset; }
.our-booking form button span { display:block; font-size:.6em; font-style:italic;  }

.footer { background-color:#000; color:#FFF; position:relative; margin-bottom:0; }
.footer .boundary { width:96%; padding:2em 0; }

.footer .footer-map iframe { width:100%; height:200px; border-radius:10px; }

.footer .footer-qrcode { margin-top:10px; }
.footer .footer-qrcode img { display:inline-block; vertical-align:top; }
.footer .footer-qrcode img:last-child { float:right; }

.footer .f-logo { width:calc(100% - 100px); height:auto; outline:0; max-width:300px; }

.footer .table .col { text-align:left; }

.footer .table .footer-contact { text-align:right; margin-top:30px; }
.footer .table .footer-contact .footer-contact-body { width:calc(100% - 65px); height:auto; box-sizing:border-box; display:inline-block; padding-right:13px; }
.footer .table .footer-contact .footer-logo-text { display:inline-block; width:30px; height:auto; vertical-align:top; margin-right:25px; }

.footer .footer-open-time { display:inline-block; background-color:#000; width:auto; height:auto; padding:5px 10px; margin:20px 0; color:#FFF; text-align:right; font-size:0.8em; line-height:1.3em; box-sizing:border-box; box-shadow:0 0 5px #FFF; }
.footer .footer-hotline { font-weight:bold; font-size:1.2em; margin:10px 0 20px; display:block; }

.footer-social { background-color:#333; margin-bottom:0!important; padding:10px 0; }
.footer-social .boundary { text-align:left; font-size:1.5em; font-style:italic; }

.breadcrumb { margin-bottom:10px; }
.breadcrumb li { color:#DDD; }
.breadcrumb li a { font-size:0.9em;color:inherit }
.breadcrumb li a:hover { color:var(--yellow); }

@media (min-width:576px){
	.topic-title.vietnamese-content {font-size:2.2em;}
	
	.banner .boundary:before, .banner .boundary #banners .square-image:before {padding-top:39.47%;}
	.banner .boundary #banners .square-image {margin-left:0;}
	
	
	.footer .table .col:last-child { padding-left:20px; }
	
	.copyright span { display:inline-block; }
	.copyright span:before {content:"\00a0|\00a0";}
}

@media (min-width: 768px){	
	.top-menu .boundary { position:relative; top:unset; left:unset; max-width:1300px; }
	.top-menu .tm-logo { height:30px; }
	.top-menu .hamburger {display:none;}
	.top-menu .top-menu-bt { margin-right:0; }
	.top-menu .tm-logo-container { height:280px; width:110px; border-bottom-left-radius:55px; border-bottom-right-radius:55px; }
	
	.top-menu .tm-hotline { display:none; }
	.top-menu .tm-hotline.min-hide { display:block; margin:50px auto 0; width:90%; text-align:center; }
	
	.top-menu .tm-content.small-hide { display:inline-block; width:calc(100% - 260px); padding:0; }
	.top-menu .tm-content.small-show {display:none;}
	.top-menu .tm-content { display:inline-block; position:relative!important; top:unset!important; left:unset!important; box-shadow:unset!important; width:100%; height:auto; background-color:unset; text-align:right; padding:0 20px 0 0; border:0; }
	.top-menu .tm-content li { height:70px; line-height:70px; margin:0 5px; padding:0; text-align:center; }
	.top-menu .tm-content li, .top-menu .tm-content li a { display:inline-block; vertical-align:top; box-sizing:border-box; }
	.top-menu .tm-content li a { font-size:0.8em; padding:5px 10px; display:inline-block; line-height:1.5em; vertical-align:bottom; margin-bottom:10px; transition:all 0.2s; }
	.top-menu .tm-content li a span { margin-top:-3px; }
		
	.introduction .table .col { font-size:.9em; }
	
	.services .services-content { display:none!important; padding-right:30px; font-size:.7em; line-height:1.3em; }
	.services .services-content.min-hide { display:table-cell!important; }
	
	.menu .menu-content { font-size:.8em; line-height:1.3em; padding-right:15px; }
	.menu .menu-content .vietnamese-content { margin-top:5px; }
	.menu .menu-items:before { display:block; width:100%; content:""; height:auto; padding-top:33.333%; }
	
	.gallery .owl-nav button { left:-30px; }
	.gallery .owl-nav button.owl-next { right:-30px; }
	
	.our-booking .our-booking-image { position:relative; }
	.our-booking form .square-image { position:absolute; top:0; left:0; width:100%; height:100%; }
	.our-booking form .square-image img { object-fit:cover; bottom:0; height:100%!important; }
	.our-booking form .our-booking-title { margin-top:0; }
	.our-booking form .textbox.min, .our-booking form .selection.min { width:50%; }
	.our-booking form .selection { height:31px; }
	.our-booking form .textarea { min-height:70px; }
	.our-booking form button { min-width:130px; }
	
	.footer .table .col:last-child { vertical-align:bottom; }
	
	.footer .footer-qrcode img { width:45%; height:auto; }
}

@media (min-width: 996px){	
	.topic-title span { min-width:300px; }
	
	.top-menu { height:100px; line-height:100px; }
	.top-menu .boundary { max-width:1190px; border:0; }
	
	.top-menu .tm-logo { height:60px; }
	.top-menu .tm-content.small-hide { width:calc(100% - 420px); }
	.top-menu .tm-content li { height:100px; line-height:100px; }
	.top-menu .tm-content li a { font-size:1em; padding:3px 10px; margin-bottom:21px; }
	.top-menu .top-menu-bt { padding:7px 25px 3px; margin-top:28px; }
	
	.banner { margin-top:0; }
	.banner .boundary #banners .owl-prev, .banner .boundary #banners .owl-next {font-size:3em; }
	
	.services .services-slider:before, .services .services-slider .owl-carousel { margin-top:-50px; }
	
	.menu { margin-top:-50px; }
	.menu.menu-2 { margin-top:0; }
	.menu .menu-content { padding-top:100px; }
	
	.footer .f-logo {width:80%;}
	.footer .table .footer-contact .footer-logo-text { margin-right:30px; }
}

@media (min-width: 1200px){
	.container { margin-bottom:50px; }
	.topic-title { font-size:1.5em; }
	.topic-title .vietnamese { font-size:.7em; }
	.topic-title span { min-width:400px; }
	
	.top-menu { height:120px; line-height:120px; }
	.top-menu .boundary { padding:0; font-size:1.1em; }
	.top-menu .tm-content.small-hide {  width:calc(100% - 490px); height:80px; line-height:80px; z-index:1; }
	.top-menu .tm-content li { vertical-align:middle; margin:0 10px; }
	.top-menu .tm-content li a { padding:5px 20px; margin-bottom:16px; }
	.top-menu .tm-logo { margin-top:0; position:relative; z-index:10; }
	.top-menu .tm-logo { height:70px; }
	.top-menu .top-menu-bt { padding:5px 30px 0; margin-top:40px; }
	
	.banner .square-image:before { padding-top:32.89%; }
	.banner .boundary #banners .owl-prev { left: 10px; }
	.banner .boundary #banners .owl-next { right: 10px; }
	
	.introduction .table .col { font-size:1em; }
	.introduction img { margin-top:-20px; }
	
	.services .services-content { font-size:1em; }
	.services .services-slider .owl-carousel { left:-2px; }
	.services .services-slider .owl-nav button i { font-size:2em; }
	
	.our-booking form .our-booking-title { font-size:2.3em; }
	
	.menu .menu-content { font-size:1em; }
	
	.footer .table .footer-contact .footer-contact-body { padding-right:30px; width:calc(60% - 65px); }
	.footer .table .footer-contact .footer-logo-text { width:35px; }
}

@media (min-width: 1300px){	
	.topic-title { font-size:1.8em; }
	.topic-title span { line-height:1em; padding-top:0; }
	.topic-title .vietnamese { font-size:.7em; }
}