/* =========================================================
   Toàn Phát THT — Flat Design System
   Font: Inter | Framework: Bootstrap 5.3
   ========================================================= */

:root{
  --tp-primary:#0FA98C;
  --tp-primary-dark:#0C8A72;
  --tp-primary-soft:#E6F6F2;
  --tp-secondary:#7BC142;
  --tp-accent:#C2185B;
  --tp-ink:#1A2332;
  --tp-text:#2E3644;
  --tp-muted:#6B7280;
  --tp-line:#E5E7EB;
  --tp-line-2:#F0F2F5;
  --tp-bg:#F7F9FB;
  --tp-white:#FFFFFF;
  --tp-warning:#F59E0B;
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--tp-text);
  background:var(--tp-white);
  line-height:1.6;
  font-size:15px;
}

h1,h2,h3,h4,h5,h6{ color:var(--tp-ink); font-weight:700; letter-spacing:-.01em; line-height:1.25; }
h1{ font-size:2.5rem; }
h2{ font-size:2rem; }
h3{ font-size:1.5rem; }
h4{ font-size:1.25rem; }
h5{ font-size:1.1rem; }
p{ color:var(--tp-text); }
a{ color:var(--tp-primary); text-decoration:none; transition:.2s; }
a:hover{ color:var(--tp-primary-dark); }
img{ max-width:100%; height:auto; }

