/* ==========================================================================
   TOPSITE.VN - Giao diện người dùng (Bootstrap 5.3 + FontAwesome 6)
   ========================================================================== */
:root {
    --ts-primary: #F87800;
    --ts-primary-dark: #C25E00;
    --ts-accent: #FFB300;
    --ts-green: #45A50A;
    --ts-green-dark: #2F7C05;
    --ts-dark: #23262B;
    --ts-body: #4B5158;
    --ts-muted: #8A9199;
    --ts-line: #E9E9EC;
    --ts-soft: #F8F7F4;
    --ts-radius: 16px;
    --ts-shadow: 0 18px 45px rgba(35, 38, 43, .09);
    --bs-body-font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--ts-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ts-dark); font-weight: 700; line-height: 1.3; }
a { text-decoration: none; color: var(--ts-primary); }
a:hover { color: var(--ts-primary-dark); }
img { max-width: 100%; height: auto; }

.text-gradient {
    background: linear-gradient(92deg, var(--ts-primary) 0%, var(--ts-accent) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bg-soft { background: var(--ts-soft); }
.bg-dark-blue { background: var(--ts-dark); }
.rounded-4x { border-radius: var(--ts-radius); }
.shadow-ts { box-shadow: var(--ts-shadow); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .7rem 1.5rem; }
.btn-primary { background: var(--ts-primary); border-color: var(--ts-primary); }
.btn-primary:hover { background: var(--ts-primary-dark); border-color: var(--ts-primary-dark); }
.btn-gradient {
    background: linear-gradient(92deg, var(--ts-primary), var(--ts-accent));
    color: #fff; border: 0;
}
.btn-gradient:hover { color: #fff; filter: brightness(1.08); }
.btn-outline-light-blue { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-outline-light-blue:hover { background: #fff; color: var(--ts-dark); }

/* ---------- Header ---------- */
.topbar { background: var(--ts-dark); color: rgba(255,255,255,.75); font-size: .875rem; }
.topbar a { color: rgba(255,255,255,.75); }
.topbar a:hover { color: #fff; }

.navbar-ts { background: #fff; box-shadow: 0 2px 20px rgba(35,38,43,.07); padding: .55rem 0; }
.navbar-ts .navbar-brand img { height: 44px; width: auto; }
.navbar-ts .nav-link { color: var(--ts-dark); font-weight: 600; padding: .65rem 1rem !important; }
.navbar-ts .nav-link:hover, .navbar-ts .nav-link.active { color: var(--ts-primary); }
.navbar-ts .dropdown-menu { border: 0; box-shadow: var(--ts-shadow); border-radius: 12px; padding: .5rem; }
.navbar-ts .dropdown-item { border-radius: 8px; padding: .55rem .85rem; font-weight: 500; }
.navbar-ts .dropdown-item:hover { background: var(--ts-soft); color: var(--ts-primary); }

/* ---------- Hero ---------- */
.hero {
    background: radial-gradient(1150px 620px at 14% 8%, #4A2B08 0%, #262A2F 52%, #15171B 100%);
    color: #fff; padding: 5.5rem 0 6rem; position: relative; overflow: hidden;
}
.hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3.15rem); }
.hero p.lead { color: rgba(255,255,255,.82); }
.hero:after {
    content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -140px;
    background: radial-gradient(circle, rgba(255,179,0,.28), transparent 65%); border-radius: 50%;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18); padding: .4rem 1rem; border-radius: 100px; font-size: .875rem;
}
.hero-stat { border-left: 3px solid var(--ts-green); padding-left: 1rem; }
.hero-stat strong { font-size: 1.8rem; color: #fff; display: block; line-height: 1.1; }
.hero-stat span { color: rgba(255,255,255,.7); font-size: .875rem; }

/* ---------- Section ---------- */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-title { margin-bottom: 2.5rem; }
.section-title .eyebrow {
    color: var(--ts-primary); font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; font-size: .8rem; margin-bottom: .5rem; display: inline-block;
    position: relative; padding-bottom: .45rem;
}
.section-title .eyebrow:after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
    border-radius: 3px; background: linear-gradient(90deg, var(--ts-green), var(--ts-green-dark));
}
.section-title.text-center .eyebrow:after { left: 50%; transform: translateX(-50%); }
.section-title h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.section-title p { color: var(--ts-muted); max-width: 720px; }

/* ---------- Cards ---------- */
.card-ts {
    background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius);
    height: 100%; transition: .25s ease; overflow: hidden;
}
.card-ts:hover { transform: translateY(-6px); box-shadow: var(--ts-shadow); border-color: transparent; }
.card-ts .card-body { padding: 1.6rem; }

.icon-box {
    width: 56px; height: 56px; border-radius: 14px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-accent)); margin-bottom: 1rem;
}
.service-list { list-style: none; padding: 0; margin: 0; }
.service-list li { position: relative; padding-left: 1.65rem; margin-bottom: .45rem; color: var(--ts-body); }
.service-list li:before {
    content: "\f058"; font: var(--fa-font-solid); position: absolute; left: 0; top: .15rem; color: var(--ts-green);
}

.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card .badge-cat {
    position: absolute; top: 12px; left: 12px; background: rgba(7,18,51,.82);
    color: #fff; border-radius: 100px; padding: .3rem .8rem; font-size: .75rem;
}
.template-card img { aspect-ratio: 4/3; object-fit: cover; object-position: top center; width: 100%; }
.template-card .overlay {
    position: absolute; inset: 0; background: rgba(7,18,51,.72); opacity: 0; transition: .25s;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.template-card:hover .overlay { opacity: 1; }

.partner-logo {
    filter: grayscale(1); opacity: .65; transition: .25s; max-height: 52px; object-fit: contain;
}
.partner-logo:hover { filter: none; opacity: 1; }

.testimonial-card { background: #fff; border-radius: var(--ts-radius); padding: 1.75rem; border: 1px solid var(--ts-line); height: 100%; }
.testimonial-card .stars { color: #ffb400; }

/* ---------- Breadcrumb ---------- */
.page-header { background: var(--ts-soft); padding: 2rem 0; border-bottom: 1px solid var(--ts-line); }
.breadcrumb { margin-bottom: 0; font-size: .9rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "\f105"; font: var(--fa-font-solid); color: var(--ts-muted); }

/* ---------- Article ---------- */
.article-content { font-size: 1.0625rem; }
.article-content h2 { font-size: 1.55rem; margin: 2rem 0 1rem; }
.article-content h3 { font-size: 1.28rem; margin: 1.6rem 0 .9rem; }
.article-content img { border-radius: 12px; margin: 1.2rem 0; }
.article-content blockquote {
    border-left: 4px solid var(--ts-primary); background: var(--ts-soft);
    padding: 1rem 1.25rem; border-radius: 0 12px 12px 0; margin: 1.4rem 0;
}
.article-content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.article-content table td, .article-content table th { border: 1px solid var(--ts-line); padding: .65rem .85rem; }
.article-content ul, .article-content ol { padding-left: 1.3rem; }
.article-content figure { max-width: 100%; }
.article-content figure.image img { width: 100%; }

.toc-box { background: var(--ts-soft); border-radius: 12px; padding: 1.1rem 1.3rem; }
.toc-box ol { margin: 0; padding-left: 1.1rem; }
.toc-box a { color: var(--ts-body); }

/* ---------- Sidebar widget ---------- */
.widget { background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 1.4rem; margin-bottom: 1.5rem; }
.widget-title { font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ts-soft); }

/* ---------- Domain tool ---------- */
.domain-search-box { background: #fff; border-radius: 100px; padding: .45rem; box-shadow: var(--ts-shadow); }
.domain-search-box .form-control { border: 0; box-shadow: none; padding-left: 1.25rem; }
.domain-result-item { border: 1px solid var(--ts-line); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.domain-result-item.available { border-color: #45A50A; background: #F1F9E9; }
.domain-result-item.taken { border-color: #ffd3d3; background: #fff6f6; }

/* ---------- Footer ---------- */
.footer { background: var(--ts-dark); color: rgba(255,255,255,.68); padding-top: 3.5rem; }
.footer h5 { color: #fff; font-size: 1.05rem; margin-bottom: 1.1rem; }
.footer a { color: rgba(255,255,255,.68); }
.footer a:hover { color: var(--ts-accent); }
.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: .55rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding: 1.2rem 0; font-size: .875rem; }

/* ---------- Floating contact ---------- */
.float-contact { position: fixed; right: 18px; bottom: 18px; z-index: 1030; display: grid; gap: 10px; }
.float-contact a {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.float-contact .fc-phone { background: #45A50A; }
.float-contact .fc-zalo { background: #0068ff; }
.float-contact .fc-messenger { background: #a334fa; }
.float-contact .fc-top { background: var(--ts-dark); }

/* ---------- Utilities ---------- */
.ratio-cover { object-fit: cover; width: 100%; height: 100%; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.divider-dot { width: 6px; height: 6px; background: var(--ts-green); border-radius: 50%; display: inline-block; }

@media (max-width: 991.98px) {
    .hero { padding: 3.5rem 0 4rem; }
    .section { padding: 3rem 0; }
    .navbar-ts .navbar-collapse { max-height: 75vh; overflow-y: auto; padding-bottom: 1rem; }
}
@media (max-width: 575.98px) {
    body { font-size: 15px; }
    .card-ts .card-body { padding: 1.25rem; }
    .float-contact a { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* ==========================================================================
   Khối nổi bật: Tự tạo website (Web Builder) trên trang chủ
   ========================================================================== */
.wb-section {
    background: radial-gradient(950px 520px at 8% 0%, #4A2B08 0%, #262A2F 52%, #15171B 100%);
    color: rgba(255,255,255,.82);
    position: relative;
    overflow: hidden;
}
.wb-section:before {
    content: ""; position: absolute; width: 620px; height: 620px; right: -180px; bottom: -260px;
    background: radial-gradient(circle, rgba(255,179,0,.22), transparent 65%); border-radius: 50%;
}
.wb-badge {
    display: inline-flex; align-items: center; gap: .5rem; background: rgba(69,165,10,.18);
    border: 1px solid rgba(69,165,10,.45); color: #9EDC63; padding: .4rem 1rem;
    border-radius: 100px; font-size: .85rem; font-weight: 600;
}
.wb-title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25; }
.wb-lead { color: rgba(255,255,255,.75); font-size: 1.05rem; }

.wb-feature { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255,255,255,.72); }
.wb-feature strong { color: #fff; font-size: .95rem; }
.wb-feature-icon {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--ts-accent);
}
.wb-mini-stats > div { border-left: 2px solid var(--ts-green); padding-left: .85rem; }
.wb-mini-stats strong { display: block; color: #fff; font-size: 1.35rem; line-height: 1.1; }
.wb-mini-stats span { color: rgba(255,255,255,.6); font-size: .82rem; }

.wb-card { background: #fff; border-radius: 20px; padding: 1.75rem; box-shadow: 0 30px 70px rgba(0,0,0,.35); color: var(--ts-body); }
.wb-card .form-label { color: var(--ts-dark); }

.wb-type input { position: absolute; opacity: 0; pointer-events: none; }
.wb-type-inner {
    display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--ts-line); border-radius: 12px;
    padding: .7rem .8rem; cursor: pointer; transition: .18s; height: 100%; font-size: .875rem;
}
.wb-type-inner i { color: var(--ts-muted); font-size: 1.05rem; }
.wb-type:hover .wb-type-inner { border-color: var(--ts-primary); }
.wb-type input:checked + .wb-type-inner {
    border-color: var(--ts-primary); background: #FFF6ED; box-shadow: 0 0 0 3px rgba(248,120,0,.12);
}
.wb-type input:checked + .wb-type-inner i { color: var(--ts-primary); }
.wb-type-label { font-weight: 600; color: var(--ts-dark); line-height: 1.25; }

.wb-note { font-size: .8rem; color: var(--ts-muted); text-align: center; }

.wb-spinner {
    width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-accent)); color: #fff; font-size: 1.6rem;
    animation: wbPulse 1.4s ease-in-out infinite;
}
@keyframes wbPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,120,0,.35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(248,120,0,0); } }

.wb-done-icon {
    width: 66px; height: 66px; margin: 0 auto; border-radius: 50%; background: #EDF7E2; color: #45A50A;
    display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.wb-result-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
.wb-result-row > div { background: var(--ts-soft); border-radius: 12px; padding: .6rem .2rem; }
.wb-result-num { display: block; font-weight: 800; font-size: 1.25rem; color: var(--ts-primary); line-height: 1.1; }
.wb-result-row span:last-child { font-size: .72rem; color: var(--ts-muted); }

.wb-preview { border: 1px solid var(--ts-line); border-radius: 14px; overflow: hidden; background: #fff; }
.wb-preview-bar { background: #EFEEEA; padding: .5rem .7rem; display: flex; gap: 6px; }
.wb-preview-bar span { width: 10px; height: 10px; border-radius: 50%; background: #CFD0D3; }
.wb-preview iframe { width: 100%; height: 300px; border: 0; display: block; }

/* Thanh nhãn demo hiển thị trên chính website được tạo */
.demo-ribbon {
    background: linear-gradient(90deg, #F87800, #FFB300); color: #fff; padding: .55rem 1rem;
    font-size: .85rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center;
}
.demo-ribbon a { color: #fff; text-decoration: underline; font-weight: 700; }

@media (max-width: 575.98px) {
    .wb-card { padding: 1.25rem; }
    .wb-result-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Ghi đè bảng màu mặc định của Bootstrap theo màu logo TOPSITE
   (cam #F87800 - hổ phách #FFB300 - xanh lá #45A50A - than chì #23262B)
   ========================================================================== */
:root {
    --bs-primary: #F87800;
    --bs-primary-rgb: 248, 120, 0;
    --bs-primary-bg-subtle: #FFEDDC;
    --bs-primary-border-subtle: #FFD1A6;
    --bs-primary-text-emphasis: #A54F00;

    --bs-success: #45A50A;
    --bs-success-rgb: 69, 165, 10;
    --bs-success-bg-subtle: #EAF6DE;
    --bs-success-border-subtle: #C6E5A6;
    --bs-success-text-emphasis: #2F7C05;

    --bs-info: #6E757C;
    --bs-info-rgb: 110, 117, 124;
    --bs-info-bg-subtle: #EEF1F3;
    --bs-info-border-subtle: #D7DDE1;
    --bs-info-text-emphasis: #495056;

    --bs-link-color: #F87800;
    --bs-link-color-rgb: 248, 120, 0;
    --bs-link-hover-color: #C25E00;
    --bs-link-hover-color-rgb: 194, 94, 0;

    --bs-focus-ring-color: rgba(248, 120, 0, .25);
    --bs-body-color: #4B5158;
}

.btn-primary {
    --bs-btn-bg: #F87800; --bs-btn-border-color: #F87800;
    --bs-btn-hover-bg: #DE6B00; --bs-btn-hover-border-color: #D16500;
    --bs-btn-active-bg: #C25E00; --bs-btn-active-border-color: #C25E00;
    --bs-btn-disabled-bg: #F87800; --bs-btn-disabled-border-color: #F87800;
    --bs-btn-focus-shadow-rgb: 248, 120, 0;
}
.btn-outline-primary {
    --bs-btn-color: #C25E00; --bs-btn-border-color: #F87800;
    --bs-btn-hover-bg: #F87800; --bs-btn-hover-border-color: #F87800;
    --bs-btn-active-bg: #C25E00; --bs-btn-active-border-color: #C25E00;
    --bs-btn-focus-shadow-rgb: 248, 120, 0;
}
.btn-success {
    --bs-btn-bg: #45A50A; --bs-btn-border-color: #45A50A;
    --bs-btn-hover-bg: #3B8F08; --bs-btn-hover-border-color: #378507;
    --bs-btn-active-bg: #2F7C05; --bs-btn-active-border-color: #2F7C05;
    --bs-btn-focus-shadow-rgb: 69, 165, 10;
}
.btn-outline-success {
    --bs-btn-color: #2F7C05; --bs-btn-border-color: #45A50A;
    --bs-btn-hover-bg: #45A50A; --bs-btn-hover-border-color: #45A50A;
    --bs-btn-active-bg: #2F7C05; --bs-btn-active-border-color: #2F7C05;
    --bs-btn-focus-shadow-rgb: 69, 165, 10;
}
.btn-link { --bs-btn-color: #C25E00; --bs-btn-hover-color: #A54F00; }

.form-control:focus, .form-select:focus {
    border-color: #FBB16B;
    box-shadow: 0 0 0 .2rem rgba(248, 120, 0, .18);
}
.form-check-input:checked { background-color: #F87800; border-color: #F87800; }
.form-check-input:focus {
    border-color: #FBB16B;
    box-shadow: 0 0 0 .2rem rgba(248, 120, 0, .18);
}
.form-range::-webkit-slider-thumb { background-color: #F87800; }

.pagination {
    --bs-pagination-color: #C25E00;
    --bs-pagination-hover-color: #A54F00;
    --bs-pagination-focus-color: #A54F00;
    --bs-pagination-hover-bg: #FFF1E0;
    --bs-pagination-focus-bg: #FFF1E0;
    --bs-pagination-active-bg: #F87800;
    --bs-pagination-active-border-color: #F87800;
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(248, 120, 0, .18);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(248, 120, 0, .18);
    --bs-accordion-active-color: #C25E00;
    --bs-accordion-active-bg: #FFF1E0;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C25E00'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.progress { --bs-progress-bar-bg: #F87800; }
.list-group { --bs-list-group-active-bg: #F87800; --bs-list-group-active-border-color: #F87800; }
.dropdown-menu { --bs-dropdown-link-active-bg: #F87800; }
.nav-pills { --bs-nav-pills-link-active-bg: #F87800; }
.nav-tabs { --bs-nav-tabs-link-active-color: #C25E00; }
.spinner-border, .spinner-grow { color: inherit; }