/* ============================================= */
/*  VIETTESOL 2026 – WORKING 100%               */
/*  Tested live: https://convention.viettesol.org.vn */
/*  Uploaded & working Nov 2025                 */
/* ============================================= */

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");


/* 1. NEW HEADER GRADIENT */

.confTitleBox {
  border-top: 3px solid #08296C;
  border-bottom: 1px solid #0092D1;
  background: linear-gradient(to bottom, #08296C 10%, #0092D1 60%, #08296C 90%);
  /* background: #207bc5 0 -24px;
 background: #207bc5 url('/images/conf/sprites_brown.png') repeat-x 0 -24px; */
}

.confSubTitleBox {
  background: #d3e7f8;
  border-bottom: 1px solid #837b47;
  border-top: 1px solid #837b47;
  }

.confSubTitleContent {
  width: 950px;
  margin: 0 auto;
  color: #4a431a;
  }

.conference-title-link {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
}

/* ------Menu------ */

/* here is layout and style for creating default menu for conferences */

/* Styles for all menu Items */

#outer {
  background: #0092D1;
  border: 1px solid #7e8383;
}

.support_box {
  background: #0092D1;
  border: 1px solid #7e8383;
}

.support_box > h3 {
  background: #207BC5;
}

#outer li a:hover {
  background: #e9f3fc !important;
  color: #80002a;
}

.conf_leftMenu {
  float: left;
  width: 200px;
  background: transparent none repeat scroll 0 0;
}

.menuConfTitle {
  color: #ffff99;
}

.menuConfTitle a {
  color: #ffff99;
}

.menuConfSelected a {
  color: #1a8cff;
  background: #bddbf5 !important; /* Add color */
}

li ul.inner li a {
  background: transparent url(/images/conf/left_menu_bullet.png) scroll no-repeat 15px center;
} /* Sub Menu Styles */

.simpleTextAnnouncement {
  background: #f5faff url(/images/conf/sprites_brown.png) repeat-x scroll 0 -400px;
  border-top: none;
  border-bottom: 1px solid #bbb;
  color: #1A64A0;
  font-size: 1.5em; /* h1 size */
  padding: 10px 0;
  font-family: 'Roboto Condensed', sans-serif;
}


/* ============================================= */
/* TOP HORIZONTAL MENU (override left sidebar)   */
/* Date: 2025-11-04                              */
/* ============================================= */

/* Make the old left menu span full width and sit above content */
.conf_leftMenu {
  float: none !important;          /* stop being a sidebar */
  width: 100% !important;          /* full-width bar */
  background: #0092D1;             /* matches site chrome */
  border-top: 1px solid #7e8383;
  border-bottom: 1px solid #7e8383;
  border-left: 0;
  border-right: 0;
  margin: 0 0 12px 0;              /* space below the menu line */
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  z-index: 10;
}

/* Ensure the list lays out horizontally on one line */
.conf_leftMenu ul {
  display: flex !important;
  flex-wrap: nowrap;               /* keep items on a single line */
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;                /* allow horizontal scroll if items overflow */
  scrollbar-width: thin;
}

.conf_leftMenu li {
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;             /* prevent wrapping of long labels */
}

/* Link appearance inside the horizontal bar */
.conf_leftMenu li a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #ffff99;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.conf_leftMenu li:last-child a {
  border-right: 0;
}

/* Hover/active state (preserves your existing palette) */
#outer li a:hover,
.conf_leftMenu li a:hover {
  background: #e9f3fc !important;
  color: #80002a !important;
}

.menuConfSelected a {
  background: #bddbf5 !important;
  color: #1a8cff !important;
}

/* Optional: hide/flatten any nested submenus in the new top bar */
.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  display: none !important;
}

/* If the content area had a left margin to make room for the old sidebar, remove it. 
   These selectors are common in Indico themes; keep whichever matches your template. */
.confBody, .confContent, .conference-page, #content, .i-box .i-box-content {
  margin-left: 0 !important;
}

/* Keep announcements and other headings on the same font for consistency */
.simpleTextAnnouncement {
  font-family: 'Roboto Condensed', sans-serif;
}


/* ============================================= */
/* SUBMENU DROPDOWNS FOR THE TOP HORIZONTAL BAR  */
/* Append after the previous block                */
/* ============================================= */

