html, body {
    overflow-x: hidden;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fa;
    color:#333;
    line-height:1.6;
}

header{
    background:#0B3C5D;
    color:#fff;
    padding:15px 0;
}



nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

nav ul{
    list-style:none;
    display:flex;
    gap:25px;
}

nav a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
}

.hero{
    background:linear-gradient(135deg,#0B3C5D,#1f6fa9);
    color:#fff;
    padding:100px 20px;
    text-align:center;
}

.hero h1{
    font-size:40px;
    margin-bottom:20px;
}

.hero p{
    font-size:18px;
    margin-bottom:30px;
}

.btn{
    display:inline-block;
    padding:12px 25px;
    margin:5px;
    border-radius:5px;
    text-decoration:none;
    font-weight:600;
}

.btn-primary{
    background:#ff7a00;
    color:#fff;
}

.btn-outline{
    border:2px solid #fff;
    color:#fff;
}



.why{
    background:#0B3C5D;
    color:#fff;
}

.why h2{
    color:#fff;
}

.contact{
    text-align:center;
}
@media(max-width:768px){
    .hero h1{font-size:28px;}
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fa;
    color:#333;
    line-height:1.6;
    overflow-x:hidden;   /* thêm dòng này */
}
.network{
    background:#ffffff;
    padding:60px 0;
    border-top:1px solid #eee;
}

.network h2{
    text-align:center;
    margin-bottom:30px;
    color:#0B3C5D;
}

.domain-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
    text-align:center;
}

.domain-item{
    background:#f8fafc;
    padding:15px;
    border-radius:8px;
    transition:0.3s;
    font-weight:500;
}

.domain-item:hover{
    background:#0B3C5D;
    color:#fff;
    transform:translateY(-3px);
}

.domain-item a{
    text-decoration:none;
    color:inherit;
}
/* ===== MOBILE MENU ===== */

.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
}

@media(max-width:768px){

    nav{
        position:relative;
    }

    nav ul{
        position:absolute;
        top:65px;
        left:0;
        width:100%;
        background:#ffffff;
        flex-direction:column;
        align-items:center;
        gap:18px;
        padding:20px 0;
        display:none;
        box-shadow:0 10px 25px rgba(0,0,0,0.15);
        z-index:999;
    }

    nav ul li a{
        color:#0B3C5D;   /* đổi màu chữ mobile */
        font-weight:600;
    }

    nav ul.active{
        display:flex;
    }

    .menu-toggle{
        display:block;
        color:#0B3C5D;
    }

    .nav-btn{
        background:#ff7a00;
        color:#fff !important;
    }
}
.menu-toggle{
    font-size:28px;
    cursor:pointer;
    display:none;
    color:#fff;
}

@media(max-width:768px){

    .menu-toggle{
        display:block !important;
    }

    nav ul{
        display:none;
    }

    nav ul.active{
        display:flex;
        flex-direction:column;
    }

}

.included-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.included ul{
list-style:none;
padding:0;
line-height:2;
}

.gift-features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
text-align:center;
}

.feature-box{
background:#f8f9fa;
padding:25px;
margin:20px 0;
border-radius:10px;
}
.domain-page {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
}



.section {
  padding: 60px 0;
}

.domain-hero {
  background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  color: #fff;
  text-align: center;
  padding: 100px 20px;
}

.domain-hero h1 {
  font-size: 40px;
  margin-bottom: 15px;
}

