/* FIX342 — full customer frontend blue theme
 * Visual-only layer. Applied to every frontend/customer layout.
 * Goals: visibly bluer page background, light-blue cards/surfaces,
 * darker high-contrast typography, while preserving existing business logic.
 */
:root{
  --hh342-page:#dff1ff;
  --hh342-page-2:#d4ecff;
  --hh342-surface:#edf8ff;
  --hh342-surface-2:#e5f4ff;
  --hh342-surface-3:#dcefff;
  --hh342-line:#8fc7ed;
  --hh342-line-soft:#acd7f3;
  --hh342-blue:#0878f7;
  --hh342-blue-2:#169fe9;
  --hh342-blue-deep:#0759ba;
  --hh342-navy:#062f66;
  --hh342-text:#0c3766;
  --hh342-muted:#3f6382;
  --hh342-shadow:0 10px 26px rgba(20,91,146,.13);
}

/* ===== Global customer canvas ===== */
html,
body.hh-theme-v342{
  background:var(--hh342-page)!important;
}
body.hh-theme-v342{
  color:var(--hh342-text)!important;
  background:
    radial-gradient(circle at 88% 0%,rgba(21,157,235,.18),transparent 27%),
    radial-gradient(circle at 6% 22%,rgba(8,120,247,.08),transparent 24%),
    linear-gradient(180deg,#e9f7ff 0%,var(--hh342-page) 44%,var(--hh342-page-2) 100%)!important;
}
body.hh-theme-v342 .fixed-bg{
  background:linear-gradient(180deg,rgba(231,246,255,.97),rgba(214,237,255,.98))!important;
}
body.hh-theme-v342 #app,
body.hh-theme-v342 #wrapper,
body.hh-theme-v342 #content,
body.hh-theme-v342 #section-content,
body.hh-theme-v342 .wrap,
body.hh-theme-v342 .page-wrap,
body.hh-theme-v342 .md-content{
  background-color:transparent!important;
}

/* Old customer pages frequently use these pale/white background helpers. */
body.hh-theme-v342 .bg-light_bkk,
body.hh-theme-v342 .bg-light,
body.hh-theme-v342 .bg-white,
body.hh-theme-v342 .main-content,
body.hh-theme-v342 .contact-box,
body.hh-theme-v342 .well,
body.hh-theme-v342 .jumbotron,
body.hh-theme-v342 .panel,
body.hh-theme-v342 .panel-default,
body.hh-theme-v342 .md-section{
  background-color:var(--hh342-surface)!important;
  color:var(--hh342-text)!important;
}
body.hh-theme-v342 .bg-transparent{background-color:transparent!important}
body.hh-theme-v342 .bg-dark{
  background-color:#0b427c!important;
  color:#fff!important;
}

/* ===== Text contrast ===== */
body.hh-theme-v342 h1,
body.hh-theme-v342 h2,
body.hh-theme-v342 h3,
body.hh-theme-v342 h4,
body.hh-theme-v342 h5,
body.hh-theme-v342 h6,
body.hh-theme-v342 .card-title,
body.hh-theme-v342 .modal-title,
body.hh-theme-v342 .panel-title,
body.hh-theme-v342 legend,
body.hh-theme-v342 label,
body.hh-theme-v342 th{
  color:var(--hh342-navy)!important;
}
body.hh-theme-v342 h1,
body.hh-theme-v342 h2,
body.hh-theme-v342 h3,
body.hh-theme-v342 .card-title,
body.hh-theme-v342 .modal-title{
  font-weight:800!important;
}
body.hh-theme-v342 p,
body.hh-theme-v342 td,
body.hh-theme-v342 li,
body.hh-theme-v342 .card-text,
body.hh-theme-v342 .form-text,
body.hh-theme-v342 .help-block,
body.hh-theme-v342 .text-secondary,
body.hh-theme-v342 .text-secondary2,
body.hh-theme-v342 small{
  color:var(--hh342-muted)!important;
}
body.hh-theme-v342 .text-dark{color:var(--hh342-text)!important}
body.hh-theme-v342 .text-blue-2,
body.hh-theme-v342 .text-primary,
body.hh-theme-v342 a:not(.btn):not(.dropdown-item){color:var(--hh342-blue-deep)}
body.hh-theme-v342 .text-white,
body.hh-theme-v342 .btn-primary,
body.hh-theme-v342 .btn-info,
body.hh-theme-v342 .btn-success,
body.hh-theme-v342 .btn-danger,
body.hh-theme-v342 .btn-dark{color:#fff!important}

/* ===== Shared cards, lists and panels ===== */
body.hh-theme-v342 .card,
body.hh-theme-v342 .list-group-item,
body.hh-theme-v342 .modal-content,
body.hh-theme-v342 .dropdown-menu,
body.hh-theme-v342 .popover,
body.hh-theme-v342 .panel,
body.hh-theme-v342 .well{
  background:linear-gradient(145deg,var(--hh342-surface) 0%,var(--hh342-surface-2) 100%)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-text)!important;
  box-shadow:var(--hh342-shadow);
}
body.hh-theme-v342 .card-header,
body.hh-theme-v342 .card-footer,
body.hh-theme-v342 .modal-header,
body.hh-theme-v342 .modal-footer,
body.hh-theme-v342 .panel-heading,
body.hh-theme-v342 .list-group-item.active{
  border-color:var(--hh342-line-soft)!important;
}
body.hh-theme-v342 .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-dark),
body.hh-theme-v342 .card-footer,
body.hh-theme-v342 .modal-header,
body.hh-theme-v342 .modal-footer,
body.hh-theme-v342 .panel-heading{
  background:var(--hh342-surface-3)!important;
  color:var(--hh342-navy)!important;
}
body.hh-theme-v342 .rounded,
body.hh-theme-v342 .border,
body.hh-theme-v342 .border-secondary,
body.hh-theme-v342 .border-dark{
  border-color:var(--hh342-line)!important;
}

