/*
  Facebook-like UI skin (scoped).
  Only applies when body has class .cvh-fb (front site). Admin panel is not affected.
*/

body.cvh-fb{
  --fb-blue:#1877f2;
  --fb-blue-hover:#166fe5;
  --fb-bg:#f0f2f5;
  --fb-card:#ffffff;
  --fb-text:#050505;
  --fb-muted:#65676b;
  --fb-border:#dddfe2;
  --fb-hover:#f2f3f5;
  --fb-shadow:0 1px 2px rgba(0,0,0,.10),0 2px 10px rgba(0,0,0,.06);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fb-text);
  background-color:var(--fb-bg);
}

/* Background overlay (keeps user-selected bg but gives FB readability) */
body.cvh-fb .cvh-bg-overlay{background:rgba(240,242,245,.86) !important;}

/* Links */
body.cvh-fb a{color:var(--fb-blue);}
body.cvh-fb a:hover{color:var(--fb-blue-hover);}

/* App container */
body.cvh-fb #app.app-boxed-layout{
  background:transparent;
}

/* Common sections */
body.cvh-fb .bg-component{background:transparent !important;}
body.cvh-fb .alert{border-radius:14px !important; border-color:var(--fb-border) !important;}
body.cvh-fb .alert-secondary{background:var(--fb-card) !important;}

/* Header (top bar) */
body.cvh-fb #header.app-header{
  background:var(--fb-card) !important;
  border:1px solid var(--fb-border) !important;
  box-shadow:var(--fb-shadow) !important;
}
body.cvh-fb #header .navbar-brand img{filter:none !important;}

body.cvh-fb #header .nav-link{
  color:var(--fb-muted) !important;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
}
body.cvh-fb #header .nav-link:hover{
  background:var(--fb-hover);
  color:var(--fb-text) !important;
}

/* Active nav highlight (based on body[data-page]) */
body.cvh-fb[data-page="home"] #header a.nav-link[href="/"]{background:#e7f3ff;color:var(--fb-blue) !important;}
body.cvh-fb[data-page="gioi-thieu"] #header a.nav-link[href="/gioi-thieu"],
body.cvh-fb[data-page="dien-dan"] #header a.nav-link[href="/dien-dan"],
body.cvh-fb[data-page="shop"] #header a.nav-link[href="/shop"],
body.cvh-fb[data-page="giftcode"] #header a.nav-link[href="/giftcode"],
body.cvh-fb[data-page="chat"] #header a.nav-link[href="/chat"],
body.cvh-fb[data-page="chat-pm"] #header a.nav-link[href="/chat-pm"],
body.cvh-fb[data-page="chat-group"] #header a.nav-link[href="/chat-group"]{
  background:#e7f3ff;
  color:var(--fb-blue) !important;
}

/* Quick action icons (chat group / pm / bell) */
body.cvh-fb #cvhNotifBell .cvh-icon-btn,
body.cvh-fb #cvhTopQuickActions .cvh-icon-btn{
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  border:none !important;
  background:#e4e6eb !important;
  color:var(--fb-text) !important;
  box-shadow:none !important;
}
body.cvh-fb #cvhNotifBell .cvh-icon-btn:hover,
body.cvh-fb #cvhTopQuickActions .cvh-icon-btn:hover{
  background:#d8dadf !important;
}

/* Profile chip */
body.cvh-fb #header .dropdown > a.d-flex{
  border-radius:999px;
  padding:4px 6px;
}
body.cvh-fb #header .dropdown > a.d-flex:hover{background:var(--fb-hover);}
body.cvh-fb #header .w-40px.h-40px{
  border-radius:999px !important;
  background:#f0f2f5;
}

/* Dropdown */
body.cvh-fb .dropdown-menu{
  border-radius:14px !important;
  border:1px solid var(--fb-border) !important;
  box-shadow:var(--fb-shadow) !important;
  padding:8px !important;
}
body.cvh-fb .dropdown-item{
  border-radius:10px !important;
  padding:10px 12px !important;
  font-weight:600;
}
body.cvh-fb .dropdown-item:hover{background:var(--fb-hover) !important;}

/* Cards */
body.cvh-fb .card{
  border:1px solid var(--fb-border) !important;
  border-radius:14px !important;
  box-shadow:var(--fb-shadow);
}
body.cvh-fb .card-header,
body.cvh-fb .card-footer{
  background:transparent !important;
  border-color:var(--fb-border) !important;
}

