@media all and (min-width: 0) {
  body {
    background-color: #F5F7FB; }

  .bread ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 5px 10px 10px 10px; }
    .bread ul li {
      margin: 0 5px; }
      .bread ul li:first-child {
        margin-left: 0; }
      .bread ul li:last-child {
        margin-right: 0; }
      .bread ul li a {
        text-decoration: none;
        color: #5A5B6A;
        font-size: 12px; }

  .top-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 30px 10px 20px 10px;
    border-top: 1px solid rgba(90, 91, 106, 0.15); }
    .top-cart h1 {
      width: 100%;
      text-align: center;
      font-size: 20px;
      padding: 100px 0; }
      .top-cart h1 a {
        text-decoration: none;
        font-weight: normal;
        color: #5A5B6A; }
    .top-cart li.first {
      text-transform: uppercase;
      font-size: 14px; }
    .top-cart li.last {
      background: #EBF2FF;
      border: 1px solid #2264D1;
      box-sizing: border-box;
      border-radius: 17.5px;
      padding: 7px 10px;
      display: flex;
      align-items: center; }
      .top-cart li.last a {
        text-decoration: none;
        color: #2264D1;
        font-size: 12px; }

  .pro-item h1 {
    display: none; }
  .pro-item ul {
    padding: 0 10px;
    list-style: none; }
    .pro-item ul li {
      background-color: #FFF;
      margin-bottom: 10px;
      border-radius: 8px;
      padding: 10px 0 0 0; }
      .pro-item ul li .info {
        display: flex; }
        .pro-item ul li .info .left {
          width: 90px; }
          .pro-item ul li .info .left img.thumbs {
            width: calc(100% - 20px);
            display: block;
            height: auto;
            margin: auto; }
          .pro-item ul li .info .left p {
            text-align: center;
            font-size: 12px;
            color: #5A5B6A;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 0 0 0; }
            .pro-item ul li .info .left p img {
              margin-right: 5px;
              cursor: pointer; }
        .pro-item ul li .info .right {
          width: calc(100% - 90px); }
          .pro-item ul li .info .right h2 {
            font-size: 12px;
            padding-bottom: 15px; }
            .pro-item ul li .info .right h2 a {
              text-decoration: none;
              color: #5A5B6A; }
          .pro-item ul li .info .right .gia-control {
            display: flex;
            justify-content: space-between; }
            .pro-item ul li .info .right .gia-control .gia-pro .reco {
              padding-bottom: 6px;
              font-size: 10px;
              line-height: 14px;
              color: #5A5B6A; }
              .pro-item ul li .info .right .gia-control .gia-pro .reco b {
                text-decoration: line-through; }
              .pro-item ul li .info .right .gia-control .gia-pro .reco span {
                color: #FF2E00;
                font-size: 14px;
                font-weight: bold; }
            .pro-item ul li .info .right .gia-control .control {
              display: flex;
              justify-content: center;
              padding-right: 10px; }
              .pro-item ul li .info .right .gia-control .control span {
                display: flex;
                align-items: center;
                justify-content: center; }
              .pro-item ul li .info .right .gia-control .control .quantity {
                background-color: #DFDFDF;
                width: 28px;
                height: 28px;
                border: 0.5px solid #DFDFDF;
                font-weight: bold;
                font-size: 12px; }
              .pro-item ul li .info .right .gia-control .control .tang {
                border-radius: 0 5px 5px 0;
                width: 28px;
                height: 28px;
                border: 0.5px solid #DFDFDF;
                font-weight: bold;
                cursor: pointer; }
              .pro-item ul li .info .right .gia-control .control .giam {
                width: 28px;
                height: 28px;
                border: 0.5px solid #DFDFDF;
                font-weight: bold;
                cursor: pointer;
                border-radius: 5px 0 0 5px; }
      .pro-item ul li .bottom {
        display: flex;
        border-top: 0.5px solid rgba(90, 91, 106, 0.15);
        width: calc(100% - 20px);
        margin: auto; }
        .pro-item ul li .bottom .left {
          width: 80px; }
        .pro-item ul li .bottom .right {
          width: calc(100% - 80px); }
          .pro-item ul li .bottom .right h3 {
            background: #EBF2FF;
            border: 0.5px solid #2264D1;
            box-sizing: border-box;
            border-radius: 14.5px;
            width: 97px;
            height: 24px;
            font-size: 10px;
            font-weight: normal;
            color: #0057FF;
            text-align: center;
            line-height: 22px;
            margin: 15px 0 10px 0;
            cursor: pointer; }
          .pro-item ul li .bottom .right .load-khuyen-mai {
            display: none;
            padding-bottom: 10px; }
            .pro-item ul li .bottom .right .load-khuyen-mai p {
              font-size: 10px;
              line-height: 14px;
              color: #5A5B6A; }

  .gia {
    padding: 10px;
    border-bottom: 1px solid rgba(90, 91, 106, 0.15); }
    .gia p {
      display: flex;
      justify-content: space-between;
      padding: 5px 0; }
      .gia p span {
        font-size: 14px;
        color: #5A5B6A; }
      .gia p b {
        font-size: 20px;
        color: #FF2E00; }

  .khach-hang {
    padding: 0 10px; }
    .khach-hang h2 {
      padding: 15px 0 0 0;
      font-size: 14px;
      color: #5A5B6A; }
    .khach-hang .full {
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F2F2F2;
      border-radius: 5px;
      height: 44px;
      outline: none;
      font-family: "Roboto";
      font-size: 14px;
      padding: 0 15px;
      margin: 15px 0; }
    .khach-hang textarea {
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F2F2F2;
      border-radius: 5px;
      font-family: "Roboto";
      font-size: 14px;
      padding: 15px;
      outline: none; }
    .khach-hang div {
      display: flex;
      justify-content: space-between; }
      .khach-hang div input {
        width: calc(50% - 5px);
        background: #FFFFFF;
        border: 1px solid #F2F2F2;
        border-radius: 5px;
        height: 44px;
        outline: none;
        font-family: "Roboto";
        font-size: 14px;
        padding: 0 15px; }
      .khach-hang div select {
        width: calc(50% - 5px);
        background: #FFFFFF;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACJSURBVHgBbU09CoMwFH4vCXbtMbqUOvQA5hBChy4ZCr1GT9CpUNpVjbfQ0cFB0MHRe0jy/IFAEL/p++XDOH6EnPMj7GMQIhARAr63Cc0hGSt519bV+XINAfDkF5BGqfWvZ4sIxEEtC2/+yrJ/sxadd7s/I0asIMBSpx/pfOZInnxLS1aRMcq/mgD+IyhB2H+l6wAAAABJRU5ErkJggg==);
        background-position: right 10px center;
        background-repeat: no-repeat;
        padding-right: 15px;
        border: 1px solid #F2F2F2;
        border-radius: 5px;
        height: 44px;
        margin-top: 15px;
        font-family: "Roboto";
        font-size: 14px;
        color: #5A5B6A;
        -webkit-appearance: none;
        padding-left: 15px;
        outline: none; }

  .hinh-thuc {
    padding: 15px 10px 0 10px; }
    .hinh-thuc h2 {
      font-size: 14px;
      line-height: 20px;
      text-transform: uppercase;
      margin-bottom: 15px;
      color: #5A5B6A; }
    .hinh-thuc ul li {
      margin: 0 0 10px 0;
      background: #FFFFFF;
      border: 1px solid #F2F2F2;
      padding: 0 15px;
      display: flex;
      align-items: center;
      height: 85px; }
      .hinh-thuc ul li.active {
        background: #EBF2FF;
        border: 1px solid #2264D1; }
      .hinh-thuc ul li div {
        width: 70px;
        display: flex;
        align-items: center; }
        .hinh-thuc ul li div img {
          margin: 0 5px; }
      .hinh-thuc ul li p {
        width: calc(100% - 70px);
        padding-left: 20px;
        font-size: 14px;
        color: #5A5B6A; }

  .ma-giam {
    display: flex;
    padding: 25px 10px; }
    .ma-giam input[type="text"] {
      width: calc(100% - 94px);
      background: #FFFFFF;
      border: 1px solid #F2F2F2;
      border-radius: 5px 0 0 5px;
      outline: none;
      font-size: 14px;
      font-family: "Roboto";
      padding-left: 15px; }
    .ma-giam input[type="button"] {
      background: #2264D1;
      border-radius: 0px 5px 5px 0px;
      width: 94px;
      height: 44px;
      border: none;
      font-size: 14px;
      font-family: "Roboto";
      color: #FFF;
      font-weight: bold; }

  .dat-hang {
    width: calc(100% - 20px);
    height: 70px;
    background: #FF2A09;
    border-radius: 5px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 15px; }
    .dat-hang input {
      font-size: 18px;
      line-height: 24px;
      font-family: "Roboto";
      margin: auto;
      text-transform: uppercase;
      background-color: transparent;
      border: none;
      cursor: pointer;
      display: block;
      padding: 0;
      margin: 0;
      color: #FFF; }
    .dat-hang p {
      font-size: 12px;
      color: #FFF;
      text-align: center;
      padding: 7px 0 0 0; }

  .hai-long {
    padding-bottom: 45px; }
    .hai-long p {
      font-size: 12px;
      line-height: 16px;
      text-align: center; }
      .hai-long p a {
        text-decoration: none;
        color: #2264D1;
        font-weight: bold; } }
@media all and (min-width: 521px) {
  .bread, .top-cart, .pro-item, .gia, .khach-hang, .hinh-thuc, .ma-giam, .dat-hang, .hai-long {
    width: 520px;
    margin: auto; }

  .bread ul {
    padding: 5px 0 10px 0; }

  .top-cart {
    padding: 30px 0 20px 0; }

  .pro-item ul {
    padding: 0; }

  .gia {
    padding: 10px 0; }

  .khach-hang {
    padding: 0; }

  .hinh-thuc {
    padding: 15px 0 0 0; }

  .ma-giam {
    padding: 25px 0; }

  .dat-hang {
    margin-bottom: 15px; } }
@media all and (min-width: 1201px) {
  nav {
    display: block; }
    nav h2 {
      cursor: pointer; }
    nav ul {
      display: none; }

  .bread {
    width: 1200px;
    margin: auto; }

  .top-cart {
    display: none; }

  main {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse; }
    main .left {
      width: 506px; }
      main .left .sticky {
        position: sticky;
        top: 0; }
    main .right {
      width: 628px; }

  .pro-item {
    width: 100%; }
    .pro-item h1 {
      padding: 15px 0;
      font-size: 14px;
      text-transform: uppercase;
      color: #5A5B6A;
      display: block; }
    .pro-item ul li .info .right h2 {
      font-size: 14px; }

  .gia, .khach-hang, .hinh-thuc, .dat-hang {
    width: 100%; } }

/*# sourceMappingURL=cart.css.map */