/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Các class dưới đây được gán cho Section/Row/Col trong UX Builder (ô "Class") */
:root { --g1:#0c8767; --g2:#0f9e78; --g3:#0a6b52; --mint:#e8faf5; }
body { font-size:16px; }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.01em; }
.header-main .nav > li > a { font-weight:500; }
.header-button .button.white { color:var(--g1)!important; font-weight:900; white-space:nowrap; }

/* Hero xanh với vòng tròn đồng tâm */
.xd-hero { background-color:var(--g1)!important; overflow:hidden; }
.xd-hero .section-bg { background:
  repeating-radial-gradient(circle at 26% 55%, rgba(255,255,255,.07) 0 2px, transparent 2px 34px); }
.xd-hero h2 { font-size:34px; font-weight:500; }
.xd-hero h3 { font-size:18px; font-weight:700; margin-bottom:6px; }
.xd-hero p { color:rgba(255,255,255,.88); font-size:14px; }
.xd-hero .xd-name { font-weight:900; font-size:26px; text-transform:uppercase; }
.xd-avatar img { border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.08), 0 0 0 42px rgba(255,255,255,.05); }

/* Nền pastel mờ */
.xd-pastel { background:
  radial-gradient(40% 50% at 10% 20%, rgba(186,230,253,.45), transparent 70%),
  radial-gradient(35% 45% at 85% 30%, rgba(233,213,255,.45), transparent 70%),
  radial-gradient(40% 50% at 50% 90%, rgba(187,247,208,.45), transparent 70%), #fff!important; }
.xd-quote { font-size:20px; line-height:1.75; text-align:center; }
.xd-quote .xd-quote-mark { font-size:70px; line-height:1; color:var(--g1); font-weight:900; display:block; }

/* Thẻ dịch vụ */
.xd-card > .col-inner { background:rgba(255,255,255,.88); border-radius:18px; padding:34px 30px!important;
  box-shadow:0 12px 40px rgba(12,135,103,.10); }
.xd-card h3 { color:var(--g1); text-transform:uppercase; font-size:20px; }
.xd-kicker { color:var(--g1); font-weight:800; text-transform:uppercase; }
.xd-hl { color:var(--g1); font-weight:700; }

/* Dải gradient xanh */
.xd-grad { background:linear-gradient(200deg,var(--g2) 0%,var(--g1) 100%)!important; }
.xd-grad-radial { background:radial-gradient(at 100% 50%, var(--g1) 45%, #11c46b 100%)!important; }
.xd-grad p, .xd-grad-radial p { color:#fff; }
.xd-lead { font-size:22px; line-height:1.6; font-weight:500; }

/* Bảng giá */
.xd-price-title { font-size:56px!important; font-weight:900; color:var(--g1); text-transform:uppercase; }
.xd-price > .col-inner { border:1px solid #d6efe6; border-radius:14px; overflow:hidden; background:#fff; padding:0!important;
  box-shadow:0 10px 30px rgba(12,135,103,.08); transition:transform .25s; height:100%; }
.xd-price > .col-inner:hover { transform:translateY(-6px); }
.xd-price .xd-price-head { background:var(--g2); color:#fff; text-align:center; padding:20px 10px 14px; }
.xd-price .xd-price-head h3 { color:#fff; margin:0; font-size:22px; font-weight:900; text-transform:uppercase; }
.xd-price .xd-price-head small { opacity:.85; }
.xd-price .xd-price-num { text-align:center; font-size:48px; font-weight:900; color:var(--g1); padding:18px 0 6px; line-height:1; }
.xd-price .xd-price-body { padding:12px 22px 24px; font-size:14px; }
.xd-price.is-featured > .col-inner { background:var(--g1); }
.xd-price.is-featured .xd-price-head { background:var(--g3); }
.xd-price.is-featured .xd-price-num, .xd-price.is-featured .xd-price-body { color:#fff; }

/* Hộp gợi ý có icon */
.xd-tip .icon-box { background:#eef8f4; border-radius:10px; padding:14px; }
.xd-tip h5 { color:var(--g1); margin-bottom:2px; }
.xd-tip p { font-size:13px; margin:0; }

/* FAQ */
.xd-faq .accordion-title { color:var(--g1); font-weight:500; border:1px solid #cfe9df; border-radius:6px; margin-top:8px; }
.xd-faq .accordion-title.active { background:#f2fbf8; }
.xd-faq .accordion-inner { border:1px solid #cfe9df; border-top:0; font-size:14px; }

/* Footer block */
.xd-footer { background:linear-gradient(200deg,#0e9577 0%,#0a8768 100%)!important; }
.xd-footer .xd-foot-title { background:rgba(255,255,255,.18); border-radius:30px; text-align:center; color:#fff; font-weight:700;
  font-size:14px; padding:7px 10px; margin-bottom:14px; text-transform:uppercase; }
.xd-footer ul { list-style:none; margin:0; }
.xd-footer li { margin:0 0 6px; font-size:13px; }
.xd-footer li:before { content:"›"; margin-right:8px; opacity:.8; }
.xd-footer a { color:#fff; }
.xd-footer a:hover { color:#d8fff1; }
.absolute-footer { background:#0a6b52!important; }

/* Tiêu đề trang con */
.xd-page-hero { background:linear-gradient(180deg,var(--g2) 0%,var(--g1) 100%)!important; }
.xd-page-hero h1 { font-size:44px; text-transform:uppercase; font-weight:900; letter-spacing:.02em; }
.xd-note > .col-inner { background:#f2fbf8; border:1px solid #cfe9df; border-radius:10px; padding:22px!important; }
.xd-alert > .col-inner { background:#e53935; color:#fff; border-radius:8px; padding:14px 20px!important; font-weight:700; font-style:italic; text-align:center; }

/* Thẻ dự án / mẫu web */
.xd-proj > .col-inner { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 8px 28px rgba(10,61,51,.10); padding-bottom:14px!important; transition:transform .25s; }
.xd-proj > .col-inner:hover { transform:translateY(-5px); }
.xd-proj h4 { color:#0f9e78; text-transform:uppercase; font-size:15px; margin:12px 10px 4px; }
.xd-proj .xd-proj-price { text-align:center; color:#e53935; font-weight:700; font-size:18px; margin-bottom:8px; }

.xd-proj .xd-proj-tag { display:block; text-align:center; margin-top:12px; font-size:11px; font-weight:700; text-transform:uppercase; color:#0c8767; letter-spacing:.05em; }
.xd-proj .xd-proj-desc { text-align:center; font-size:13px; color:#555; margin:0 14px 6px; min-height:40px; }
.xd-price .xd-check { list-style:none; margin:0 0 14px; }
.xd-price .xd-check li { padding:5px 0 5px 24px; position:relative; border-bottom:1px dashed rgba(12,135,103,.15); }
.xd-price .xd-check li:before { content:"✓"; position:absolute; left:2px; color:#23a455; font-weight:900; }
.xd-price.is-featured .xd-check li { border-color:rgba(255,255,255,.2); }
.xd-price.is-featured .xd-check li:before { color:#b8ffe0; }
.xd-step { text-align:center; padding:10px; }
.xd-step span { display:inline-flex; width:54px; height:54px; border-radius:50%; background:#fff; color:#0c8767; font-weight:900; font-size:22px; align-items:center; justify-content:center; margin-bottom:10px; }
.xd-step p { font-size:14px; opacity:.9; }
.xd-stat { text-align:center; }
.xd-stat strong { display:block; font-size:44px; font-weight:900; line-height:1.1; }
.xd-stat span { opacity:.9; }
.xd-stat-dark { background:#f2fbf8; border:1px solid #cfe9df; border-radius:12px; padding:18px 10px; }
.xd-stat-dark strong { color:#0c8767; }
.xd-stat-dark span { color:#335; }
.xd-proj .col-inner > .img a img { transition:transform .3s; }
.xd-proj .col-inner > .img a:hover img { transform:scale(1.03); }
.entry-content h2 { color:#0c8767; font-size:24px; margin-top:28px; }
.entry-content blockquote { border-left:4px solid #0f9e78; background:#f2fbf8; padding:14px 18px; font-style:normal; }

/* Ảnh cá nhân */
.xd-cta-person img { border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.xd-photo img { border-radius:14px; box-shadow:0 12px 36px rgba(10,61,51,.15); }
.xd-side-av { text-align:center; margin-bottom:10px; }
.xd-side-av img { width:120px!important; height:120px; object-fit:cover; border-radius:50%; border:4px solid #e8faf5; }

/* Cho thuê web */
.xd-big-title { font-size:56px; line-height:1; color:#23a455; font-weight:900; text-transform:uppercase; }
.xd-domain { background:#e6fbef; border:1px solid #23a455; border-radius:6px; padding:10px 14px; margin:0; }
.xd-domain strong { color:#0c8767; }

/* Liên hệ: dải highlight dưới tiêu đề */
.xd-title-mark { display:inline-block; background:#23a455; color:rgba(255,255,255,.35); font-size:48px; font-weight:900; padding:0 12px; }

/* Blog */
.xd-blog .box-blog-post { border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(10,61,51,.10); background:#fff; }
.xd-blog .box-text { padding:14px 16px!important; }
.xd-blog .post-title { font-size:17px; }

@media only screen and (max-width: 48em) {
.xd-big-title { font-size:38px; }
.xd-title-mark { font-size:28px; }
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.xd-hero h2 { font-size:26px; }
.xd-price-title { font-size:38px!important; }
.xd-quote { font-size:17px; }
.xd-page-hero h1 { font-size:30px; }
}