/* Buttons */
body.cvh-fb .btn-theme{
  background:var(--fb-blue) !important;
  border-color:var(--fb-blue) !important;
  border-radius:999px !important;
  font-weight:700;
}
body.cvh-fb .btn-theme:hover{
  background:var(--fb-blue-hover) !important;
  border-color:var(--fb-blue-hover) !important;
}
body.cvh-fb .btn-outline-secondary,
body.cvh-fb .btn-outline-danger{
  border-radius:999px !important;
}
body.cvh-fb .btn-outline-secondary{
  border-color:var(--fb-border) !important;
  color:var(--fb-text) !important;
}
body.cvh-fb .btn-outline-secondary:hover{
  background:var(--fb-hover) !important;
}

/* Inputs */
body.cvh-fb .form-control,
body.cvh-fb .input-group-text,
body.cvh-fb .form-select{
  border-radius:12px !important;
  border-color:var(--fb-border) !important;
  background:#f7f8fa;
}
body.cvh-fb .form-control:focus,
body.cvh-fb .form-select:focus{
  background:#fff;
  border-color:rgba(24,119,242,.55) !important;
  box-shadow:0 0 0 .2rem rgba(24,119,242,.18) !important;
}

/* List groups (threads/members) */
body.cvh-fb .list-group-item{
  border-color:var(--fb-border) !important;
}
body.cvh-fb .list-group-item-action:hover{
  background:var(--fb-hover) !important;
}

/* ===== Chat pages: FB/Messenger feel ===== */
body.cvh-fb.cvh-page-chat-group #chatgroup .card .card-body.bg-light,
body.cvh-fb.cvh-page-chat #livechat .card .card-body.bg-light,
body.cvh-fb.cvh-page-chat-pm #chatpm .card .card-body.bg-light{
  background:var(--fb-bg) !important;
}

/* Widget chat items layout */
body.cvh-fb .widget-chat-item{display:flex;gap:10px;align-items:flex-end;margin:12px 0;}
body.cvh-fb .widget-chat-item-start{justify-content:flex-start;}
body.cvh-fb .widget-chat-item-end,
body.cvh-fb .widget-chat-item.reply{justify-content:flex-end;}
/* Chat avatars: show FULL frame (do not round/clip the overlay frame image) */
body.cvh-fb .widget-chat-media{width:46px !important;overflow:visible !important;}
body.cvh-fb .widget-chat-media img{object-fit:cover !important;}
body.cvh-fb .widget-chat-media img.cvh-av-frame{width:100% !important;height:100% !important;border-radius:0 !important;object-fit:contain !important;}
body.cvh-fb .widget-chat-media img.cvh-av-img{width:34px !important;height:34px !important;border-radius:999px !important;}
/* Fallback for legacy <img> avatars without wrapper */
body.cvh-fb .widget-chat-media img:not(.cvh-av-frame):not(.cvh-av-img){width:34px !important;height:34px !important;border-radius:999px !important;}

body.cvh-fb .widget-chat-content{max-width:min(74%,520px);}
body.cvh-fb .widget-chat-name{color:var(--fb-muted) !important;font-size:12px;margin-bottom:3px;}
body.cvh-fb .widget-chat-time,
body.cvh-fb .widget-chat-status{color:var(--fb-muted) !important;font-size:11px;}

/* Message bubble */
body.cvh-fb .widget-chat-message{
  background:var(--fb-card);
  border:1px solid var(--fb-border);
  border-radius:18px;
  padding:10px 12px;
  line-height:1.35;
}
body.cvh-fb .widget-chat-item-end .widget-chat-message,
body.cvh-fb .widget-chat-item.reply .widget-chat-message{
  background:var(--fb-blue);
  border-color:var(--fb-blue);
  color:#fff;
}
body.cvh-fb .widget-chat-item-end .widget-chat-message a,
body.cvh-fb .widget-chat-item.reply .widget-chat-message a{color:#fff;text-decoration:underline;}

/* Mentions */
body.cvh-fb .widget-chat-item-start .widget-chat-message .text-primary{color:var(--fb-blue) !important; font-weight:800;}
body.cvh-fb .widget-chat-item-end .widget-chat-message .text-primary,
body.cvh-fb .widget-chat-item.reply .widget-chat-message .text-primary{color:#e7f3ff !important; font-weight:800;}

/* Reply quote inside bubble */
body.cvh-fb .widget-chat-item-end .widget-chat-message .text-muted{color:rgba(255,255,255,.85) !important;}
body.cvh-fb .widget-chat-item-end .widget-chat-message .border-start{border-color:rgba(255,255,255,.45) !important;}

/* Reply button inside message bubble: make it look like small action */
body.cvh-fb .widget-chat-message button[data-reply-id]{
  border:none !important;
  background:transparent !important;
  padding:4px 6px !important;
  border-radius:10px !important;
  font-size:12px;
  font-weight:700;
}
body.cvh-fb .widget-chat-item-start .widget-chat-message button[data-reply-id]{color:var(--fb-muted) !important;}
body.cvh-fb .widget-chat-item-end .widget-chat-message button[data-reply-id]{color:rgba(255,255,255,.9) !important;}
body.cvh-fb .widget-chat-message button[data-reply-id]:hover{background:rgba(0,0,0,.06) !important;}
body.cvh-fb .widget-chat-item-end .widget-chat-message button[data-reply-id]:hover{background:rgba(255,255,255,.12) !important;}

/* Chat input area */
body.cvh-fb #grpMessageInput,
body.cvh-fb #pmMessageInput,
body.cvh-fb #message{
  background:#f0f2f5;
  border-color:var(--fb-border) !important;
}

/* Mention suggestion box */
body.cvh-fb #grpMentionBox.list-group{
  border-radius:14px;
  border:1px solid var(--fb-border);
  box-shadow:var(--fb-shadow);
  overflow:hidden;
}