/* Let dropdowns escape the bar */
.conf_leftMenu,
.conf_leftMenu ul {
  overflow: visible !important;
}

/* Parents need positioning context */
.conf_leftMenu > ul > li {
  position: relative;
}

/* Base submenu panel (hidden until hover/focus) */
.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  display: none;                     /* start hidden */
  position: absolute;
  top: 100%;                         /* directly under the parent item */
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  border-top: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
  white-space: nowrap;
  max-height: 70vh;                  /* scroll if very long */
  overflow-y: auto;
}

/* Show submenu on hover/focus (keyboard friendly) */
.conf_leftMenu li:hover > ul,
.conf_leftMenu li:focus-within > ul,
.conf_leftMenu li[aria-expanded="true"] > ul {
  display: block !important;
}

/* Submenu items layout */
.conf_leftMenu li ul li {
  position: relative;                /* for nested menus */
  display: block;
  white-space: nowrap;
}

.conf_leftMenu li ul li a {
  display: block;
  padding: 8px 14px;
  border: 0;
  text-decoration: none;
  color: #1f2a44;
}

.conf_leftMenu li ul li a:hover,
.conf_leftMenu li ul li a:focus {
  background: #e9f3fc;
  color: #ffff99;
}

/* Nested (3rd level+) fly-out positioning */
.conf_leftMenu li ul li ul {
  top: 0;
  left: 100%;
  margin-left: -1px;                 /* seam overlap with parent panel */
  border-top: 1px solid rgba(0,0,0,.12);
}

/* Keep top-level links looking like tabs */
.conf_leftMenu > ul > li > a {
  padding: 10px 16px;
}

/* Optional caret indicator for items that have submenus */
.conf_leftMenu > ul > li:has(> ul) > a::after {
  content: " ▾";
  font-size: 0.9em;
}

/* If your browser support is older and :has isn't available,
   you can add a class to parents in your template, OR ignore this rule. */

/* Ensure the content area isn’t pushed by dropdowns */
.confBody, .confContent, .conference-page, #content, .i-box .i-box-content {
  position: relative;                /* stacking context under dropdowns */
  z-index: 1;
}


/* Hide the contact/support block in the menu */
.conf_leftMenu .support_box,
#confSectionsBox .support_box,
.support_box {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* ===================================================== */
/* CLEAN FULL-WIDTH TOP MENU (no borders around anything) */
/* ===================================================== */

.conf_leftMenu {
  float: none !important;
  width: 100vw !important;               /* span full viewport width */
  max-width: 100vw !important;
  margin: 0 auto 12px auto;
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  background: #0092D1;                   /* keep your top bar color */
  font-family: 'Roboto Condensed', sans-serif;
}

/* Remove borders and spacing between items */
.conf_leftMenu ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;               /* horizontally center the links */
  list-style: none;
  margin: 0;
  padding: 0;
  border: none !important;
  width: 100%;
}

.conf_leftMenu li {
  margin: 0;
  padding: 0;
  border: none !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Clean link styling */
.conf_leftMenu li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #ffff99;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
}

/* Hover/active effects */
.conf_leftMenu li a:hover,
.conf_leftMenu li a:focus {
  background: #e9f3fc;
  color: #80002a;
}

/* Selected state */
.menuConfSelected a {
  background: #bddbf5;
  color: #1a8cff;
}

/* Make sure dropdown menus are still visible and aligned correctly */
.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  border: 1px solid rgba(0,0,0,0.1);     /* light divider for dropdowns only */
}

/* Optional: keep content snug under full-width bar */
.confBody, .confContent, .conference-page, #content, .i-box .i-box-content {
  margin-top: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}


/* ===================================================== */
/* 1) Unlock full-width content                          */
/*    (remove max-width & side margins/paddings)         */
/* ===================================================== */

main.main,
.conf,
#confSectionsBox,
.confBodyBox,
.mainContent,
.col2,
.conference-page,
.page-content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Optional: keep a bit of breathing room for readability */
/* .conference-page, .page-content { padding: 0 16px !important; } */

/* If any parent adds a central column, neutralize it */
body, html, .page-header, .footer {
  max-width: none !important;
}

