/* ============================================= */
/*  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');


/* 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;
}

/* ------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: 500;
  }

/* 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;  /* or whatever your body/menu font is */
  text-transform: none !important;
  font-weight: 500;
  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 */
}