@font-face{font-family:"roboto";src:url("fonts/roboto-regular.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"roboto";src:url("fonts/roboto-bold.ttf")format("TrueType");font-weight:700;font-display:swap}
@font-face{font-family:"roboto";src:url("fonts/roboto-bolditalic.ttf")format("TrueType");font-weight:400;font-display:swap;font-style:italic;}
@font-face{font-family:"utm-dinh-tran";src:url("fonts/utm-dinh-tran.ttf")format("TrueType");font-weight:400;font-display:swap}
@font-face{font-family:"sfu-ariston";src:url("fonts/sfu-ariston.ttf")format("TrueType");font-weight:400;font-display:swap}

:root{
	--burger: #ed1a36;
	--red: #D20F2F;
	--red-dark: #880000;
	--yellow-light: #FFE278;
	--yellow: #FFEC00;
	--yellow-dark: #FFCC26;
	--orange: #f36f21;
	--green: #1ebe30;
	--blue-light: #cef5ff;
	--blue: #01a5ff;
}
html, body { font-family: roboto, sans-serif; font-size:16px;  background-color:var(--blue-light); }
h1, h2, h3, h4, h5, h6 { font-family:"utm-dinh-tran"; line-height:1em; font-weight:normal; letter-spacing:.07em; }
a { color:inherit; }
.boundary { width: 96%; max-width: 1500px; }
.breadcrumb { line-height: 1.5em!important; }
.breadcrumb li { display:inline; }
.breadcrumb li:hover { color:var(--red); }

.marquee { overflow:hidden; }

.header { background:var(--red-dark) url(../images/header-bg.jpg) top left no-repeat; }

.header .header-top { background-color:var(--red-dark); color:#FFF; height:10px; }
.header .header-top .boundary { text-align:right; }
.header .header-top .header-top-pin { display:inline-block; width:auto; height:auto; border-top:30px solid var(--red-dark); border-left:10px solid transparent; border-right:10px solid transparent; position:relative; padding:3px 15px; font-size:.9em; }
.header .header-top .header-top-pin div { position:relative; margin-top:-28px; }
.header .header-top .header-top-pin div img { vertical-align:bottom; display:inline-block; }

.header .header-body h1 { color:var(--yellow); font-size:3.2em; text-align:center; margin-bottom:.2em; }
.header .header-body h1 span { display:block; }

.header .header-body .header-hotline { text-align:center; padding-bottom:20px; }
.header .header-body .header-hotline a { background-color:var(--yellow); color:var(--red-dark); font-weight:bold; display:inline-block; margin:0 5px; padding:5px 10px; border-radius:5px; }
.header .header-body .header-hotline a:hover {animation: shake 2s infinite;}

.header .header-bottom { height:30px; line-height:30px; background:linear-gradient(180deg, var(--red), transparent); color:#FFF; font-size:.9em; }

.banner .square-image:before { padding-top:23.555%; }

.top-banner .boundary { width:100%; }

.top-banner .top-banner-item-content { padding:10px; box-sizing:border-box; text-align:center; background-color:var(--red); color:#FFF; position:relative; }

.top-banner .top-banner-item-title { font-family:"utm-dinh-tran"; font-size:3em; color:var(--yellow); letter-spacing:.05em; }

.top-banner .top-banner-item-content blockquote { text-align:center; font-style:normal; background-color:#FFF; display:inline-block; margin:10px auto; color:var(--red); padding:10px; border-radius:5px; box-sizing:border-box; white-space:nowrap; line-height:1.5em;  }
.top-banner .top-banner-item-content blockquote.small { border-radius:20px; padding:7px 15px 5px; }

.top-banner .top-banner-item-content p, .top-banner .top-banner-item-content ul { text-align:left; }
.top-banner .top-banner-item-content p { padding:0 15px; line-height:1.5em; }

.top-banner .top-banner-item:first-child .top-banner-item-content:before, .top-banner .top-banner-item:nth-child(2) .top-banner-item-content:before, .top-banner .top-banner-item:last-child .top-banner-item-content:before { content:""; display:block; position:absolute; bottom:100%; left:0; width:100%; height:auto; padding-top:21.69%; background:url(../images/header-bg-1.svg) top left no-repeat; background-size:100% 100%; }
.top-banner .top-banner-item:first-child .top-banner-item-content .top-banner-item-title { margin-top:-50px; z-index:2; position:relative; }

.top-banner .top-banner-item:nth-child(2) .top-banner-item-content:before { padding-top:16.56%; background-image:url(../images/header-bg-2.svg); bottom:unset; top:99.8%; z-index:2; }
.top-banner .top-banner-item:nth-child(2) .top-banner-item-content p { margin-bottom:-30px; z-index:3; position:relative; }

.top-banner .top-banner-item:last-child .top-banner-item-content:before { padding-top:27.21%; background-image:url(../images/header-bg-3.svg); }
.top-banner .top-banner-item:last-child .top-banner-item-content p { margin-top:-80px; z-index:2; position:relative; }
.top-banner .top-banner-item:last-child .top-banner-item-content p:before { content:""; width:40%; height:100px; float:left; -webkit-shape-outside: polygon(0% 0%, 100% 0%, 0% 70%); shape-outside: polygon(0% 0%, 100% 0%, 0% 70%); }

.top-banner .top-banner-item-content ul { padding: 0; list-style-position: inside; width: 90%; margin: 0 auto; }

.introduction { padding-bottom:5px; }
.introduction .boundary { width:100%; display:flex; flex-direction:column; }
.introduction .introduction-banner .square-image:before { padding-top:58.29%; }

.introduction .introduction-content { background-color:var(--red-dark); padding:10px 10px 20px; box-sizing:border-box; }
.introduction .introduction-content .introduction-content-body { background-color:#FFF; padding:20px 10px 40px; border-radius:10px; }
.introduction .introduction-content .introduction-content-body h2 { font-size:2.8em; color:var(--red); margin: 0 0 10px; }
.introduction .introduction-content .introduction-content-body strong { font-family:"sfu-ariston"; font-size:1.5em; font-weight:normal; }
.introduction .introduction-content .introduction-content-body ul { list-style-type:none; padding:0; margin:5px 0; }
.introduction .introduction-content .introduction-content-body ul li { line-height:1.5em; margin:5px 0;}
.introduction .introduction-content .introduction-content-body ul li:before { content:"\e9d9"; font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display:inline-block; margin-right:5px;color:var(--red); }

.introduction .introduction-content .introduction-content-highlight { text-align:right; margin-top:-40px; } 
.introduction .introduction-content .introduction-content-highlight span { display:inline-block; width:100px; height:80px; text-align:center; background:url(../images/highlight-bg.png) top left no-repeat; background-size:100%; font-weight:bold; padding-top:20px; box-sizing:border-box; color:var(--red-dark); margin-bottom:-30px; vertical-align:top;  -webkit-filter: drop-shadow(5px 5px 5px #000); filter: drop-shadow(5px 5px 5px #000); }
.introduction .introduction-content .introduction-content-highlight span:first-child { margin-top:35px; }

.introduction .introduction-images { display:flex; flex-direction:row; flex-wrap:nowrap; padding:5px 2.5px  0; gap:5px; box-sizing:border-box; justify-content:space-between; }

.topic { margin:40px 0; }
.topic .boundary { text-align:center; }
.topic .topic-title { display:inline-block; font-family:"sfu-ariston"; font-size:2.3em; color:var(--red); text-align:center; margin:20px auto; width:auto; padding:0 30px; text-shadow:1.5px 1.5px 0 var(--yellow-dark); position:relative; }
.topic .topic-title.long-title { padding:0 15px; }
.topic .topic-title:before, .topic .topic-title:after { content:""; display:inline-block; top:100%; right:0; width:80%; height:3px; background-color:var(--red); position:absolute; }
.topic .topic-title:after { left:0; right:unset; top:calc(100% + 5px); }
.topic .topic-title span { display:block; margin-top:-10px; }

.topic-contact { font-weight:bold; color:var(--red-dark); line-height:1.5em;  }
.topic-contact a { display:inline-block; margin:5px 15px 0; font-size:1.2em; }

.topic .topic-card-list { display:flex; flex-direction:column; }
.topic .topic-card-list .topic-card { margin:0 0 20px; }
.topic .topic-card-list .topic-card .square-image:before { padding-top:52.333%; }
.topic .topic-card-list .topic-card .topic-card-button { background-color:var(--green); color:#FFF; font-weight:bold; border-radius:5px; width:100%; display:block; margin-top:10px; text-align:center; height:40px; line-height:40px; }
.topic .topic-card-list .topic-card .topic-card-button:hover { background-color:var(--yellow); color:var(--red); }

.menu { background-color:var(--yellow-light); position:relative; padding:20px 0; border-bottom:3px solid var(--red-dark); }
.menu:before { content:""; position:absolute; top:10px; left:0; width:100%; height:5px; background-color:#FFF; }
.menu .menu-images .menu-images-container { display:flex; flex-direction:row; flex-wrap:wrap; padding:10px; gap:1%; justify-content:space-between; }
.menu .menu-images .square-image { width:49.5%; margin-bottom:5px; transition:all .2s; position:relative; z-index:1; }
.menu .menu-images .square-image:hover { transform:scale(1.1); z-index:10; filter:brightness(1.1); box-shadow:0 0 5px #000; }

.menu .menu-highlight { text-align:right; }
.menu .menu-highlight span { display: inline-block; width: 100px; height: 80px; text-align: center; background: url(../images/highlight-bg.png) top left no-repeat; background-size: 100%; font-weight: bold; padding-top: 20px; box-sizing: border-box; color: var(--red-dark); margin-bottom: -30px; vertical-align: top; -webkit-filter: drop-shadow(2px 2px 5px #000); filter: drop-shadow(2px 2px 5px #000); margin-right:30px; }

.menu .menu-content { display:flex; flex-direction:row; flex-wrap:wrap; padding:0 20px 20px; }
.menu .menu-content ul { list-style-type:none; margin:0; padding:0; width:50%; }
.menu .menu-content ul:nth-child(2) { margin-top:30px; }
.menu .menu-content ul:nth-child(3) { margin-top:-30px; }
.menu .menu-content ul li { font-weight:bold; color:var(--red); font-size:1em; margin:0 0 10px; text-align:left; }

.map iframe { border:10px solid var(--yellow-dark); width:100%; height:300px; box-sizing:border-box; }

.news .news-container { display:flex; flex-direction:column; margin-top:20px; }
.news .news-container .news-item { font-size:1.2em; line-height:1.5em; margin-bottom:20px; }
.news .news-container .news-item .square-image { border:10px solid #FFF; box-shadow:0 0 3px #000; box-sizing:border-box; margin-bottom:10px; }
.news .news-container .news-item .square-image:before{ padding-top:52.333%; }
.news .news-container .news-item:hover { color:var(--red); }

.footer { background:var(--red-dark) url(../images/header-bg.jpg) top left no-repeat; background-size:100% 100%; padding:30px 0; }
.footer .boundary { text-align:center; }

.footer-title { font-family:"utm-dinh-tran"; font-size:3.2em; color:var(--yellow); text-align:center; line-height:1em; letter-spacing:.05em; }
.footer-title span { display:block; }

.footer .footer-flag { display:inline-block; width:90%; margin:30px auto;  color:var(--red); box-sizing:border-box; border-top:60px solid var(--yellow); border-bottom:60px solid var(--yellow); border-left:20px solid transparent; border-right:20px solid transparent; position:relative; }
.footer .footer-flag:after { content:""; position:absolute; left:-20px; top:65px; width:calc(100% + 40px); height:5px; background-color:var(--yellow); }
.footer .footer-flag span { position:absolute; top:50%; left:50%; display:block; width:85%; height:auto; transform:translate(-50%, -50%); font-weight:bold; font-size:.9em; line-height:1.5em; }

.footer .footer-hotline { font-weight:bold; text-align:center; font-size:1.2em; color:var(--yellow); }
.footer .footer-hotline a { display:inline-block; vertical-align:middle; margin:0 10px; }

.copyright {font-size:0.7em; line-height:1.3em; color:rgba(255,255,255,.7); background-color:var(--red-dark); }
.copyright .boundary { text-align:center; padding:5px 0; }
.copyright span { display:block; }

@media (min-width:576px){
	.topic .topic-title span { display:inline-block; }
}

@media (min-width: 768px){
	.header .header-body h1 span { display:inline-block; }
	.header .header-body h1 span:before { content: "\00a0- "; }
	
	.header .header-body .header-hotline { font-size:1.2em; padding:20px 0; }
	
	.top-banner .top-banner-item:first-child .square-image:before { padding-top:70%; }
	.top-banner .top-banner-item:first-child .top-banner-item-content .top-banner-item-title { margin-top:-130px; }
	.top-banner .top-banner-item:first-child blockquote { position:relative; z-index:2; }
	.top-banner .top-banner-item:first-child .top-banner-item-content ul { margin:10px auto; width:50%; }
	 
	.top-banner .top-banner-item:nth-child(2) .top-banner-item-content:before { top:99%; }
	.top-banner .top-banner-item:nth-child(2) .top-banner-item-content p { padding:0 100px; margin-bottom:-50px; }
	.top-banner .top-banner-item:nth-child(2) .square-image:before { padding-top:80%; }
	
	.top-banner .top-banner-item:last-child .square-image:before { padding-top:70%; }
	
	.top-banner .top-banner-item:last-child .top-banner-item-content p { margin-top:-150px; }
	.top-banner .top-banner-item:last-child .top-banner-item-content p:before { width:35%; height:130px; -webkit-shape-outside:polygon(0% 0%, 100% 0%, 80% 23%, 70% 30%, 60% 40%, 40% 60%, 0% 100%); shape-outside:polygon(0% 0%, 100% 0%, 80% 23%, 70% 30%, 60% 40%, 40% 60%, 0% 100%); }
	
	.introduction .introduction-content .introduction-content-body { padding:30px; }
	.introduction .introduction-content .introduction-content-body h2 { font-size:4em; }
	.introduction .introduction-content .introduction-content-body strong { font-size:2em; }
	.introduction .introduction-content .introduction-content-body ul li { font-size:1.5em; margin:10px 0; }
	
	.introduction .introduction-content .introduction-content-highlight span { width:150px; height:100px; background-size:100% 100%; font-size:1.4em; padding-top:25px; }
	.introduction .introduction-content .introduction-content-highlight span:first-child { margin-right:20px; }
	
	.topic .topic-title { margin-bottom:40px; }
	
	.topic-contact { display:flex; flex-direction:row; align-items:center; justify-content:space-around; }
	.topic-contact div { text-align:center; font-size:1.1em; }
	.topic-contact a { margin:0 5px; }
	
	.topic .topic-card-list { flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:space-between; }
	.topic .topic-card-list .topic-card { width:calc(50% - 5px); margin-bottom:10px; }
	
	.menu .menu-images .square-image { width:19.2%; }
	
	.menu .menu-highlight { height:10px; z-index:15; position:relative; }
	.menu .menu-highlight span { margin-top:-30px; }
	.menu .menu-content { padding:0 30px 30px; }
	.menu .menu-content ul { width:25%; }
	.menu .menu-content ul:nth-child(2), .menu .menu-content ul:nth-child(3) { margin:0; }
	.menu .menu-content ul:nth-child(4) { margin-top:30px; }
	.menu .menu-content ul li { font-size:1.2em; }
	
	.news .topic-title { margin-bottom:30px; }
	.news .news-container { flex-direction:row; flex-wrap:nowrap; justify-content:left; gap:1%; margin-top:10px; }
	.news .news-container .news-item { width:32.6%; }
	
	.footer .footer-title { font-size:4.2em; margin:0 0 10px; }
	.footer .footer-title span { display:inline-block; }
	.footer .footer-title span:before { content:"\00a0- "; }
	
	.footer .footer-flag { border-top-width:50px; border-bottom-width:50px; font-size:1.3em; white-space:nowrap; max-width:700px; }
	.footer .footer-flag:after { top:55px; }
	.footer .footer-flag span { width:calc(100% - 40px); }
	
	.footer .footer-hotline { font-size:1.5em; }
	.footer .footer-hotline a { margin:0 20px; }
	
	.copyright span { display:inline-block; }
	.copyright span:before { content:"\00a0- "; "}
}

@media (min-width: 996px){
	.header .header-body h1 { font-size:4em; }
	
	.top-banner .boundary { display:flex; flex-direction:row; flex-wrap:nowrap; }
	.top-banner .top-banner-item { width:30%; font-size:.9em; background-color:var(--red); }
	.top-banner .top-banner-item .top-banner-item-content ul { width:96%!important; }
	.top-banner .top-banner-item:last-child { width:40%; display:flex; flex-direction:column-reverse; }
	.top-banner .top-banner-item p { padding:10px!important; }
	
	.top-banner .top-banner-item:first-child .square-image:before { padding-top:80%; }
	.top-banner .top-banner-item:first-child .top-banner-item-content .top-banner-item-title { font-size:2.7em; margin:-30px 0 0; }
	.top-banner .top-banner-item blockquote span { display:block; }
	
	.top-banner .top-banner-item:nth-child(2) .top-banner-item-content p { margin-bottom:-20px; margin-top:0; }
	
	.top-banner .top-banner-item:last-child .square-image:before { padding-top:60%; }
	.top-banner .top-banner-item:last-child .top-banner-item-content { margin-bottom:auto; }
	.top-banner .top-banner-item:last-child .top-banner-item-content:before { z-index:2; bottom:99%; }
	.top-banner .top-banner-item:last-child .top-banner-item-content p { margin:-80px 0 0; }
	.top-banner .top-banner-item:last-child .top-banner-item-content p:before { height:50px; }
	
	.introduction .boundary { flex-direction:row; flex-wrap:wrap; }
	.introduction .boundary > div { width:50%; }
	
	.introduction .introduction-content { font-size:.7em; }
	.introduction .introduction-content .introduction-content-body { padding:10px; }
	.introduction .introduction-content .introduction-content-body h2 { font-size:5em; margin:0; }
	.introduction .introduction-content .introduction-content-body strong { font-size:2.3em; }
	.introduction .introduction-content .introduction-content-body ul li { margin:0; }
	
	.introduction .introduction-content .introduction-content-highlight { margin-top:-65px; }
	.introduction .introduction-content .introduction-content-highlight span { width:100px; height:80px; padding-top:20px; }
	
	.topic-contact div { font-size:1.2em; }
	
	.topic .topic-title { font-size:3em; padding:0 35px; text-shadow:3px 3px 0 var(--yellow-dark); }
	.topic .topic-title.long-title { padding:0 30px; }
	.topic .topic-title:before, .topic .topic-title:after { height:4px; }
	.topic .topic-title:after { top:calc(100% + 7px); }
	
	.topic .topic-card-list .topic-card { width:24%; }
	
	.menu .menu-images .menu-images-container { gap:10px; }
	.menu .menu-images .square-image { width:19%; margin-bottom:0; }
	
	.menu .menu-content, .menu .menu-highlight { max-width:1200px; margin:0 auto; }
	.menu .menu-highlight span { margin-right:50px; width:150px; height:100px; font-size:1.2em; margin-top:-60px; padding-top:30px; background-size:100% 100%; }
	
	.map iframe { height:400px; }
	
	.footer .footer-flag { font-size:1.4em; max-width:720px; line-height:2em; }
}

@media (min-width: 1200px){
	.header { background-size:100% 100%; }
	
	.top-banner .top-banner-item { font-size:1.1em; width:35%!important; }
	.top-banner .top-banner-item:first-child { width:30%!important; }
	.top-banner .top-banner-item blockquote span { display:inline-block; }
	
	.top-banner .top-banner-item:nth-child(2) { display:flex; flex-direction:column; z-index:1; }
	.top-banner .top-banner-item:nth-child(2) .top-banner-item-content { margin-top:auto; }
	.top-banner .top-banner-item:nth-child(2) .top-banner-item-content p { margin-bottom:30px; }
	
	.top-banner .top-banner-item:first-child .square-image { width:101%; }
	.top-banner .top-banner-item:first-child .top-banner-item-content .top-banner-item-title { margin-top:-50px; }
	
	.top-banner .top-banner-item:last-child .square-image:before { padding-top:70%; }
	.top-banner .top-banner-item:last-child .top-banner-item-content p { margin-top:-100px; }
	.top-banner .top-banner-item:last-child .top-banner-item-content p:before { height:60px; -webkit-shape-outside:polygon(0% 0%, 100% 0%, 80% 23%, 70% 30%, 60% 40%, 40% 85%, 0% 100%); shape-outside:polygon(0% 0%, 100% 0%, 80% 23%, 70% 30%, 60% 40%, 40% 85%, 0% 100%); }
	
	.header .header-top .header-top-pin { font-size:1em; padding:5px 20px; border-top-width:40px; }
	.header .header-top .header-top-pin div { margin-top:-35px; }
	
	.header .header-body h1 { font-size:5em; }
	.header .header-body .header-hotline { font-size:1.5em; padding:30px 0; }
	.header .header-body .header-hotline a { padding:10px 20px; margin:0 10px; }
	
	.header .header-bottom { height:40px; line-height:40px; font-size:1em; }
	
	
	.topic-contact div { font-size:1.8em; }
	
	.menu { border-bottom-width:5px; }
	.menu .menu-images .menu-images-container { padding:20px; }
	
	.menu .menu-content { padding-top:30px; }
	.menu .menu-content ul li { font-size:1.5em; }
	
	.footer .footer-title { font-size:5em; }
	.footer .footer-hotline { font-size:1.8em; }
}

@media (min-width: 1400px){
	.header .header-body h1 { font-size:6em; }
	
	.introduction { padding-top:10px; }
	.introduction .boundary { gap:10px; }
	.introduction .boundary > div { width:calc(50% - 5px); }
	
	.introduction .introduction-content { font-size:.8em; }
	.introduction .introduction-content .introduction-content-body { padding:20px; }
	
	.introduction .introduction-images { padding:0; gap:10px; }
	
	.introduction .introduction-content .introduction-content-highlight span { width:150px; height:100px; padding-top:25px; font-size:1.6em; }
	
	.map iframe { height:500px; }
}