/* ===================================================== */
/* 2) Stretch the top menu to the full page width        */
/*    (no borders, full bleed)                           */
/* ===================================================== */

.conf_leftMenu {
  float: none !important;
  width: 100% !important;      /* follow the now-full-width body */
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #0092D1;         /* your bar color */
}

.conf_leftMenu ul {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-start; /* or: space-between / center */
  align-items: stretch;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
}

.conf_leftMenu li {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  white-space: nowrap;
}

.conf_leftMenu li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  color: #ffff99;
}

/* Hover/active states (keep your theme) */
.conf_leftMenu li a:hover,
.conf_leftMenu li a:focus { background: #e9f3fc; color: #80002a; }
.menuConfSelected a       { background: #bddbf5; color: #1a8cff; }

/* Keep dropdowns working under the full-width bar */
.conf_leftMenu li { position: relative; }
.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  position: absolute; top: 100%; left: 0;
  display: none; min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);   /* light divider for dropdown only */
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 6px 0; margin: 0; list-style: none; z-index: 1000;
}
.conf_leftMenu li:hover > ul,
.conf_leftMenu li:focus-within > ul { display: block !important; }


/* ===================================================== */
/* FULL-STRETCH MENU + 0.2% MARGINS FOR BODY CONTENT     */
/* ===================================================== */

/* --- Top horizontal menu: full bleed, edge to edge --- */
.conf_leftMenu {
  float: none !important;
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #0092D1;
  font-family: 'Roboto Condensed', sans-serif;
  box-sizing: border-box;
}

/* Menu list stays full width */
.conf_leftMenu ul {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  border: none !important;
}

.conf_leftMenu li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none !important;
  white-space: nowrap;
}

/* Link styling */
.conf_leftMenu li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  background: transparent;
  color: #ffff99;
  border: none !important;
  box-shadow: none !important;
}

/* Hover / active states */
.conf_leftMenu li a:hover,
.conf_leftMenu li a:focus {
  background: #e9f3fc;
  color: #80002a;
}

.menuConfSelected a {
  background: #bddbf5;
  color: #1a8cff;
}

/* --- Dropdown submenus --- */
.conf_leftMenu li { position: relative; }

.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
}

.conf_leftMenu li:hover > ul,
.conf_leftMenu li:focus-within > ul {
  display: block !important;
}