.search-box {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-box input {
  padding: 14px;
  width: 320px;
  border-radius: 6px;
  border: none;
}

.search-box button {
  padding: 14px 25px;
  background: #00c6ff;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.feature-list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 15px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

table th, table td {
  padding: 14px;
  border: 1px solid #eee;
  text-align: center;
}

table th {
  background: #0f2027;
  color: #fff;
}

.table-wrap {
  overflow-x: auto;
}

.services {
  background: #f5f7fa;
  text-align: center;
}

.service-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
}

.cta {
  background: linear-gradient(135deg,#0072ff,#00c6ff);
  color: #fff;
  text-align: center;
  padding: 70px 20px;
}

.cta button {
  margin-top: 20px;
  padding: 14px 35px;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #0072ff;
  font-weight: bold;
  cursor: pointer;
}

@media (max-width:768px) {
  .domain-hero h1 {
    font-size: 26px;
  }
}

.footer{
    background:#0f172a;
    color:#cbd5e1;
    padding:60px 0 30px;
    font-size:14px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
    margin-bottom:40px;
}

.footer h4{
    color:#ffffff;
    margin-bottom:15px;
    font-size:15px;
}

.footer ul{
    list-style:none;
    padding:0;
}

.footer ul li{
    margin-bottom:8px;
}

.footer a{
    text-decoration:none;
    color:#cbd5e1;
    transition:0.3s;
}

.footer a:hover{
    color:#ffffff;
}

.footer-bottom{
    border-top:1px solid #1e293b;
    padding-top:20px;
    text-align:center;
    font-size:13px;
    color:#94a3b8;
}
.services-pro {
background: linear-gradient(135deg,#f8fafc,#eef2ff);
}

.section-desc{
text-align:center;
max-width:750px;
margin:0 auto 50px;
color:#555;
}

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

.service-card{
background:#ffffff;
padding:35px 25px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:all 0.3s ease;
text-align:center;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.service-card .icon{
font-size:40px;
margin-bottom:20px;
}

.service-card h3{
margin-bottom:15px;
font-size:18px;
font-weight:700;
}

.service-card p{
color:#666;
font-size:14px;
line-height:1.6;
}
.partners-section{
background:#ffffff;
}

.logo-slider{
overflow:hidden;
margin-top:40px;
}

.logo-track{
display:flex;
width:calc(250px * 12);
animation:scroll 25s linear infinite;
}

.logo-track img{
width:200px;
height:80px;
object-fit:contain;
margin:0 25px;
filter:grayscale(100%);
opacity:0.7;
transition:0.3s;
}

.logo-track img:hover{
filter:grayscale(0%);
opacity:1;
}

@keyframes scroll{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

.logo-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:30px;
margin-top:40px;
align-items:center;
}

.logo-grid img{
max-width:150px;
height:70px;
object-fit:contain;
margin:auto;
filter:grayscale(100%);
opacity:0.8;
transition:0.3s;
}

.logo-grid img:hover{
filter:grayscale(0%);
opacity:1;
}
.support-section{
padding:80px 20px;
background:linear-gradient(135deg,#0d6efd,#4f8cff);
color:#fff;
text-align:center;
}

.support-container{
max-width:900px;
margin:auto;
}

.support-section h2{
font-size:32px;
margin-bottom:15px;
}

.support-section p{
font-size:16px;
margin-bottom:30px;
opacity:0.95;
}

.support-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.support-btn{
padding:14px 28px;
border-radius:40px;
font-weight:600;
text-decoration:none;
font-size:16px;
transition:0.3s;
}

.support-call{
background:#ffffff;
color:#0d6efd;
}

.support-call:hover{
background:#f1f1f1;
}

.support-zalo{
background:#25D366;
color:#fff;
}

.support-zalo:hover{
opacity:0.9;
}

/* Mobile */
@media(max-width:768px){
.support-section h2{
font-size:24px;
}
.support-btn{
width:100%;
max-width:320px;
}
}
.hotline-section{
padding:70px 20px;
background:linear-gradient(135deg,#0f172a,#1e293b);
color:#fff;
text-align:center;
}

.hotline-container{
max-width:800px;
margin:auto;
}

.hotline-section h2{
font-size:30px;
margin-bottom:15px;
}

.hotline-section p{
font-size:16px;
margin-bottom:30px;
color:#cbd5e1;
}

.hotline-btn{
display:inline-block;
background:#22c55e;
color:#fff;
padding:16px 36px;
border-radius:50px;
font-size:20px;
font-weight:700;
text-decoration:none;
transition:0.3s;
box-shadow:0 8px 20px rgba(0,0,0,0.3);
}

.hotline-btn:hover{
background:#16a34a;
transform:translateY(-3px);
}

@media(max-width:768px){
.hotline-section h2{
font-size:22px;
}
.hotline-btn{
width:100%;
max-width:320px;
font-size:18px;
}
}
.main-service {
    padding: 60px 0;
    background: #f8fafc;
}

.slide-service {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.slide-service .item {
    background: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all .3s ease;
}

.slide-service .item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.slide-service img {
    height: 60px;
    margin-bottom: 15px;
}

.slide-service h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.slide-service p {
    font-size: 14px;
    color: #666;
    min-height: 50px;
}

.slide-service b {
    display: block;
    font-size: 20px;
    color: #0066ff;
    margin: 10px 0;
}

.slide-service .btn {
    display: inline-block;
    padding: 10px 20px;
    background: #0066ff;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
}

/* Tablet */
@media (max-width: 992px) {
    .slide-service {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .slide-service {
        grid-template-columns: 1fr;
    }
}
.web-service-card,.service-card,.item,.card{cursor:pointer}




/* ===== SLIDER ===== */
.slider-wrapper{margin: 0;
    padding: 10px;
    width: calc(100% + 20px);
    position: relative;
    overflow: hidden;
}
.slider{
  display:flex;
  gap:30px;
  transition:transform .6s cubic-bezier(.77,0,.18,1);
}

/* ===== CARD ===== */
.card{
    min-width: calc(100% / 3 - 20px);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 35px;
    box-shadow: 0 0 5px #0000004d;
    text-align: center;
    transition: .4s;
}
.col-3.payment.only-desk a img{max-height: 32px;max-width: 70px;margin-top: 20px;
    margin-left: auto;
    margin-right: auto;}
.col-3 strong{
    display: block;
    color: #ddd;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 15px;}
.price{
  font-size:26px;
  font-weight:700;
  margin:20px 0;
  background:linear-gradient(90deg,#f97316,#ef4444);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


.prev{ left:20px; }
.next{ right:20px; }
.slider .btn{
  display:inline-block;
  padding:12px 26px;
  border-radius:50px;
  background:linear-gradient(90deg,#4f46e5,#9333ea);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.slider .btn:hover{ opacity:.85; }

/* NAV */
.slider-wrapper .nav{
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    font-size: 20px;
    z-index: 10;
}


.slider-wrapper .nav:hover{
  background:#4f46e5;
  color:#fff;
}


/* Responsive */
@media(max-width:992px){
  .card{ min-width:calc(100% / 2 - 15px); }
}
@media(max-width:600px){
  .card{ min-width:100%; }
}
.web-services-section {
    padding: 80px 15px;
    background: linear-gradient(135deg, #f8fafc, #eef3ff);
}

.web-services-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.web-services-section h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.web-services-sub {
    max-width: 700px;
    margin: 0 auto 50px;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

/* GRID 4 CỘT */
.web-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* CARD */
.web-service-card {
    background: #fff;
    padding: 35px 25px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

/* Hover cao cấp */
.web-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* Viền gradient khi hover */
.web-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0066ff, #00c3ff);
}

/* Tiêu đề */
.web-service-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

/* Nội dung */
.web-service-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    min-height: 80px;
}

/* Button */
.web-service-card a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 22px;
    border-radius: 30px;
    background: linear-gradient(135deg, #0066ff, #0044cc);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: all .3s ease;
}

.web-service-card a:hover {
    opacity: .9;
}

/* Tablet */
@media (max-width: 992px) {
    .web-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .web-services-grid {
        grid-template-columns: 1fr;
    }

    .web-services-section h2 {
        font-size: 24px;
    }
}

.section.faq {
    padding: 60px 15px;
    background: #f8fafc;
}

.section.faq .container {
    max-width: 900px;
    margin: auto;
}

.section.faq h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 28px;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    overflow: hidden;
}

.faq-item h4 {
    padding: 18px 20px;
    margin: 0;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}

.faq-item h4::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 18px;
}

.faq-content {
    display: none;
    padding: 0 20px 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
}

.faq-item.active .faq-content {
    display: block;
}

.faq-item.active h4::after {
    content: "-";
}

.faq-content ul {
    padding-left: 20px;
}

.logo-list{
    display:flex;
    align-items:center;
    justify-content:flex-end; /* đẩy sang phải */
    gap:15px;
    flex-wrap:wrap; /* mobile tự xuống dòng */
}

.logo-list img{
    height:auto;
    width:auto;
}

.icon-social img {
    width: 30px;
    height: 30px;border-radius: 100px;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.container{max-width:1200px;margin:0 auto;padding:0 15px}

.section h2 {
    text-align: center;
    margin-bottom: 40px;
}