:root{
  --primary:#0a3d62;
  --secondary:#1e3799;
  --accent:#38ada9;
  --light:#f5f7fb;
  --dark:#1b1f3b;
}


*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{line-height:1.6;color:#333;background:var(--light)}

/* Header */
header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:10px 10px;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:1000;
}
.logo{
	font-size:22px;font-weight:800;color:var(--primary)
	
	display: block;
    width: 180px;   /* chỉnh theo logo */
    height: 85px;

    background-image: url("../images/des_logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	}

/* Nav + Mega Menu */
nav ul{list-style:none;display:flex;gap:6px}
nav ul li{position:relative}
nav a{
  text-decoration:none;color:#333;font-weight:700;
  padding:10px 10px;display:block;border-radius:6px;
}
nav a:hover{background:#eef2ff;color:var(--primary)}

.mega{
  position:absolute;left:0;top:100%;
  width:720px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;
  display:none;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
nav ul li:hover .mega{display:flex;gap:20px}
.mega-col{flex:1}
.mega h4{color:var(--primary);margin-bottom:8px}
.mega a{font-weight:500;padding:6px 0}

/* Slider */
.slider{position:relative;height:580px;overflow:hidden}
.slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  display:none;align-items:center;justify-content:center;color:#fff;
  text-align:center
}
.slide::after{
  content:"";position:absolute;inset:0;background:rgba(10,61,98,0.55)
}
.slide-content{position:relative;z-index:1;max-width:700px}
.slide h1{font-size:44px;margin-bottom:10px}
.slide p{font-size:18px}
.slide.active{display:flex}

/* Sections */
.container{padding:20px 20px}
.section-title{text-align:center;margin-bottom:20px}
.section-title h2{color:var(--dark)}

/* Cards */
.cards{display:flex;gap:25px;flex-wrap:wrap;align:justify}
.card{
  flex:1;min-width:260px;background:#fff;border-radius:12px;padding:24px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);transition:.3s;border-top:4px solid var(--accent)
}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;border-radius:8px;margin-bottom:10px}
.card h3{color:var(--primary);margin-bottom:8px}
.card .btn{margin-top:10px;display:inline-block}

/* About */
.about{display:flex;gap:40px;flex-wrap:wrap;align-items:center}
.about img{width:100%;max-width:460px;border-radius:12px}
.badges{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.badge{background:#e6fffa;color:#065f46;padding:6px 10px;border-radius:999px;font-size:12px}

/* Partners */
.partners{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.partner{
  width:150px;height:90px;background:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.06)
}

/* Blog */
.blog-card{display:flex;flex-direction:column}
.blog-card .meta{font-size:12px;color:#6b7280}

/* Testimonials */
.testimonial{background:#fff;padding:28px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}

/* Contact */
.contact{
  background:linear-gradient(120deg,var(--primary),var(--secondary));
  color:#fff;border-radius:16px;padding:40px
}
.contact-form{max-width:680px;margin:auto;display:flex;flex-direction:column;gap:14px}
.contact-form input,.contact-form textarea{
  padding:12px;border-radius:8px;border:none
}
.contact-form button{
  padding:12px;border:none;border-radius:8px;background:var(--accent);color:#003b3b;font-weight:700;cursor:pointer
}

/* Buttons */
.btn{padding:10px 14px;border-radius:8px;background:var(--primary);color:#fff;text-decoration:none}

/* Footer */
footer{background:var(--dark);color:#fff;padding:40px}
.footer-columns{display:flex;gap:40px;flex-wrap:wrap}
.footer-col{flex:1;min-width:200px}
.footer-col h3{margin-bottom:10px}

/* Back to top */
#topBtn{
  position:fixed;bottom:24px;right:24px;background:var(--primary);
  color:#fff;border:none;padding:12px 14px;border-radius:50%;cursor:pointer;display:none
}

@media(max-width:900px){
  .mega{position:static;width:100%;display:none}
  nav ul{flex-direction:column}
  nav ul li:hover .mega{display:block}
  .cards{flex-direction:column}
  .about{flex-direction:column}
  .footer-columns{flex-direction:column}
}

.row {
    display: flex;
}

.col {
        padding: 20px;
    border: 0px solid #ddd;
	text-align:justify;
}


.features-section {
    padding: 60px 40px;
    background: #f5f7fb;
}

.features-section .section-title {
    text-align: center;
    margin-bottom: 20px;
}

.features-section h2 {
    color: #1b1f3b;
    margin-bottom: 10px;
}

.features-section p {
    color: #555;
    max-width: 800px;
    margin: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.feature-item {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: 0.3s;
    border-top: 4px solid #38ada9;
}

.feature-item:hover {
    transform: translateY(-6px);
}

.feature-item h3 {
    color: #0a3d62;
    margin-bottom: 10px;
    font-size: 18px;
}

.feature-item p {
    font-size: 14px;
    line-height: 1.6;
}

/* DES INTRO */
.des-intro {
    background: linear-gradient(120deg, #f5f7fb, #eef2ff);
    border-radius: 16px;
}

.des-wrapper {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
}

.des-content {
    flex: 1;
    min-width: 300px;
}

.des-content h2 {
    color: #0a3d62;
    margin-bottom: 15px;
}

.des-highlight {
    font-weight: bold;
    color: #1b1f3b;
    margin-bottom: 10px;
}

.des-badges {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.des-badges span {
    background: #e0f7fa;
    color: #00796b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* BOX RIGHT */
.des-box {
    flex: 1;
    min-width: 300px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.des-box h3 {
    color: #0a3d62;
    margin-bottom: 10px;
}

.des-box ul {
    padding-left: 20px;
}

.des-box li {
    margin-bottom: 10px;
}

/* VISION */
.des-vision {
    background: #f9fafc;
}

.des-card {
    border-top: 4px solid #38ada9;
}

/* COMMIT */
.des-commit {
    text-align: center;
}

.commit-box {
    background: linear-gradient(120deg, #0a3d62, #1e3799);
    color: white;
    padding: 40px;
    border-radius: 16px;
}

.commit-box h2 {
    margin-bottom: 15px;
}

/* MENU */
.menu {
    display: flex;
    list-style: none;
    gap: 10px;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.menu > li > a:hover {
    color: #0a3d62;
}

/* SUBMENU */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none;
    padding: 10px 0;
    z-index: 999;
}

.submenu li {
    list-style: none;
}

.submenu li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.submenu li a:hover {
    background: #f5f7fb;
    color: #0a3d62;
}

/* HOVER SHOW */
.has-submenu:hover .submenu {
    display: block;
}

/* HEADER FIX */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 40px;
    background: white;
    border-bottom: 1px solid #eee;
}

.about-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

/* IMAGE */
.about-img {
    flex: 0 0 auto; /* không giãn theo flex */
}

.about-img img {
    width: 450px; /* hoặc auto nếu muốn */
    max-width: 100%;
    border-radius: 12px;
}

/* CONTENT */
.about-content {
    flex: 1;
    min-width: 300px;
}

.about-content h3 {
    margin-bottom: 15px;
    color: #0a3d62;
}

.about-content p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
}

.bullet-list p {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    line-height: 1.6;
}

/* ICON */
.bullet-list p::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    color: #38ada9;
    font-size: 16px;
    font-weight: bold;
}
/* WORKFLOW */
.workflow {
    background: #f5f7fb;
    border-radius: 16px;
    padding: 50px 30px;
}

.workflow-steps {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.step {
    flex: 1;
    min-width: 220px;
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.step:hover {
    transform: translateY(-6px);
}

/* ICON */
.step .icon {
    font-size: 28px;
    margin-bottom: 10px;
}

/* TEXT */
.step h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #0a3d62;
}

.step p {
    font-size: 14px;
    color: #555;
}

.about-flex {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center; /* THÊM DÒNG NÀY */
    flex-wrap: wrap;
}


.about {
    background: #f8fafc;
    border-radius: 16px;
    padding: 40px;
}

/* CONTACT LAYOUT */
.contact-layout {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h3 {
    margin-top: 20px;
    color: #0a3d62;
}

.contact-info ul {
    padding-left: 18px;
}

/* FORM */
.contact-form {
    flex: 1;
    min-width: 300px;
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.contact-form button {
    margin-top: 10px;
}
/* LAYOUT */
.contact-2col {
    display: flex;
    gap: 50px;
    align-items: center;
    flex-wrap: wrap;
}

/* IMAGE */
.contact-image {
    flex: 1;
    min-width: 320px;
}

.contact-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* CONTENT */
.contact-info {
    flex: 1;
    min-width: 320px;
}

.contact-info h2 {
    color: #0a3d62;
    margin-bottom: 15px;
}

.contact-desc {
    margin-bottom: 20px;
    color: #555;
}

/* BLOCK */
.contact-block {
    margin-bottom: 20px;
}

.contact-block h3 {
    margin-bottom: 6px;
    color: #1e3799;
}

.contact-block ul {
    padding-left: 18px;
}

/* HIGHLIGHT */
.contact-block.highlight {
    background: #f1f5ff;
    padding: 15px;
    border-radius: 10px;
}

/* ===== MOBILE MENU ===== */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    padding: 10px;
}

/* MOBILE */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    nav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white;
        display: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    nav.active {
        display: block;
    }

    .menu {
        flex-direction: column;
    }

    .menu li {
        border-bottom: 1px solid #eee;
    }

    .menu li a {
        display: block;
        padding: 12px;
    }

    /* SUBMENU MOBILE */
    .submenu {
        position: static;
        display: none;
        background: #f8f9fa;
    }

    .has-submenu.open .submenu {
        display: block;
    }
}