/* --- Body text area: 1% side margins only --- */
#confSectionsBox,
.confBodyBox,
.mainContent,
.conference-page,
.page-content,
.col2 {
  width: 98% !important;              /* 100% - 1% each side */
  margin-left: 1% !important;
  margin-right: 1% !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Color the margins around menu and body sections */
body {
  background-color: #0092D1 !important;  /* margin color */
}

/* Keep content itself white so text remains readable */
#confSectionsBox,
.confBodyBox,
.mainContent,
.conference-page,
.page-content,
.col2 {
  background-color: #ffffff !important;  /* inside content area */
}


/* Remove background from the “Co-organized by …” line only */
.conference-page .infogrid .infoline.info,
.conference-page .infogrid .infoline.info .text,
.conference-page .infogrid .infoline.info .icon,
.conference-page .infogrid .infoline.info [class^="icon-"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* (Optional) if there’s a subtle row stripe applied via nth-child: */
.conference-page .infogrid .infoline.info:nth-of-type(odd),
.conference-page .infogrid .infoline.info:nth-of-type(even) {
  background: transparent !important;
}



/* ===========================
   1) Hide the Materials row
   =========================== */
.conference-page .infogrid .infoline.material,
.conference-page .infogrid .infoline.material * {
  display: none !important;
}

/* ==============================================
   TIME & INFO ROWS — CENTERED + CLEANED UP
   ============================================== */

/* Base: both rows look/behave the same */
.conference-page .infogrid .infoline.date,
.conference-page .infogrid .infoline.info {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;   /* center icon + text as a unit */
  flex-wrap: wrap;
  gap: 0.5em;
  width: 100% !important;
  text-align: center !important;
}

/* Icons: same size as text, inline with the copy */
.conference-page .infogrid .infoline.date .icon,
.conference-page .infogrid .infoline.info .icon {
  font-size: 1.1em !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0.4em !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}

/* Text blocks: inline-flex, centered, consistent color */
.conference-page .infogrid .infoline.date .text,
.conference-page .infogrid .infoline.info .text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 0.35em;
  color: #000 !important;
  flex: 0 0 auto !important;
}

/* ---------- DATE LINE specifics ---------- */

/* Inline segments + spacing */
.conference-page .infogrid .infoline.date .text > div,
.conference-page .infogrid .infoline.date .text > .timezone {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  color: #000 !important;
}

/* Pipe separators: Starts | Ends | Timezone */
.conference-page .infogrid .infoline.date .text > div:not(:last-child)::after {
  content: " | ";
  white-space: pre;
}

/* Labels + colon */
.conference-page .infogrid .infoline.date .label { font-weight: 600; }
.conference-page .infogrid .infoline.date .label::after { content: ":"; }

/* Prevent breaks inside time stamps */
.conference-page .infogrid .infoline.date time { white-space: nowrap; }

/* Make sure timezone is crisp black */
.conference-page .infogrid .infoline.date .timezone {
  filter: none !important;
  opacity: 1 !important;
  color: #000 !important;
}

/* ---------- INFO LINE specifics ---------- */

/* Keep paragraph inline and tidy */
.conference-page .infogrid .infoline.info p {
  margin: 0;
  display: inline;
}

/* (Optional safety) If a grid tries to align left, center items */
.conference-page .infogrid { justify-items: center; }


/* ===========================
   Accent color + blue lines
   =========================== */
:root {
  --vts-accent: #207BC5; /* matches your header/menu palette */
}

/* Make the whole row (text + icon) blue */
.conference-page .infogrid .infoline.date,
.conference-page .infogrid .infoline.info {
  color: var(--vts-accent) !important;
}

/* Ensure all children inherit the blue (undo earlier forced black) */
.conference-page .infogrid .infoline.date .text,
.conference-page .infogrid .infoline.date .text > div,
.conference-page .infogrid .infoline.date .timezone,
.conference-page .infogrid .infoline.info .text,
.conference-page .infogrid .infoline.info p {
  color: inherit !important;
}

/* Your icons already use color: inherit; this keeps them blue too */
.conference-page .infogrid .infoline.date .icon,
.conference-page .infogrid .infoline.info .icon {
  color: inherit !important;
}

/* ===========================================
   Remove the empty line above the main menu
   (tighten the gap after the announcement)
   =========================================== */
.simpleTextAnnouncement {
  margin-bottom: 0 !important;   /* kill the “blank line” below the title */
}

/* Make sure the top menu hugs the announcement line */
.conf_leftMenu {
  margin-top: 0 !important;      /* in case any theme adds a top margin */
}


/* Force the timezone text in the infogrid date row to use the accent blue */
.conference-page .infogrid .infoline.date .text .timezone,
.conference-page .infogrid .infoline.date .timezone {
  color: var(--vts-accent) !important;
}


/* Remove extra space after the announcement line */
.simpleTextAnnouncement {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten the whole conference header block */
.confheader {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure the content block doesn’t reintroduce a top gap */
#confSectionsBox {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ================================
   Center "VietTESOL International Convention" vertically
   ================================ */

/* Make sure the containing row uses flex for vertical centering */
.simpleTextAnnouncement {
  display: flex !important;
  align-items: center !important; /* vertical centering */
  justify-content: center !important; /* horizontal centering */
  line-height: normal !important;
  height: auto !important;
  padding: 0.3em 0 !important; /* slight breathing room */
}

/* =======================================================
   TOP MENU: Sofia Sans Extra Condensed + ALL CAPS
   SUBMENUS: keep original case & font
   ======================================================= */

/* Load the Sofia Sans Extra Condensed font */
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@400;500;600;700&display=swap');

/* Top-level menu items only */
.conf_leftMenu > ul > li > a {
  /*font-family: 'Sofia Sans Extra Condensed', sans-serif !important;*/
  text-transform: uppercase !important;
  letter-spacing: normal;
  font-weight: 300;
  }

/* Keep hover/active states consistent */
.conf_leftMenu > ul > li > a:hover,
.conf_leftMenu > ul > li > a:focus,
.conf_leftMenu > ul > li.menuConfSelected > a {
  /*font-family: 'Sofia Sans Extra Condensed', sans-serif !important;*/
  text-transform: uppercase !important;
}

/* Submenu items (dropdowns): normal font & case */
.conf_leftMenu ul.inner li a,
.conf_leftMenu li ul li a {
  /*font-family: 'Sofia Sans Extra Condensed', sans-serif !important;  */
  text-transform: none !important;
  font-weight: 400;
  letter-spacing: normal;
}


/* =======================================
   BODY TEXT SIZE ADJUSTMENT
   ======================================= */

/* Apply to the main readable sections only */
#confSectionsBox,
.confBodyBox,
.mainContent,
.conference-page,
.page-content,
.col2,
.conference-page .page-content p,
.conference-page .page-content li {
  font-size: 1.02em !important;   /* increase text size */
  line-height: 1.55em !important; /* keep good readability */
}


/* 2) Apply to main menu text (outer + inner items) */
.conf_leftMenu #outer > li.menuConfTitle > a,
.conf_leftMenu #outer li.menuConfTitle > a,
.conf_leftMenu #outer li.menuConfMiddleCell > a {
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif !important;
}

/* Optional: keep the selected state consistent */
.conf_leftMenu #outer > li.menuConfTitle.selected > a,
.conf_leftMenu #outer > li.menuConfTitle.menuConfSelected > a {
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif !important;
}

/* Keep it unclickable */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner) > a{
  pointer-events: none;
  cursor: default;
}

