/*
 * Flamingo Cat Ba Sea & Sand Resort – giao diện trắng & vàng theo phong cách vinpearl.com
 * Nạp sau app.css (xem resources/views/layouts/public.blade.php).
 * Mã màu, font đo trực tiếp trên vinpearl.com ngày 04/10/2026; màu tên resort lấy từ logo.
 */
:root {
  --color-brand-primary: #E8952F;   /* chữ nhấn: nhãn nhỏ, "Xem tất cả", liên kết */
  --color-brand-secondary: #151B40; /* xanh than: footer */
  --color-brand-surface: #FBF8F2;   /* kem: nền section nhạt */
  --fss-gold: #DABE81;              /* nút đặt phòng */
  --fss-gold-dark: #C9A86A;
  --fss-text: #212529;
  --fss-heading: #343A40;
  --fss-muted: #616971;
  --fss-logo-pink: #E8798F;
  --fss-logo-grey: #6E675C;
  --fss-logo-gold: #B58A3C;
}

body { font-family: "Google Sans", "Plus Jakarta Sans", system-ui, sans-serif; color: var(--fss-text); }
h1, h2, h3, .fss-serif {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.text-brand-secondary { color: var(--fss-heading) !important; }

/* ---------- Header: luôn nền trắng như Vinpearl ---------- */
.fss-header { background: #fff !important; color: var(--fss-text) !important; box-shadow: 0 1px 0 #EFEFEF; }
.fss-header.fss-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.fss-header nav a:hover { color: var(--color-brand-primary); }
.fss-burger i { background: var(--fss-text) !important; }
.fss-mobile-menu { background: #fff !important; color: var(--fss-text) !important; }
.fss-mobile-menu a { border-color: #EFEFEF !important; }
.fss-header-cta { background: var(--fss-gold); color: #fff !important; border: 0 !important; font-family: "EB Garamond", Georgia, serif; font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0; }
.fss-header-cta:hover { background: var(--fss-gold-dark); }

/* ---------- Tên resort theo màu logo ---------- */
.fss-name { font-family: "EB Garamond", Georgia, serif; font-weight: 600 !important; letter-spacing: .02em !important; }
.fss-name .fss-flamingo { color: var(--fss-logo-pink); }
.fss-name .fss-catba { color: var(--fss-logo-grey); }
.fss-name .fss-seasand { color: var(--fss-logo-gold); }
footer .fss-name .fss-catba { color: #fff; } /* xám logo không đọc được trên nền xanh than */
.fss-tagline { color: var(--fss-muted); }

/* ---------- Nút vàng ---------- */
.bg-brand-primary { background-color: var(--fss-gold) !important; color: #fff !important; }
.hover\:bg-brand-primary:hover { background-color: var(--fss-gold) !important; color: #fff !important; }
a.bg-brand-primary:hover, button.bg-brand-primary:hover { background-color: var(--fss-gold-dark) !important; }

/* ---------- Đầu bài viết: nền trắng, chữ tối ---------- */
.fss-article-head { background: #fff !important; color: var(--fss-text) !important; }
.fss-article-head h1 { color: var(--fss-heading); }
.fss-article-head .fss-meta, .fss-article-head .fss-back { color: #898994 !important; }
.fss-article-head .fss-excerpt { color: var(--fss-muted) !important; }

/* ---------- Footer ---------- */
footer a[href^="tel"], footer a[href^="mailto"] { color: #E29A38; }
footer h2 { font-family: "Google Sans", sans-serif !important; font-size: 18px !important; color: #F4F4F4; }

/* ---------- Nội dung bài viết (x-public.rich-text) ---------- */
.fss-prose { color: #343A40; font-size: 16px; line-height: 1.85; }
.fss-prose > * + * { margin-top: 1.1em; }
.fss-prose p { margin: 0; }
.fss-prose p + p { margin-top: 1.1em; }
.fss-prose a { color: #C77A1E; text-decoration: underline; text-underline-offset: 3px; }
.fss-prose h2.fss-h { margin-top: 2em; font-size: 30px; line-height: 1.25; color: var(--fss-heading); scroll-margin-top: 100px; }
.fss-prose h3.fss-h { margin-top: 1.6em; font-size: 23px; line-height: 1.3; color: var(--fss-heading); scroll-margin-top: 100px; }
.fss-prose ul.fss-list, .fss-prose ol.fss-olist { padding-left: 1.3em; }
.fss-prose ul.fss-list { list-style: disc; }
.fss-prose ol.fss-olist { list-style: decimal; }
.fss-prose ul.fss-list li + li, .fss-prose ol.fss-olist li + li { margin-top: .45em; }
.fss-prose ul.fss-sublist { list-style: circle; padding-left: 1.3em; margin-top: .35em; }
.fss-prose .fss-lead { font-weight: 600; color: var(--fss-heading); }
.fss-toc { background: var(--color-brand-surface); border-left: 3px solid var(--fss-gold); padding: 20px 24px; }
.fss-toc-title { font-family: "EB Garamond", Georgia, serif; font-size: 22px; font-weight: 600; color: var(--fss-heading); margin-bottom: 8px !important; }
.fss-toc ol { list-style: none; padding: 0; margin: 0; }
.fss-toc li { margin: .3em 0; }
.fss-toc li.fss-toc-l1 { padding-left: 1.2em; font-size: 15px; }
.fss-toc a { color: #343A40 !important; text-decoration: none !important; }
.fss-toc a:hover { color: #C77A1E !important; }
.fss-seealso { border-left: 3px solid var(--color-brand-primary); padding: 4px 0 4px 14px; font-style: italic; }
.fss-seealso span { font-style: normal; font-weight: 600; color: #C77A1E; }
.fss-faq { border-bottom: 1px solid #EFE6D3; padding-bottom: 1em; }
.fss-faq-q { font-size: 20px !important; color: var(--fss-heading); margin-bottom: .3em; }
.fss-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--color-brand-surface); padding: 20px 24px; }
.fss-cta p { width: 100%; margin: 0; }
.fss-prose .fss-cta-btn { background: var(--fss-gold); color: #fff; text-decoration: none; padding: 12px 22px; font-family: "EB Garamond", Georgia, serif; font-size: 17px; font-weight: 600; }
.fss-prose .fss-cta-btn:hover { background: var(--fss-gold-dark); }
.fss-prose .fss-cta-tel { color: var(--fss-heading); font-weight: 600; text-decoration: none; }
.fss-credit { font-size: 13px; color: #898994; font-style: italic; }
.fss-hr { border: 0; border-top: 1px solid #E5E5E5; margin: 2.5em 0; }

/* ---------- Logo header/footer (06/10/2026) ---------- */
.fss-logo { display: block; height: 52px; width: auto; }
@media (max-width: 767px) { .fss-logo { height: 42px; } }
.fss-logo-footer { display: block; height: 60px; width: auto; }
.fss-header nav.fss-nav a { white-space: nowrap; font-size: 11.5px; letter-spacing: .03em; }
.fss-header nav.fss-nav { gap: 1.1rem; }
.fss-header-cta { white-space: nowrap; }
/* Dưới 1360px: menu dài, dùng nút 3 gạch thay cho thanh menu (đo trên máy thật 10/2026) */
@media (max-width: 1359px) {
  .fss-header nav.fss-nav { display: none !important; }
  .fss-mobile-menu.lg\:hidden { display: block; }
}

/* ---------- Nút chọn ngôn ngữ VI/EN (10/2026) ---------- */
.fss-lang-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--fss-muted); border: 1px solid transparent; line-height: 1; }
.fss-lang-item:hover { color: var(--fss-heading); }
.fss-lang-item.is-active { color: var(--fss-heading); border-color: #E5DCC8; }
.fss-flag { width: 20px; height: 13px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.fss-lang-mobile .fss-lang-item { font-size: 14px; padding: 10px 14px; border-color: #E5DCC8; }
.fss-lang-mobile .fss-lang-item.is-active { background: var(--color-brand-surface); }
@media (max-width: 639px) { .fss-header .fss-lang:not(.fss-lang-mobile) .fss-lang-item span { display: none; } .fss-header .fss-lang:not(.fss-lang-mobile) .fss-lang-item { padding: 6px 4px; } }
.fss-header .site-container > a.leading-none { flex-shrink: 0; }
@media (max-width: 1535px) { .fss-header .fss-lang:not(.fss-lang-mobile) .fss-lang-item span { display: none; } .fss-header .fss-lang:not(.fss-lang-mobile) .fss-lang-item { padding: 6px 4px; } }
/* Header rộng hơn khung nội dung để đủ chỗ logo + menu + nút ngôn ngữ */
.fss-header .site-container { max-width: 1480px; width: 100%; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1360px) { .fss-header .fss-burger { display: none !important; } }