/* Small screens: keep header neat */
@media (max-width: 420px){
  body.cvh-fb #header .navbar-nav .nav-item{margin-right:4px !important;}
  body.cvh-fb #header .nav-link{padding:8px 10px;}
}


/* ===== Home & Forum readability upgrades ===== */
/* Make background less noisy on pages with lots of text */
body.cvh-fb.cvh-page-home .cvh-bg-overlay,
body.cvh-fb.cvh-page-dien-dan .cvh-bg-overlay{
  background:rgba(240,242,245,.92) !important;
}

/* Home page: put content into readable FB-style cards */
body.cvh-fb.cvh-page-home #gioithieu{padding:14px 0;}
body.cvh-fb.cvh-page-home #gioithieu > .col{
  max-width:980px;
  margin:0 auto 14px;
  background:var(--fb-card) !important;
  border:1px solid var(--fb-border);
  border-radius:14px;
  box-shadow:var(--fb-shadow);
  padding:14px 16px !important;
}
body.cvh-fb.cvh-page-home #gioithieu > .col .text-center{margin:0 !important;}
body.cvh-fb.cvh-page-home #gioithieu .container.py-2{
  max-width:980px;
  margin:0 auto;
  background:var(--fb-card) !important;
  border:1px solid var(--fb-border);
  border-radius:14px;
  box-shadow:var(--fb-shadow);
  padding:14px 16px !important;
}
body.cvh-fb.cvh-page-home #gioithieu .border-theme{border-color:rgba(0,0,0,.06) !important;}
body.cvh-fb.cvh-page-home #gioithieu h4,
body.cvh-fb.cvh-page-home #gioithieu h5,
body.cvh-fb.cvh-page-home #gioithieu p,
body.cvh-fb.cvh-page-home #gioithieu li{color:var(--fb-text) !important;}
body.cvh-fb.cvh-page-home #gioithieu .text-theme{color:var(--fb-blue) !important;}
body.cvh-fb.cvh-page-home #gioithieu .text-muted{color:var(--fb-muted) !important;}

/* Forum page: clearer feed look */
body.cvh-fb.cvh-page-dien-dan #blog1{padding-top:14px !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 .container-xxl{
  max-width:980px;
  margin:0 auto 14px;
  background:var(--fb-card) !important;
  border:1px solid var(--fb-border);
  border-radius:14px;
  box-shadow:var(--fb-shadow);
}
body.cvh-fb.cvh-page-dien-dan #blog1 .container-xxl.p-3{padding:16px !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 .border-theme.border-top{display:none;}
body.cvh-fb.cvh-page-dien-dan #blog1 .flex-fill.text-theme{color:var(--fb-blue) !important;font-weight:800;}
body.cvh-fb.cvh-page-dien-dan #blog1 .card-body{padding:0 !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 a.hii{font-size:1rem !important;color:var(--fb-text) !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 a.hii h6{font-size:15px;font-weight:800;color:var(--fb-text) !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 a.hii small{font-size:12px;color:var(--fb-muted) !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 .d-flex.align-items-center{border-radius:12px;padding:10px 12px;margin:0 0 4px;}
body.cvh-fb.cvh-page-dien-dan #blog1 .d-flex.align-items-center:hover{background:var(--fb-hover);}
/* Forum list avatars: allow frame to render outside the circular crop */
body.cvh-fb.cvh-page-dien-dan #blog1 .w-50px.h-50px{border-radius:0 !important;overflow:visible !important;background:transparent;}
body.cvh-fb.cvh-page-dien-dan #blog1 img.ms-100.mh-100{object-fit:cover;}
body.cvh-fb.cvh-page-dien-dan #blog1 img.cvh-av-frame{border-radius:0 !important;object-fit:contain !important;}
body.cvh-fb.cvh-page-dien-dan #blog1 img.cvh-av-img{border-radius:999px !important;}

/* Keep the banner looking nice but readable */
body.cvh-fb.cvh-page-dien-dan #blog1 .alert{
  border:1px solid rgba(255,255,255,.22) !important;
}