/* Hover effect on the parent item (li), styling the link inside */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner):hover > a{
  /* put your existing hover styles here */
  text-decoration: underline;    /* example */
  opacity: 0.9;                  /* example */
}

/* Optional: hover background on the whole row */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner):hover{
  /* example */
  background: rgba(0,0,0,0.04);
}

/* Optional: keyboard focus style when tabbing through the menu */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner):focus-within > a{
  text-decoration: underline;
}
/* Parent items (those that have .inner): no underline on hover */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner):hover > a {
  text-decoration: none !important;
}

/* MENU FONT SIZE — top-level + dropdowns */
.conf_leftMenu > ul > li > a {
  font-size: 18px !important;  /* parent items */
}

.conf_leftMenu ul.inner li a,
.conf_leftMenu li ul li a {
  font-size: 16px !important;  /* child items */
}

/* Dropdown panel background (submenu container) */
.conf_leftMenu li ul,
.conf_leftMenu li ul.inner {
  background: #5DA9FF !important;
}

/* (Optional but recommended) make submenu link text readable on blue */
.conf_leftMenu li ul li a,
.conf_leftMenu li ul.inner li a {
  color: #ffffff !important;
}

/* (Optional) keep hover state distinct inside the dropdown */
.conf_leftMenu li ul li a:hover,
.conf_leftMenu li ul.inner li a:hover,
.conf_leftMenu li ul li a:focus,
.conf_leftMenu li ul.inner li a:focus {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* Exception by href for Submission menu */
.conf_leftMenu #outer > li.menuConfTitle:has(> ul.inner) > a[href="/event/11/abstracts/"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 1) Hide the timezone line */
.confSubTitle .datePlace .timezone {
  display: none !important;
}

/* 2) Put date + place on ONE line */
.confSubTitle .datePlace {
  display: flex !important;
  align-items: center;
  justify-content: center;   /* remove if you want left-aligned */
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Prevent the date/place from breaking into multiple lines */
.confSubTitle .datePlace .date,
.confSubTitle .datePlace .place {
  white-space: nowrap;
  display: inline;
  margin: 0;
}

/* 3) Add "at " before the place */
.confSubTitle .datePlace .place::before {
  content: "at ";
}


/* Vertically center the left text block + the search box within the subtitle row */
.confSubTitleBox .confSubTitleContent.flexrow {
  display: flex !important;
  align-items: center !important; /* middle align instead of top */
}

/* Also ensure the date/place container centers nicely */
.confSubTitleBox .confSubTitle .datePlace {
  display: flex !important;
  align-items: center !important;
}

/* Change the color of date + place text */
.confSubTitleBox .confSubTitle .datePlace,
.confSubTitleBox .confSubTitle .datePlace .date,
.confSubTitleBox .confSubTitle .datePlace .place {
  color: #1A64A0 !important;
}

/* If you want the search input/icon to match the same text color */
.confSubTitleBox #event-search-box,
.confSubTitleBox #event-search-box input,
.confSubTitleBox #event-search-box i.search.icon {
  color: #1A64A0 !important;
}

/* CENTER the LOCATION row (icon + text as a unit) */
.conference-page .infogrid .infoline.location {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  text-align: center !important;
  gap: 0.5em !important;
}

/* Center the location text block + its lines */
.conference-page .infogrid .infoline.location .text {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.25em !important;
}

/* Keep the icon aligned like the other rows */
.conference-page .infogrid .infoline.location .icon {
  font-size: 1.1em !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin-right: 0.4em !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}

/* Make sure each line centers */
.conference-page .infogrid .infoline.location .place,
.conference-page .infogrid .infoline.location .address,
.conference-page .infogrid .infoline.location a {
  text-align: center !important;
}

/* Make location row inherit the same accent color you already set */
.conference-page .infogrid .infoline.location,
.conference-page .infogrid .infoline.location .text,
.conference-page .infogrid .infoline.location a {
  color: var(--vts-accent) !important;
}

/* Fix LOCATION icon alignment (match time/info icon behavior) */
.conference-page .infogrid .infoline.location {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
}

/* The icon is likely floated/absolutely positioned by Indico -> neutralize it */
.conference-page .infogrid .infoline.location > .icon {
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;

  display: inline-block !important;
  margin: 0 0.4em 0 0 !important;   /* same spacing as your time/info icons */
  flex: 0 0 auto !important;
}

/* Keep the text block centered next to the icon */
.conference-page .infogrid .infoline.location > .text {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

/* Increase LOCATION icon size */
.conference-page .infogrid .infoline.location > .icon {
  font-size: 1.5em !important;  /* adjust: 1.2em–1.6em */
}

/* Add bold "Venue:" before the location place text */
.conference-page .infogrid .infoline.location .place::before {
  content: "Venue: ";
  font-weight: 700;
}
/* Put place + map link on the same line */
.conference-page .infogrid .infoline.location .text {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0.35em !important;
}

/* Keep the place as inline text */
.conference-page .infogrid .infoline.location .text .place {
  display: inline !important;
}

/* Make the link inline and replace its visible text with "(Map)" */
.conference-page .infogrid .infoline.location .text > a {
  display: inline !important;
  font-size: 1em !important;
  text-decoration: none !important;  /* optional */
}

/* Hide original "Go to map" text */
.conference-page .infogrid .infoline.location .text > a {
  font-size: 0 !important;           /* hides text nodes */
  line-height: 0 !important;
}

/* Show new label */
.conference-page .infogrid .infoline.location .text > a::after {
  content: "(Map)";
  font-size: 1.15rem !important;                   /* set actual size */
  line-height: 1;                    /* reset line height */
  text-decoration: none;        /* optional */
}

/* Replace timezone text visually */
.conference-page .infogrid .infoline.date .timezone {
  font-size: 0 !important;      /* hide original text */
  line-height: 0 !important;
}

.conference-page .infogrid .infoline.date .timezone::after {
  content: "Ho Chi Minh City (GMT+7)";
  font-size: 1.15rem !important;   /* set visible size */
  line-height: 1.2 !important;
  color: inherit !important;
}

/* Force NO-LINK parent menu items to use the same yellow as other parents */
.conf_leftMenu #outer > li.menuConfTitle > a.no-link,
.conf_leftMenu #outer > li.menuConfTitle > a.no-link:visited,
.conf_leftMenu #outer > li.menuConfTitle > a.no-link:hover,
.conf_leftMenu #outer > li.menuConfTitle > a.no-link:focus {
  color: #ffff99 !important;
}

.conf_leftMenu #outer > li.menuConfTitle > a.no-link:hover,
.conf_leftMenu #outer > li.menuConfTitle > a.no-link:focus {
  background: #e9f3fc !important;
  color: #80002a !important; /* remove this line if you want it to stay yellow on hover */
}