/* ===== Tables / ticket histories / reports ===== */
body.hh-theme-v342 .table{
  color:var(--hh342-text)!important;
  background:var(--hh342-surface)!important;
}
body.hh-theme-v342 .table th,
body.hh-theme-v342 .table td{
  border-color:var(--hh342-line-soft)!important;
}
body.hh-theme-v342 .table thead th,
body.hh-theme-v342 .table-secondary,
body.hh-theme-v342 .table-secondary>th,
body.hh-theme-v342 .table-secondary>td{
  background:var(--hh342-surface-3)!important;
  color:var(--hh342-navy)!important;
}
body.hh-theme-v342 .table-striped tbody tr:nth-of-type(odd){background-color:rgba(204,233,255,.34)!important}
body.hh-theme-v342 .table-hover tbody tr:hover{background-color:rgba(179,220,249,.38)!important}

/* ===== Forms ===== */
body.hh-theme-v342 input.form-control,
body.hh-theme-v342 select.form-control,
body.hh-theme-v342 textarea.form-control,
body.hh-theme-v342 .custom-select,
body.hh-theme-v342 .input-group-text,
body.hh-theme-v342 .bootstrap-select>.dropdown-toggle{
  background:#f4fbff!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-text)!important;
  -webkit-text-fill-color:var(--hh342-text)!important;
}
body.hh-theme-v342 input.form-control:focus,
body.hh-theme-v342 select.form-control:focus,
body.hh-theme-v342 textarea.form-control:focus,
body.hh-theme-v342 .custom-select:focus{
  background:#f8fdff!important;
  border-color:var(--hh342-blue)!important;
  box-shadow:0 0 0 .16rem rgba(8,120,247,.13)!important;
}
body.hh-theme-v342 input::placeholder,
body.hh-theme-v342 textarea::placeholder{
  color:#607d97!important;
  opacity:1!important;
}
body.hh-theme-v342 .input-group-text{background:var(--hh342-surface-3)!important}

