
:root{--gold:#f3b04d;--gold2:#ffd289;--bg:#09090c;--bg2:#111216;--card:#17181d;--text:#fff6eb;--muted:#d0b89b;--line:rgba(255,255,255,.08);--shadow:0 24px 60px rgba(0,0,0,.35)}
body.dg-body,body.bfs-body{margin:0;background:linear-gradient(180deg,#0a0a0d 0%,#101014 100%);color:var(--text);font-family:"Noto Sans Thai",Arial,Helvetica,sans-serif}
.dg-body *,.bfs-body *{box-sizing:border-box}.dg-body a,.bfs-body a{text-decoration:none}.dg-container,.bfs-container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.dg-header,.bfs-header{position:sticky;top:0;z-index:40;background:rgba(10,10,13,.84);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.dg-header-row,.bfs-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.dg-brand,.bfs-brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:1.25rem;font-weight:800}
.dg-brand-icon,.bfs-brand-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),#ff9250);color:#2b1700;box-shadow:0 12px 28px rgba(243,176,77,.3)}
.dg-nav,.bfs-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.dg-nav a,.bfs-nav a{color:#f8e9d5;font-weight:600}.dg-nav a.active,.dg-nav a:hover,.bfs-nav a:hover{color:var(--gold2)}
.dg-btn,.bfs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:14px;font-weight:800;border:none;cursor:pointer;font-family:"Noto Sans Thai",Arial,Helvetica,sans-serif}
.dg-btn-primary{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#2a1700;box-shadow:0 16px 32px rgba(243,176,77,.28)}
.dg-btn-nav,.bfs-btn-nav{min-height:40px;padding:0 14px;border:1px solid rgba(243,176,77,.35);color:#ffdbad;background:rgba(243,176,77,.08)}
.dg-btn.small{min-height:38px;padding:0 12px}
.dg-hero,.dg-page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#140f0c 0%,#26160e 42%,#09090c 100%)}
.dg-hero:before,.dg-page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 18%, rgba(255,214,160,.22), transparent 18%),linear-gradient(180deg, rgba(10,10,13,.1), rgba(10,10,13,.55))}
.dg-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,13,.12), rgba(10,10,13,.6))}
.dg-hero-photo{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.55)),url("../images/home-hero-bg.jpg"),linear-gradient(135deg,#140f0c 0%,#26160e 42%,#09090c 100%);background-size:cover;background-position:center}
.dg-hero-inner{position:relative;padding:56px 0 48px;min-height:440px;display:flex;flex-direction:column;justify-content:center}
.dg-page-hero .dg-container{position:relative;padding:34px 0 26px}
.dg-hero-copy{max-width:920px;margin:0 auto 22px}.dg-hero-copy.center{text-align:center}
.dg-kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#ead8c0;font-size:.74rem;font-weight:800;letter-spacing:.08em}
.dg-hero-copy h1,.dg-page-hero h1{margin:14px 0 10px;font-size:3rem;line-height:1.08;color:#fff7ea;text-shadow:0 10px 24px rgba(0,0,0,.35);font-weight:800}
.dg-hero-copy p,.dg-page-hero p{margin:0 auto;max-width:820px;color:#efd5b8;line-height:1.8;font-size:1rem;font-weight:500}.dg-page-hero p{margin-left:0}
.dg-search-bar{width:min(980px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;background:rgba(255,250,245,.98);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.dg-search-bar.page-mobile{grid-template-columns:1fr auto}
.dg-search-bar input,.dg-search-bar select{width:100%;min-height:46px;border:1px solid #e7dbcc;background:#fff;border-radius:14px;padding:0 14px;color:#1f2937;font-size:16px;font-family:"Noto Sans Thai",Arial,Helvetica,sans-serif}
.dg-strip{margin-top:-18px;position:relative;z-index:3}
.dg-feature-grid,.dg-card-grid,.dg-footer-grid,.dg-banner-grid{display:grid;gap:16px}.dg-feature-grid{grid-template-columns:repeat(3,1fr)}.dg-card-grid{grid-template-columns:repeat(3,1fr)}.dg-footer-grid{grid-template-columns:1.4fr 1fr 1fr}.dg-banner-grid{grid-template-columns:repeat(2,1fr)}
.dg-feature-card,.dg-card,.dg-banner-card,.dg-list-card,.dg-form-card{background:linear-gradient(180deg,#17171c,#111116);border:1px solid rgba(255,255,255,.06);border-radius:22px;box-shadow:var(--shadow);color:#fff8ef}
.dg-feature-card,.dg-banner-body,.dg-form-card{padding:20px}.dg-mid{background:linear-gradient(180deg,#3a2c24,#1c1816)}.dg-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(243,176,77,.12);font-size:1.2rem;margin-bottom:14px}
.dg-feature-card h3,.dg-card h3,.dg-banner-body h3,.dg-list-card h3,.dg-footer h4,.dg-footer h5{margin:0 0 8px;font-weight:800}.dg-feature-card p,.dg-card p,.dg-banner-body p,.dg-list-card p{margin:0;color:var(--muted);line-height:1.7;font-weight:500}
.dg-section{padding:48px 0}.dg-banner-section{padding-top:8px}
.dg-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.dg-section-head h2{margin:0;font-size:1.7rem;color:#fff8ef;font-weight:800}.dg-section-head a{color:var(--gold);font-weight:700}
.dg-card,.dg-banner-card{overflow:hidden}.dg-card-image,.dg-banner-image{height:190px;background:radial-gradient(circle at 50% 15%, rgba(255,214,160,.22), transparent 18%),linear-gradient(135deg,#2a190e,#5a3012 45%,#111318 100%);background-size:cover;background-position:center}.dg-card-body{padding:18px}.dg-stars{color:#ffcf70;font-size:1rem;letter-spacing:.08em;margin-bottom:8px}
.dg-meta{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.dg-meta span{font-weight:800;color:#ffe7bf}.dg-meta a{background:rgba(243,176,77,.12);color:#ffd08a;border:1px solid rgba(243,176,77,.18);padding:8px 12px;border-radius:12px;font-weight:700}
.dg-banner-card{display:block;transition:transform .18s ease,border-color .18s ease}.dg-banner-card:hover{transform:translateY(-2px);border-color:rgba(243,176,77,.22)}.dg-banner-image-alt{background:radial-gradient(circle at 50% 15%, rgba(255,214,160,.22), transparent 18%),linear-gradient(135deg,#1d2538,#46331a 45%,#111318 100%)}.dg-banner-link{display:inline-flex;margin-top:14px;color:#ffd289;font-weight:700}
.dg-list-grid{display:grid;gap:14px}.dg-list-card{display:flex;justify-content:space-between;gap:18px;padding:18px}.dg-list-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:#f0d6b8;font-size:.92rem}.dg-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dg-field{display:grid;gap:8px;margin-bottom:14px}.dg-field label{font-weight:700;color:#f8e9d5}.dg-field input{width:100%;min-height:46px;border:1px solid #3b4556;background:#12151c;border-radius:14px;padding:0 14px;color:#fff;font-size:16px;font-family:"Noto Sans Thai",Arial,Helvetica,sans-serif}.dg-form-actions{display:flex;gap:12px;flex-wrap:wrap}
.dg-empty{padding:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;color:#d8bfa0}
.dg-footer{background:#09090c;border-top:1px solid rgba(255,255,255,.06);padding:36px 0 44px}.dg-footer p{margin:0;color:#bfaa90;line-height:1.75;font-weight:500}.dg-footer a{display:block;margin:8px 0;color:#d9c0a4;font-weight:500}
/* social band detail */
.bfs-main{padding:18px 0 42px}.bfs-cover-card,.bfs-profile-header,.bfs-tabs,.bfs-card{background:#171b23;border:1px solid rgba(255,255,255,.05);border-radius:18px;box-shadow:var(--shadow)}.bfs-cover-card{overflow:hidden}
.bfs-cover{height:360px;background:radial-gradient(circle at 50% 15%, rgba(255,214,160,.18), transparent 18%),linear-gradient(135deg,#2a190e,#5a3012 45%,#111318 100%);background-size:cover;background-position:center}
.bfs-profile-header{margin-top:-34px;position:relative;padding:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.bfs-profile-left{display:flex;align-items:flex-end;gap:16px}.bfs-avatar{width:168px;height:168px;border-radius:50%;border:5px solid #171b23;background:linear-gradient(135deg,#384153,#6c778d);background-size:cover;background-position:center;flex:0 0 auto}.bfs-title-block h1{margin:0 0 8px;font-size:2.3rem;font-weight:800}.bfs-subtitle{color:var(--muted);margin-bottom:8px}.bfs-stars{color:#ffcf70;letter-spacing:.08em}.bfs-profile-actions{display:flex;gap:10px;flex-wrap:wrap}.bfs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;font-weight:800;border:none;cursor:pointer;font-family:"Noto Sans Thai",Arial,Helvetica,sans-serif}.bfs-btn-primary{background:#2374e1;color:#fff}.bfs-btn-light{background:#2d333f;color:#fff;border:1px solid #3b4556}
.bfs-tabs{margin:16px 0;padding:10px;display:flex;gap:8px;flex-wrap:wrap}.bfs-tabs a{padding:10px 14px;border-radius:10px;color:#dce5f2}.bfs-tabs a.active{background:#2b3342;color:#fff}.bfs-grid{display:grid;grid-template-columns:1.05fr .75fr;gap:16px}.bfs-card{padding:18px;margin-bottom:16px}.bfs-card h2{margin:0 0 14px;font-size:1.35rem;font-weight:800}.bfs-card p{margin:0;color:#dbe3ef;line-height:1.7;font-weight:500}
.bfs-info-list,.bfs-summary{display:grid;gap:10px;margin-top:16px}.bfs-info-list div,.bfs-summary-item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:#212733;border:1px solid #2b3342}.bfs-info-list span,.bfs-summary-item span{color:var(--muted)}.bfs-info-list strong,.bfs-summary-item strong{color:#fff}
.bfs-member-list{display:grid;gap:12px}.bfs-member-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.bfs-member-item:last-child{border-bottom:none}.bfs-member-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#3e4758,#677287);flex:0 0 auto}.bfs-member-text strong{display:block}.bfs-member-text span{color:var(--muted)}
.bfs-feature-card{overflow:hidden;border-radius:16px;background:#212733;border:1px solid #2b3342}.bfs-feature-image{height:220px;background:radial-gradient(circle at 50% 15%, rgba(255,214,160,.18), transparent 18%),linear-gradient(135deg,#2a190e,#5a3012 45%,#111318 100%);background-size:cover;background-position:center}.bfs-feature-body{padding:14px}.bfs-feature-body h3{margin:0 0 8px;font-weight:800}.bfs-feature-body p{margin:0;color:#dbe3ef;line-height:1.65}.bfs-empty{padding:14px;border-radius:14px;background:#212733;border:1px solid #2b3342;color:var(--muted)}
@media (max-width:1024px){.dg-card-grid,.dg-feature-grid,.dg-footer-grid,.dg-banner-grid{grid-template-columns:1fr 1fr}.dg-search-bar{grid-template-columns:1fr 1fr}.dg-hero-copy h1,.dg-page-hero h1{font-size:2.4rem}.bfs-grid{grid-template-columns:1fr}}
@media (max-width:720px){.dg-nav,.bfs-nav{display:none}.dg-container,.bfs-container{width:min(100% - 20px,1180px)}.dg-hero-inner{padding:42px 0 34px;min-height:360px}.dg-hero-copy h1,.dg-page-hero h1{font-size:1.9rem;line-height:1.14}.dg-hero-copy p,.dg-page-hero p{font-size:.96rem}.dg-search-bar,.dg-feature-grid,.dg-card-grid,.dg-footer-grid,.dg-banner-grid{grid-template-columns:1fr}.dg-search-bar.page-mobile{grid-template-columns:1fr}.dg-list-card{flex-direction:column}.dg-side{align-items:flex-start}.dg-feature-card,.dg-card-body,.dg-banner-body,.dg-form-card{padding:16px}.dg-card-image,.dg-banner-image{height:180px}.bfs-cover{height:220px}.bfs-profile-header{display:block;margin-top:12px}.bfs-profile-left{display:block}.bfs-avatar{width:120px;height:120px;margin-bottom:12px}.bfs-title-block h1{font-size:1.8rem}.bfs-profile-actions{margin-top:14px}.bfs-tabs{display:grid;grid-template-columns:1fr 1fr}.bfs-tabs a:last-child{grid-column:1 / -1;text-align:center}}

.dg-btn-nav-sm{min-height:36px;padding:0 12px;border-radius:12px;font-size:.92rem}
.dg-hero-photo-custom{background-image:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.72)),url("../images/home-hero-bg-custom.jpg"),linear-gradient(135deg,#140f0c 0%,#26160e 42%,#09090c 100%);background-size:cover;background-position:center 34%}
.dg-hero-overlay-strong{background:linear-gradient(180deg,rgba(8,8,10,.14),rgba(8,8,10,.34) 36%,rgba(8,8,10,.70) 100%)}
.dg-hero-photo-custom .dg-hero-copy h1{max-width:920px;margin-left:auto;margin-right:auto;text-shadow:0 10px 24px rgba(0,0,0,.45)}
.dg-hero-photo-custom .dg-hero-copy p{max-width:980px;text-shadow:0 3px 10px rgba(0,0,0,.32)}
@media (max-width:720px){.dg-btn-nav-sm{min-height:34px;padding:0 10px;font-size:.86rem}.dg-hero-photo-custom{background-position:center 28%}.dg-hero-inner{min-height:395px}}