/* Dropdown background (child menu container) */
.conf_leftMenu #outer > li.menuConfTitle > ul.inner {
  background: #5DA9FF !important;
}
/* Ensure child items don't override the dropdown background */
.conf_leftMenu #outer > li.menuConfTitle > ul.inner > li {
  background: transparent !important;
}

.conf_leftMenu #outer > li.menuConfTitle > ul.inner > li > a {
  background: transparent !important;
}

/* Page header background */
.page-header.page-header-dark.event-page-header {
  background: #5DA9FF !important;
}

/* Some Indico themes set the background on inner bars instead */
.page-header.page-header-dark.event-page-header .main-action-bar,
.page-header.page-header-dark.event-page-header #pageSubHeader {
  background: #5DA9FF !important;
}


/* Hide the left button bar, keep the session bar */
.page-header.page-header-dark.event-page-header .button-bar {
  display: none !important;
}

/* Ensure the session bar stays visible */
.page-header.page-header-dark.event-page-header .session-bar {
  display: flex !important;
}
/* Keep the session bar right-aligned after hiding the button bar */
.page-header.page-header-dark.event-page-header .main-action-bar {
  justify-content: flex-end !important;
}

.page-header.page-header-dark.event-page-header .session-bar {
  margin-left: auto !important;     /* pushes it to the right */
  justify-content: flex-end !important;
}