/* ===== Tabs, pills, pagination and neutral buttons ===== */
body.hh-theme-v342 .nav-tabs{border-bottom-color:var(--hh342-line)!important}
body.hh-theme-v342 .nav-tabs .nav-link,
body.hh-theme-v342 .nav-pills .nav-link{
  color:#315d83!important;
  border-color:transparent!important;
}
body.hh-theme-v342 .nav-tabs .nav-link.active,
body.hh-theme-v342 .nav-pills .nav-link.active{
  background:var(--hh342-blue)!important;
  border-color:var(--hh342-blue)!important;
  color:#fff!important;
  font-weight:800!important;
}
body.hh-theme-v342 .page-link{
  background:var(--hh342-surface)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-blue-deep)!important;
}
body.hh-theme-v342 .page-item.active .page-link{
  background:var(--hh342-blue)!important;
  border-color:var(--hh342-blue)!important;
  color:#fff!important;
}
body.hh-theme-v342 .btn-light,
body.hh-theme-v342 .btn-default,
body.hh-theme-v342 .btn-blank,
body.hh-theme-v342 .btn-outline-secondary{
  background:var(--hh342-surface-2)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-text)!important;
}
body.hh-theme-v342 .btn-primary,
body.hh-theme-v342 .btn-info{
  background:linear-gradient(135deg,#169fe9,var(--hh342-blue))!important;
  border-color:var(--hh342-blue)!important;
}

/* ===== Generic older lottery / number / memo surfaces ===== */
body.hh-theme-v342 .sub-card-header,
body.hh-theme-v342 .show-lists,
body.hh-theme-v342 .box__play,
body.hh-theme-v342 .box__keyboard,
body.hh-theme-v342 .box__show-number,
body.hh-theme-v342 .box__two-option,
body.hh-theme-v342 .box__condition-info,
body.hh-theme-v342 .row-btn-tanghuay,
body.hh-theme-v342 .yeekee__lists-number{
  background:linear-gradient(145deg,var(--hh342-surface),var(--hh342-surface-2))!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-text)!important;
}
body.hh-theme-v342 .btn-rood:not(.active),
body.hh-theme-v342 .btn-tanghuay:not(.active),
body.hh-theme-v342 .option2btn:not(.active),
body.hh-theme-v342 .btn-limitnum:not(.active),
body.hh-theme-v342 .btn-move:not(.active){
  background:var(--hh342-surface-2)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-blue-deep)!important;
}
/* Active number/bet choices remain green as requested. */
body.hh-theme-v342 .btn-rood.active,
body.hh-theme-v342 .btn-tanghuay.active,
body.hh-theme-v342 .option2btn.active,
body.hh-theme-v342 .btn-limitnum.active,
body.hh-theme-v342 .btn-move.active{
  background:#16b85c!important;
  border-color:#16a654!important;
  color:#fff!important;
}