.text-muted{ color:var(--tp-muted)!important; }
.text-primary{ color:var(--tp-primary)!important; }
.bg-primary{ background:var(--tp-primary)!important; }
.bg-soft{ background:var(--tp-primary-soft); }
.bg-light-gray{ background:var(--tp-bg); }
.bg-ink{ background:var(--tp-ink); color:#cfd6df; }

/* -------- Homepage: Hero + Quick Access + About media -------- */
.hero-home{ position:relative; overflow:hidden; }
.hero-slide{ position:relative; background:#0F1B2D; min-height:560px; display:flex; align-items:center; color:#fff; }
.hero-slide::before{ content:""; position:absolute; inset:0; /* background set inline per-page */ }
.hero-slide .container{ position:relative; z-index:2; padding:80px 0; }
.hero-slide h1{ color:#fff; font-size:3rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-bottom:20px; }
.hero-slide .lead{ color:#E1E4E8; font-size:1.1rem; max-width:640px; margin-bottom:28px; }
.hero-slide .tag{ display:inline-flex; align-items:center; gap:12px; background:transparent; border:0; padding:0; color:#7BC142; font-size:.82rem; text-transform:uppercase; letter-spacing:.18em; font-weight:600; margin-bottom:20px; }
.hero-slide .tag::before{ content:""; display:inline-block; width:36px; height:2px; background:#7BC142; }
@media(max-width:768px){ .hero-slide{ min-height:440px; } .hero-slide h1{ font-size:2rem; } }

.quick-access{ background:#fff; margin-top:-40px; position:relative; z-index:3; padding:24px 0; border:1px solid var(--tp-line); border-radius:2px; }
.quick-item{ display:flex; gap:16px; align-items:center; padding:16px 20px; border-right:1px solid var(--tp-line); }
.quick-item:last-child{ border-right:0; }
.quick-item .ico{ width:44px; height:44px; background:var(--tp-primary-soft); color:var(--tp-primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.quick-item .txt{ line-height:1.3; }
.quick-item .txt strong{ color:var(--tp-ink); font-size:.95rem; display:block; }
.quick-item .txt span{ color:var(--tp-muted); font-size:.8rem; }
@media(max-width:991px){ .quick-item{ border-right:0; border-bottom:1px solid var(--tp-line); } .quick-item:last-child{ border-bottom:0; } }

.about-media{ position:relative; }
.about-media .main-img{ width:100%; height:420px; object-fit:cover; }
.about-media .sub-img{ position:absolute; right:-24px; bottom:-24px; width:220px; height:200px; object-fit:cover; border:6px solid #fff; display:none; }
@media(min-width:768px){ .about-media .sub-img{ display:block; } }

/* -------- Sections -------- */
.section{ padding:80px 0; }
.section-sm{ padding:56px 0; }
@media(max-width:768px){ .section{ padding:56px 0; } .section-sm{ padding:40px 0; } }

.section-title{ margin-bottom:12px; }
.section-eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600;
  color:var(--tp-primary); text-transform:uppercase; letter-spacing:.16em;
  padding:6px 14px; background:var(--tp-primary-soft); border-radius:2px;
  margin-bottom:16px;
}
.section-desc{ color:var(--tp-muted); max-width:640px; margin:0 auto; }
.divider{ height:3px; width:48px; background:var(--tp-primary); margin:16px 0; border-radius:2px; }
.divider-center{ margin-left:auto; margin-right:auto; }

/* -------- Buttons (flat) -------- */
.btn{ border-radius:2px; padding:.7rem 1.5rem; font-weight:500; font-size:.92rem; transition:.2s; border-width:1px; }
.btn-tp-primary{ background:var(--tp-primary); color:#fff; border:1px solid var(--tp-primary); }
.btn-tp-primary:hover{ background:var(--tp-primary-dark); border-color:var(--tp-primary-dark); color:#fff; }
.btn-tp-outline{ background:transparent; color:var(--tp-primary); border:1px solid var(--tp-primary); }
.btn-tp-outline:hover{ background:var(--tp-primary); color:#fff; }
.btn-tp-ink{ background:var(--tp-ink); color:#fff; border:1px solid var(--tp-ink); }
.btn-tp-ink:hover{ background:#000; color:#fff; }
.btn-tp-light{ background:#fff; color:var(--tp-ink); border:1px solid var(--tp-line); }
.btn-tp-light:hover{ background:var(--tp-bg); }

/* -------- Topbar -------- */
.topbar{ background:var(--tp-ink); color:#B5BCC6; font-size:.82rem; padding:9px 0; }
.topbar a{ color:#B5BCC6; }
.topbar a:hover{ color:#fff; }
.topbar .separator{ opacity:.3; margin:0 12px; }

/* -------- Header -------- */
.site-header{ background:#fff; border-bottom:1px solid var(--tp-line); position:sticky; top:0; z-index:1030; }
.site-header .navbar{ padding:.75rem 0; }
.site-header .navbar-brand{ display:flex; align-items:center; gap:12px; padding:0; }
.site-header .navbar-brand img{ height:48px; width:auto; }
.site-header .brand-text{ line-height:1.15; }
.site-header .brand-text .b1{ font-weight:700; color:var(--tp-ink); font-size:1rem; }
.site-header .brand-text .b2{ font-size:.72rem; color:var(--tp-muted); text-transform:uppercase; letter-spacing:.1em; }
.site-header .nav-link{ color:var(--tp-ink)!important; font-weight:500; font-size:.94rem; padding:.5rem 1rem!important; position:relative; }
.site-header .nav-link:hover, .site-header .nav-link.active{ color:var(--tp-primary)!important; }
.site-header .nav-link.active::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:-2px; height:2px; background:var(--tp-primary); }
.site-header .dropdown-menu{ border:1px solid var(--tp-line); border-radius:2px; padding:.5rem 0; box-shadow:0 6px 20px rgba(26,35,50,.08); }
.site-header .dropdown-item{ padding:.55rem 1.25rem; font-size:.9rem; color:var(--tp-ink); }
.site-header .dropdown-item:hover{ background:var(--tp-primary-soft); color:var(--tp-primary); }

/* -------- Page Banner (inner pages) -------- */
.page-banner{
  background:var(--tp-ink);
  background-image:linear-gradient(rgba(26,35,50,.75), rgba(26,35,50,.85)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1600&q=80');
  background-size:cover; background-position:center;
  color:#fff; padding:70px 0 60px;
}
.page-banner h1{ color:#fff; font-size:2.2rem; margin-bottom:8px; }
.breadcrumb{ margin-bottom:0; font-size:.88rem; }
.breadcrumb a{ color:#cfd6df; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb-item.active{ color:#fff; }
.breadcrumb-item+.breadcrumb-item::before{ color:#8892a1; }

/* -------- Cards -------- */
.card-flat{ background:#fff; border:1px solid var(--tp-line); border-radius:4px; transition:.2s; height:100%; }
.card-flat:hover{ border-color:var(--tp-primary); }

/* Service card */
.service-card{ background:#fff; border:1px solid var(--tp-line); padding:32px 28px; height:100%; transition:.2s; text-align:center; }
.service-card:hover{ border-color:var(--tp-primary); background:var(--tp-primary-soft); }
.service-card .ico{
  width:64px; height:64px; margin:0 auto 20px;
  background:var(--tp-primary-soft); color:var(--tp-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.service-card:hover .ico{ background:var(--tp-primary); color:#fff; }
.service-card h4{ margin-bottom:10px; font-size:1.15rem; }
.service-card p{ color:var(--tp-muted); font-size:.9rem; margin-bottom:0; }

/* Service card with image */
.service-card-img{ background:#fff; border:1px solid var(--tp-line); overflow:hidden; height:100%; transition:.2s; }
.service-card-img:hover{ border-color:var(--tp-primary); }
.service-card-img .img{ height:200px; overflow:hidden; background:var(--tp-bg); }
.service-card-img .img img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.service-card-img:hover .img img{ transform:scale(1.05); }
.service-card-img .body{ padding:24px; }
.service-card-img h4{ margin-bottom:10px; font-size:1.15rem; }
.service-card-img h4 a{ color:var(--tp-ink); }
.service-card-img h4 a:hover{ color:var(--tp-primary); }
.service-card-img p{ color:var(--tp-muted); font-size:.9rem; margin-bottom:14px; }
.service-card-img .more{ font-weight:600; font-size:.85rem; }
.service-card-img .more i{ transition:.2s; }
.service-card-img:hover .more i{ transform:translateX(4px); }

/* Project card */
.project-card{ position:relative; overflow:hidden; height:100%; }
.project-card .thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--tp-bg); }
.project-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.project-card:hover .thumb img{ transform:scale(1.06); }
.project-card .info{ padding:20px; background:#fff; border:1px solid var(--tp-line); border-top:0; }
.project-card .cat{ font-size:.75rem; color:var(--tp-primary); text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.project-card h4{ font-size:1.1rem; margin:8px 0 6px; }
.project-card h4 a{ color:var(--tp-ink); }
.project-card h4 a:hover{ color:var(--tp-primary); }
.project-card .meta{ color:var(--tp-muted); font-size:.82rem; }

/* News card */
.news-card{ background:#fff; border:1px solid var(--tp-line); overflow:hidden; height:100%; transition:.2s; }
.news-card:hover{ border-color:var(--tp-primary); }
.news-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.news-card:hover .thumb img{ transform:scale(1.05); }
.news-card .body{ padding:22px; }
.news-card .meta{ font-size:.8rem; color:var(--tp-muted); margin-bottom:8px; }
.news-card .meta .cat{ color:var(--tp-primary); font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.news-card h4{ font-size:1.05rem; line-height:1.4; margin-bottom:10px; }
.news-card h4 a{ color:var(--tp-ink); }
.news-card h4 a:hover{ color:var(--tp-primary); }
.news-card .excerpt{ color:var(--tp-muted); font-size:.88rem; margin-bottom:0; }

/* Featured news (large) */
.news-featured{ position:relative; overflow:hidden; min-height:420px; }
.news-featured img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.news-featured::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 60%, transparent 100%); }
.news-featured .overlay{ position:absolute; left:0; right:0; bottom:0; padding:32px; color:#fff; z-index:2; }
.news-featured .cat{ display:inline-block; background:var(--tp-primary); color:#fff; padding:4px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; margin-bottom:12px; }
.news-featured h3{ color:#fff; font-size:1.5rem; margin-bottom:8px; }
.news-featured h3 a{ color:#fff; }
.news-featured .meta{ font-size:.82rem; color:#cfd6df; }

/* -------- Sidebar (news detail, blog) -------- */
.sidebar-widget{ background:#fff; border:1px solid var(--tp-line); padding:24px; margin-bottom:24px; }
.sidebar-widget h5{ font-size:1rem; font-weight:700; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--tp-line); position:relative; }
.sidebar-widget h5::before{ content:""; position:absolute; left:0; bottom:-1px; width:36px; height:2px; background:var(--tp-primary); }
.sidebar-widget .list-unstyled li{ padding:10px 0; border-bottom:1px solid var(--tp-line-2); }
.sidebar-widget .list-unstyled li:last-child{ border-bottom:0; }
.sidebar-widget .list-unstyled a{ color:var(--tp-ink); font-size:.9rem; display:flex; justify-content:space-between; align-items:center; }
.sidebar-widget .list-unstyled a:hover{ color:var(--tp-primary); }
.sidebar-widget .count{ background:var(--tp-bg); padding:2px 8px; font-size:.75rem; color:var(--tp-muted); }
.sidebar-widget .recent-post{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--tp-line-2); }
.sidebar-widget .recent-post:last-child{ border-bottom:0; }
.sidebar-widget .recent-post img{ width:70px; height:70px; object-fit:cover; flex-shrink:0; }
.sidebar-widget .recent-post h6{ font-size:.88rem; margin:0 0 4px; line-height:1.35; }
.sidebar-widget .recent-post h6 a{ color:var(--tp-ink); }
.sidebar-widget .recent-post h6 a:hover{ color:var(--tp-primary); }
.sidebar-widget .recent-post .date{ font-size:.75rem; color:var(--tp-muted); }
.sidebar-widget .tag-cloud a{
  display:inline-block; padding:5px 12px; background:var(--tp-bg);
  color:var(--tp-ink); font-size:.8rem; margin:0 4px 6px 0; border:1px solid var(--tp-line);
}
.sidebar-widget .tag-cloud a:hover{ background:var(--tp-primary); color:#fff; border-color:var(--tp-primary); }

/* -------- Stats bar -------- */
.stats-bar{ background:var(--tp-ink); color:#fff; padding:56px 0; }
.stat-item{ text-align:center; padding:16px 0; }
.stat-item .num{ font-size:2.5rem; font-weight:700; color:var(--tp-primary); line-height:1; }
.stat-item .label{ color:#B5BCC6; margin-top:8px; font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; }

/* -------- Feature list (about) -------- */
.feature-item{ display:flex; gap:18px; padding:20px 0; }
.feature-item .ico{
  width:52px; height:52px; flex-shrink:0;
  background:var(--tp-primary-soft); color:var(--tp-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.feature-item h5{ margin:0 0 4px; font-size:1.05rem; }
.feature-item p{ color:var(--tp-muted); font-size:.9rem; margin:0; }

/* -------- Partners -------- */
.partner-logo{
  height:80px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--tp-line); padding:16px;
  transition:.2s;
}
.partner-logo:hover{ border-color:var(--tp-primary); }
.partner-logo img{ max-height:100%; max-width:100%; filter:grayscale(1) opacity(.7); transition:.2s; }
.partner-logo:hover img{ filter:none; }

/* -------- Team member -------- */
.team-card{ background:#fff; border:1px solid var(--tp-line); overflow:hidden; text-align:center; }
.team-card .photo{ aspect-ratio:1/1; overflow:hidden; background:var(--tp-bg); }
.team-card .photo img{ width:100%; height:100%; object-fit:cover; }
.team-card .body{ padding:20px; }
.team-card h5{ font-size:1.05rem; margin-bottom:2px; }
.team-card .pos{ color:var(--tp-primary); font-size:.85rem; font-weight:500; }
.team-card .social{ margin-top:12px; }
.team-card .social a{ color:var(--tp-muted); margin:0 6px; font-size:1rem; }
.team-card .social a:hover{ color:var(--tp-primary); }

/* -------- Timeline (history) -------- */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{ content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:var(--tp-line); }
.timeline-item{ position:relative; padding-bottom:32px; }
.timeline-item::before{ content:""; position:absolute; left:-30px; top:6px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--tp-primary); }
.timeline-item .year{ color:var(--tp-primary); font-weight:700; font-size:1.1rem; }
.timeline-item h5{ margin:4px 0 6px; }
.timeline-item p{ color:var(--tp-muted); margin:0; font-size:.9rem; }

/* -------- Filter buttons -------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; }
.filter-btn{ background:transparent; border:1px solid var(--tp-line); color:var(--tp-ink); padding:8px 18px; font-size:.88rem; font-weight:500; transition:.2s; cursor:pointer; }
.filter-btn:hover, .filter-btn.active{ background:var(--tp-primary); border-color:var(--tp-primary); color:#fff; }

/* -------- Contact form -------- */
.form-control, .form-select{ border-radius:2px; border:1px solid var(--tp-line); padding:.7rem .9rem; font-size:.92rem; }
.form-control:focus, .form-select:focus{ border-color:var(--tp-primary); box-shadow:0 0 0 3px rgba(15,169,140,.12); }
.form-label{ font-weight:500; color:var(--tp-ink); font-size:.88rem; }

.info-box{ display:flex; gap:16px; padding:24px; background:#fff; border:1px solid var(--tp-line); }
.info-box .ico{ width:52px; height:52px; flex-shrink:0; background:var(--tp-primary-soft); color:var(--tp-primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.info-box h5{ font-size:1rem; margin-bottom:4px; }
.info-box p{ color:var(--tp-muted); font-size:.9rem; margin:0; }

/* -------- Article (single post) -------- */
.article-header .meta{ color:var(--tp-muted); font-size:.88rem; margin-bottom:14px; }
.article-header .meta .cat{ color:var(--tp-primary); font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-right:16px; }
.article-header h1{ font-size:2rem; line-height:1.25; }
.article-featured{ margin:28px 0; }
.article-featured img{ width:100%; }
.article-body{ font-size:1rem; line-height:1.8; color:var(--tp-text); }
.article-body p{ margin-bottom:18px; }
.article-body h2{ font-size:1.5rem; margin:32px 0 14px; }
.article-body h3{ font-size:1.25rem; margin:24px 0 10px; }
.article-body blockquote{ border-left:3px solid var(--tp-primary); padding:12px 20px; background:var(--tp-primary-soft); margin:20px 0; font-style:italic; color:var(--tp-ink); }
.article-body ul{ padding-left:20px; }
.article-body ul li{ margin-bottom:6px; }
.article-body img{ margin:20px 0; }
.article-tags a{ display:inline-block; padding:6px 14px; background:var(--tp-bg); border:1px solid var(--tp-line); color:var(--tp-ink); font-size:.82rem; margin:0 6px 6px 0; }
.article-tags a:hover{ background:var(--tp-primary); color:#fff; border-color:var(--tp-primary); }
.share-box{ display:flex; align-items:center; gap:14px; padding:20px 0; border-top:1px solid var(--tp-line); border-bottom:1px solid var(--tp-line); margin:32px 0; }
.share-box span{ font-weight:600; color:var(--tp-ink); }
.share-box a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:var(--tp-bg); color:var(--tp-ink); border:1px solid var(--tp-line); }
.share-box a:hover{ background:var(--tp-primary); color:#fff; border-color:var(--tp-primary); }

/* -------- CTA banner -------- */
.cta-banner{ background:var(--tp-ink); color:#fff; padding:56px; position:relative; overflow:hidden; }
.cta-banner h3{ color:#fff; margin-bottom:6px; }
.cta-banner p{ color:#B5BCC6; margin-bottom:0; }

/* -------- CTA full-width strip -------- */
.cta-full{ background:var(--tp-primary); color:#fff; padding:80px 0; }
.cta-full h3{ color:#fff; margin:0 0 8px; font-size:1.75rem; font-weight:700; }
.cta-full p{ color:#E1F5EF; margin-bottom:0; font-size:1rem; }
.cta-full .btn{ background:#fff; color:var(--tp-primary); border:1px solid #fff; padding:.85rem 1.75rem; font-weight:600; }
.cta-full .btn:hover{ background:var(--tp-ink); color:#fff; border-color:var(--tp-ink); }
@media(max-width:991px){
  .cta-full{ padding:56px 0; text-align:center; }
  .cta-full h3{ font-size:1.5rem; }
  .cta-full .text-lg-end{ margin-top:20px; }
}

/* -------- Pagination -------- */
.page-item .page-link{ color:var(--tp-ink); border:1px solid var(--tp-line); border-radius:0; margin:0 2px; padding:.55rem .95rem; font-size:.9rem; }
.page-item.active .page-link{ background:var(--tp-primary); border-color:var(--tp-primary); color:#fff; }
.page-item .page-link:hover{ background:var(--tp-primary-soft); color:var(--tp-primary); }

/* -------- Footer -------- */
.site-footer{ background:var(--tp-ink); color:#B5BCC6; padding:64px 0 0; margin-top:0; }
.site-footer h6{ color:#fff; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:20px; position:relative; padding-bottom:12px; }
.site-footer h6::after{ content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--tp-primary); }
.site-footer a{ color:#B5BCC6; }
.site-footer a:hover{ color:#fff; }
.site-footer .brand-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.site-footer .brand-row img{ height:52px; }
.site-footer .brand-row strong{ color:#fff; font-size:1rem; }
.site-footer .brand-row .b2{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.site-footer .list-unstyled li{ margin-bottom:8px; font-size:.9rem; }
.site-footer .contact-line{ display:flex; gap:12px; margin-bottom:12px; font-size:.9rem; }
.site-footer .contact-line i{ color:var(--tp-primary); margin-top:4px; flex-shrink:0; }
.site-footer .social{ display:flex; gap:8px; margin-top:16px; }
.site-footer .social a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.08); }
.site-footer .social a:hover{ background:var(--tp-primary); border-color:var(--tp-primary); }
.site-footer .newsletter input{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; }
.site-footer .newsletter input::placeholder{ color:#8892a1; }
.site-footer .newsletter input:focus{ background:rgba(255,255,255,.1); border-color:var(--tp-primary); color:#fff; box-shadow:none; }
.site-footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 0; margin-top:48px; font-size:.85rem; }
.site-footer .footer-bottom a{ margin-left:16px; }

/* Back to top */
.back-to-top{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px;
  background:var(--tp-primary); color:#fff; display:none;
  align-items:center; justify-content:center;
  z-index:1000; text-decoration:none; transition:.2s;
}
.back-to-top:hover{ background:var(--tp-primary-dark); color:#fff; }
.back-to-top.show{ display:flex; }

/* -------- Floating support panel (right side, card style) -------- */
.support-panel{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:1050;
  background:#fff;
  border:1px solid var(--tp-line);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(15,27,45,.14);
  padding:14px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:92px;
}
.sp-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--tp-ink);
  font-size:.72rem;
  font-weight:500;
  text-align:center;
  line-height:1.25;
  transition:transform .2s ease, color .2s ease;
}
.sp-item:hover{ transform:translateY(-2px); color:var(--tp-primary); }
.sp-ico{
  position:relative;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.sp-zalo{ background:#2196F3; }
.sp-zalo-text{
  font-family:'Inter',sans-serif; font-weight:800; font-size:.9rem;
  letter-spacing:.02em; color:#fff; font-style:italic;
}
.sp-call{ background:#25D366; }
.sp-messenger{ background:linear-gradient(135deg,#00B2FF 0%,#006AFF 100%); }
.sp-facebook{ background:#1877F2; }
.sp-quote{ background:#EE1D23; }

/* Pulse effect on Call button */
.sp-call::before,
.sp-call::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; z-index:-1;
  animation:sp-pulse 1.8s ease-out infinite;
}
.sp-call::after{ animation-delay:.9s; }
@keyframes sp-pulse{
  0%   { transform:scale(1);   opacity:.55; }
  100% { transform:scale(1.9); opacity:0; }
}

/* HOT badge on Nhận báo giá */
.sp-badge{
  position:absolute; top:-6px; right:-10px;
  background:#FFB300; color:#fff;
  font-size:.6rem; font-weight:800; letter-spacing:.05em;
  padding:2px 6px; border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}

@media(max-width:576px){
  .support-panel{ right:8px; padding:10px 6px; gap:10px; width:80px; }
  .sp-ico{ width:44px; height:44px; font-size:1.2rem; }
  .sp-zalo-text{ font-size:.78rem; }
  .sp-item{ font-size:.68rem; }
}

/* Utilities */
.hover-lift{ transition:.2s; }
.hover-lift:hover{ transform:translateY(-3px); }

/* Responsive tweaks */
@media(max-width:991px){
  h1{ font-size:2rem; } h2{ font-size:1.6rem; }
  .page-banner{ padding:50px 0 40px; }
  .cta-banner{ padding:40px 24px; text-align:center; }
}