/* Session bar toolbar background */
.page-header.page-header-dark.event-page-header .session-bar,
.page-header.page-header-dark.event-page-header .session-bar .toolbar,
.page-header.page-header-dark.event-page-header .session-bar .toolbar .group {
  background: #5DA9FF !important;
}
.page-header.page-header-dark.event-page-header .session-bar .i-button {
  background: transparent !important;
}

/* Remove the white border/box around each session-bar item */
.page-header.page-header-dark.event-page-header .session-bar .i-button,
.page-header.page-header-dark.event-page-header .session-bar .i-button:hover,
.page-header.page-header-dark.event-page-header .session-bar .i-button:focus,
.page-header.page-header-dark.event-page-header .session-bar .i-button:active {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Also remove separators/dividers inside the toolbar group */
.page-header.page-header-dark.event-page-header .session-bar .separator,
.page-header.page-header-dark.event-page-header .session-bar .toolbar .group > * {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Session bar text + icon color on #0345BF (not pure white) */
.page-header.page-header-dark.event-page-header .session-bar,
.page-header.page-header-dark.event-page-header .session-bar .i-button,
.page-header.page-header-dark.event-page-header .session-bar .i-button * {
  color: #E6EEFF !important; /* soft off-white blue */
}

/* Indico icon font pseudo-elements */
.page-header.page-header-dark.event-page-header .session-bar .i-button::before,
.page-header.page-header-dark.event-page-header .session-bar [class^="icon-"]::before,
.page-header.page-header-dark.event-page-header .session-bar [class*=" icon-"]::before {
  color: #E6EEFF !important;
}

/* Hover/focus: slightly brighter */
.page-header.page-header-dark.event-page-header .session-bar .i-button:hover,
.page-header.page-header-dark.event-page-header .session-bar .i-button:focus {
  color: #F2F6FF !important;
}
.page-header.page-header-dark.event-page-header .session-bar .i-button:hover::before,
.page-header.page-header-dark.event-page-header .session-bar .i-button:focus::before {
  color: #F2F6FF !important;
}

/* =====================================================
   FORCE SOLID BLUE FOR THE CONFERENCE TITLE BAR
   (overrides gradient + any header wrapper backgrounds)
   ===================================================== */

/* The exact element you showed: <div class="confTitleBox clearfix"> */
.confTitleBox.clearfix,
.confheader .confTitleBox,
.confTitleBox {
  background-color: #0345BF !important;
  background-image: none !important;   /* kills gradients/images */
  background: #0345BF !important;      /* final hammer */
}

/* Sometimes the visible background is on the header container, not the box */
.confheader,
.confheader::before,
.confheader::after {
  background-color: #0345BF !important;
  background-image: none !important;
}

/* Ensure inner title area doesn't paint a different bg */
.confTitleBox .confTitle,
.confTitleBox h1,
.confTitleBox h1 a,
.confTitleBox .conference-title-link,
.confTitleBox [itemprop="title"] {
  background: transparent !important;
}