.dnt-contact-page{background:#f7f9fc;color:#293e58;font-family:"Be Vietnam Pro",sans-serif;font-size:12px}
.dnt-contact-page h1,.dnt-contact-page h2,.dnt-contact-page h3{font-family:"Be Vietnam Pro",sans-serif;color:#0b2348}
.contact-hero{height:300px;background:linear-gradient(90deg,rgba(1,43,88,.96),rgba(4,81,146,.7),rgba(5,66,116,.25)),url('http://localhost/dulich-nhatrang/wp-content/uploads/dnt-local-images/photo-1528127269322-539801943592-c59b0a16aaf3.webp') center/cover;color:#fff}
.contact-hero .wrap{height:100%;display:flex;flex-direction:column;justify-content:center}
.contact-hero span,.contact-intro>div>span,.contact-form>div>span,.contact-support .wrap>div>span,.contact-faq>div>span{color:#52baff;font-size:9px;font-weight:700;letter-spacing:.12em}
.contact-hero h1{margin:10px 0;color:#fff;font-size:31px;line-height:1.35}
.contact-hero p{margin:0;color:#fff;font-size:13px;line-height:1.8}
.contact-intro{display:grid;grid-template-columns:.75fr 1.65fr;gap:50px;align-items:center;padding:16px 0 30px}
.contact-intro>div:first-child h2{margin:9px 0;font-size:22px}
.contact-intro>div:first-child p{color:#62748a;line-height:1.75}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-cards article{display:flex;gap:13px;padding:17px;border:1px solid #e0e8f0;border-radius:7px;background:#fff;box-shadow:0 3px 12px rgba(27,59,94,.04)}
.contact-cards i{display:grid;width:38px;height:38px;flex:none;place-items:center;border-radius:8px;background:#eaf4ff;color:#0875ef;font-size:19px;font-style:normal}
.contact-cards h3{margin:0 0 5px;font-size:12px}
.contact-cards p{margin:0 0 6px;color:#64758b;font-size:10px;line-height:1.6}
.contact-cards a{color:#0875ef;font-size:9px;font-weight:600}
.contact-layout{display:grid;grid-template-columns:1.45fr .8fr;gap:18px;margin-bottom:34px}
.contact-form,.contact-layout>aside{border:1px solid #e0e8f0;border-radius:8px;background:#fff;box-shadow:0 5px 18px rgba(28,57,89,.05)}
.contact-form{padding:25px}
.contact-form>div h2{margin:8px 0;font-size:21px}
.contact-form>div p{color:#66778c}
.contact-form form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.contact-form label{color:#213952;font-size:10px;font-weight:600}
.contact-form label b{color:#e33}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:7px;border:1px solid #d7e0ea;border-radius:5px;background:#fff;font-family:inherit;font-size:10px}
.contact-form input,.contact-form select{height:39px;padding:0 11px}
.contact-form textarea{height:112px;padding:11px;resize:vertical}
.contact-full{grid-column:1/-1}
.contact-check{display:flex;align-items:center;color:#65768a!important;font-weight:400!important}
.contact-check input{width:14px;height:14px;margin:0 8px 0 0}
.contact-form form>button{height:42px;border:0;border-radius:5px;background:#0875ef;color:#fff;font-family:inherit;font-weight:700}
.contact-layout>aside{overflow:hidden}
.contact-map{height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#dceef4,#e8f0df 45%,#cde3f2 46%,#eef3e5);color:#ee3b3b}
.contact-map span{font-size:35px}
.contact-map b{margin-top:5px;color:#e33131}
.contact-map small{color:#536981}
.contact-directions{padding:20px}
.contact-directions h3{margin:0 0 13px;font-size:14px}
.contact-directions p{color:#5e7086;font-size:10px}
.contact-directions button{width:100%;height:37px;margin-top:8px;border:0;border-radius:5px;background:#0875ef;color:#fff;font-weight:700}
.contact-support{padding:28px 0;background:linear-gradient(110deg,#0758aa,#0b82dc);color:#fff}
.contact-support>.wrap{display:flex;align-items:center;justify-content:space-between}
.contact-support h2{margin:7px 0;color:#fff;font-size:19px}
.contact-support>.wrap>div:last-child{display:flex;gap:10px}
.contact-support a{display:flex;align-items:center;gap:9px;min-width:150px;padding:11px 13px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:rgba(255,255,255,.1);color:#fff}
.contact-support a i{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#fff;color:#0875ef;font-style:normal;font-weight:700}
.contact-support a b,.contact-support a small{display:block}
.contact-support a small{margin-top:2px;font-size:8px}
.contact-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;padding:38px 0}
.contact-faq>div:first-child h2{margin:8px 0;font-size:22px}
.contact-faq>div:first-child p{color:#65778d}
.contact-faq details{border-bottom:1px solid #dde5ee}
.contact-faq summary{padding:15px 2px;color:#17334f;font-weight:700;cursor:pointer}
.contact-faq details p{margin-top:0;color:#62758b;line-height:1.7}
.contact-values{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:28px;padding:18px 30px;border-radius:7px;background:#edf5ff}
.contact-values article{display:flex;align-items:center;gap:12px}
.contact-values i{color:#0875ef;font-size:25px;font-style:normal}
.contact-values b,.contact-values small{display:block}
.contact-values small{margin-top:3px;color:#687a90}
@media(max-width:900px){.contact-intro{grid-template-columns:1fr}.contact-layout{grid-template-columns:1fr}.contact-support>.wrap{display:block}.contact-support>.wrap>div:last-child{margin-top:18px}.contact-values{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:600px){.contact-hero{height:270px}.contact-hero .wrap,.contact-intro,.contact-layout,.contact-faq{padding-inline:15px}.contact-hero h1{font-size:23px}.contact-cards,.contact-form form,.contact-faq{grid-template-columns:1fr}.contact-full{grid-column:auto}.contact-support>.wrap{padding-inline:15px}.contact-support>.wrap>div:last-child{display:grid;grid-template-columns:1fr 1fr}.contact-support a{min-width:0}.contact-values{grid-template-columns:1fr;margin-inline:12px}.contact-intro,.contact-faq{gap:20px}}