/* ===== Existing FIX316/317/337/334 components: stronger system-wide blue ===== */
body.hh-theme-v342 .hh316-member-summary,
body.hh-theme-v342 .hh317-lottery-card,
body.hh-theme-v342 .hh316-news-item,
body.hh-theme-v342 .hh337-heading,
body.hh-theme-v342 .hh337-summary-card:not(.primary),
body.hh-theme-v342 .hh337-filter-card,
body.hh-theme-v342 .hh337-ticket,
body.hh-theme-v342 .hh337-detail-hero,
body.hh-theme-v342 .hh337-detail-stats>div,
body.hh-theme-v342 .hh337-detail-list-card,
body.hh-theme-v342 .hh337-total-card,
body.hh-theme-v342 .hh337-empty,
body.hh-theme-v342 .hh-wallet-page .hhw-card,
body.hh-theme-v342 .hh-wallet-page .hhw-info-card,
body.hh-theme-v342 .hh-wallet-page .hhw-bank-card,
body.hh-theme-v342 .hh-wallet-page .hhw-form-card,
body.hh-theme-v342 .hh-wallet-page .hhw-balance-card{
  background:linear-gradient(145deg,#eff9ff 0%,#e2f2ff 100%)!important;
  border-color:var(--hh342-line)!important;
}
body.hh-theme-v342 .hh316-quick-menu .menu-grid:not(.hh340-money-card){
  background:linear-gradient(145deg,#eff9ff 0%,#e2f2ff 100%)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-navy)!important;
}
body.hh-theme-v342 .hh316-quick-menu .menu-grid:not(.hh340-money-card) span,
body.hh-theme-v342 .hh317-lottery-copy strong,
body.hh-theme-v342 .hh337-ticket h3,
body.hh-theme-v342 .hh337-detail-title h2,
body.hh-theme-v342 .hh-wallet-page .hhw-title,
body.hh-theme-v342 .hh-wallet-page .hhw-card-title{
  color:var(--hh342-navy)!important;
}

/* Preserve the distinctive finance cards from FIX340. */
body.hh-theme-v342 .hh340-money-card.hh340-deposit-card,
body.hh-theme-v342 .hh340-money-card.hh340-deposit{
  background:linear-gradient(145deg,#13c9b0,#02a9c9)!important;
  border-color:rgba(0,143,162,.42)!important;
}
body.hh-theme-v342 .hh340-money-card.hh340-withdraw-card,
body.hh-theme-v342 .hh340-money-card.hh340-withdraw{
  background:linear-gradient(145deg,#1195ef,#4d34ef)!important;
  border-color:rgba(42,78,219,.42)!important;
}
body.hh-theme-v342 .hh340-money-card,
body.hh-theme-v342 .hh340-money-card i,
body.hh-theme-v342 .hh340-money-card span,
body.hh-theme-v342 .hh340-money-card small{
  color:#fff!important;
}

/* ===== Header / balance / rank ===== */
body.hh-theme-v342 .sticky-top .topnavbar{
  background:rgba(224,242,255,.98)!important;
  border-bottom-color:var(--hh342-line)!important;
  box-shadow:0 8px 22px rgba(13,85,143,.13)!important;
}
body.hh-theme-v342 #re-credit .hh-credit-badge,
body.hh-theme-v342 #re-credit .hh317-credit-badge,
body.hh-theme-v342 #sidebarCollapse.mobile-view,
body.hh-theme-v342 .hh-rank-trigger,
body.hh-theme-v342 .hh317-rank-trigger,
body.hh-theme-v342 .hh-rank-popover{
  background:linear-gradient(180deg,#f2faff,#deefff)!important;
  border-color:var(--hh342-line)!important;
}
body.hh-theme-v342 #re-credit .hh-credit-badge,
body.hh-theme-v342 #re-credit .hh317-credit-badge{color:#064f9f!important}

/* ===== Bottom navigation ===== */
body.hh-theme-v342 .heng-bottom-nav{
  background:rgba(226,243,255,.98)!important;
  border-color:var(--hh342-line)!important;
  box-shadow:0 -10px 28px rgba(14,82,137,.16)!important;
}
body.hh-theme-v342 .heng-bottom-nav__item{color:#2e5678!important;font-weight:800!important}
body.hh-theme-v342 .heng-bottom-nav__item i{color:#2d5e89!important}
body.hh-theme-v342 .heng-bottom-nav__item.active{
  background:#cfeaff!important;
  color:var(--hh342-blue-deep)!important;
  box-shadow:inset 0 0 0 1px #83c2ed!important;
}
body.hh-theme-v342 .heng-bottom-nav__item.active i{color:var(--hh342-blue-deep)!important}

/* ===== Login / registration / guest frontend ===== */
body.hh-theme-v342 .hh315-login-page,
body.hh-theme-v342.hh315-login-page,
body.hh-theme-v342 .top-content,
body.hh-theme-v342 .form-box,
body.hh-theme-v342 .registration-form,
body.hh-theme-v342 .site-signup,
body.hh-theme-v342 .site-login{
  background-color:transparent!important;
  color:var(--hh342-text)!important;
}
body.hh-theme-v342 .hh315-login-card,
body.hh-theme-v342 .hh315-benefit,
body.hh-theme-v342 .hh315-quick-links a,
body.hh-theme-v342 .form-bottom,
body.hh-theme-v342 .form-top,
body.hh-theme-v342 .registration-form .card,
body.hh-theme-v342 .site-signup .card,
body.hh-theme-v342 .site-login .card{
  background:linear-gradient(145deg,#eff9ff,#e2f2ff)!important;
  border-color:var(--hh342-line)!important;
  color:var(--hh342-text)!important;
}
body.hh-theme-v342 .form-top-left h3,
body.hh-theme-v342 .form-top-left p,
body.hh-theme-v342 .registration-form label,
body.hh-theme-v342 .site-signup label,
body.hh-theme-v342 .site-login label{color:var(--hh342-navy)!important}

/* ===== Alerts ===== */
body.hh-theme-v342 .alert-info{
  background:#d9efff!important;
  border-color:#8fc7ed!important;
  color:#0a4b83!important;
}
body.hh-theme-v342 .alert-secondary{
  background:#e5f4ff!important;
  border-color:#a6d3f1!important;
  color:#315d80!important;
}

/* Never recolor bank logos, rank badges, lottery artwork, slips or promo images. */
body.hh-theme-v342 img,
body.hh-theme-v342 .svbanklogo,
body.hh-theme-v342 .hh-rank-badge-img,
body.hh-theme-v342 .hh-rank-mini-badge,
body.hh-theme-v342 .hh317-lottery-art img,
body.hh-theme-v342 .hh323-core-cover img,
body.hh-theme-v342 .hh323-api-cover img{
  filter:none!important;
}

@media(max-width:767px){
  body.hh-theme-v342{
    background:linear-gradient(180deg,#e5f5ff 0%,#dcefff 50%,#d2eaff 100%)!important;
  }
  body.hh-theme-v342 .card,
  body.hh-theme-v342 .modal-content,
  body.hh-theme-v342 .list-group-item,
  body.hh-theme-v342 .hh316-member-summary,
  body.hh-theme-v342 .hh317-lottery-card,
  body.hh-theme-v342 .hh337-ticket,
  body.hh-theme-v342 .hh-wallet-page .hhw-card{
    box-shadow:0 8px 20px rgba(20,91,146,.10)!important;
  }
}